optionsTutorial-txt.html 19.3 KB

Edit Raw Blame History

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><title>Options Tutorial</title><link rel="stylesheet" type="text/css" href="../styles/main.css"><script language=JavaScript src="../javascript/main.js"></script><script language=JavaScript src="../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad()"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.4 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->


<div id=Content><div class="CSection"><div class=CTopic id=MainTopic><div class="CTitle logo"><div class="nav"><a class="nav" href="../../index.php"><span>&gt;</span>Home</a><a class="nav"  href="../../tests/"><span>&gt;</span>Examples</a><a class="nav"  href="../../docs/"><span>&gt;</span>Docs</a><a class="nav"  href="http://bitbucket.org/cleonello/jqplot/downloads/"><span>&gt;</span>Download</a><a class="nav" href="../../info.php"><span>&gt;</span>Info</a><a class="nav"  href="../../donate.php"><span>&gt;</span>Donate</a></div><a name="Options_Tutorial"></a>Options Tutorial</div><div class=CBody><p>This document will help you understand how jqPlot&rsquo;s options relate to the API documentation and the jqPlot object itself.&nbsp;  For a listing of options available to jqPlot, see <a href="jqPlotOptions-txt.html#jqPlot_Options" class=LSection id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">jqPlot Options</a> in the jqPlotOptions.txt file.</p><p>The key to effectively using jqPlot is understanding jqPlot&rsquo;s options.&nbsp;  The online documentation is API documentation.&nbsp;  While it explains what attributes and methods various objects posses, it doesn&rsquo;t explain how to use or set those attributes through options.&nbsp;  This tutorial will help explain that.</p><p>Lets assume you are creating a plot like this:</p><blockquote><pre>chart = $.jqplot('chart', dataSeries, optionsObj);</pre></blockquote><p>First, note that you shouldn&rsquo;t try to directly set attributes on the &ldquo;chart&rdquo; object (like chart.grid.shadow) after your call to $.jqplot().&nbsp; At best this won&rsquo;t do anything **(see below).&nbsp; You should pass options in via the &ldquo;optionsObj&rdquo;.</p><p>the optionsObj really represents the plot object (jqPlot object, not to be confused with the $.jqplot function which will create a jqPlot object).&nbsp;  Attributes you specify on that object will be merged with attributes in the jqPlot object.&nbsp;  The axes, legend, series, etc. are attributes on the jqPlot object.&nbsp;  The jqPlot/optionsObj object looks something like (only some attributes shown):</p><blockquote><pre>jqPlot-|
       |-seriesColors
       |-textColor
       |-fontFamily
       |-fontSize
       |-stackSeries
       |-series(Array)-|
       |               |-Series1-|
       |               |         |-lineWidth
       |               |         |-linePattern
       |               |         |-shadow
       |               |         |-showLine
       |               |         |-showMarker
       |               |         |-color
       |               |-Series2...
       |               |-...
       |               |-SeriesN
       |
       |-grid(Object)-|
       |              |-drawGridLines
       |              |-background
       |              |-borderColor
       |              |-borderWidth
       |              |-shadow
       |
       |-title(Object)-|
       |               |-text
       |               |-show
       |               |-fontFamily
       |               |-fontSize
       |               |-textAlign
       |               |-textColor
       |
       |-axes(Object)-|
       |              |-xais-|
       |              |      |-min
       |              |      |-max
       |              |      |-numberTicks
       |              |      |-showTicks
       |              |      |-showTickMarks
       |              |      |-pad
       |
       | ... and so on</pre></blockquote><p>The optionsObj should follow the same construction as if it were a jqPlot object (with some exceptions/shortcuts I&rsquo;ll mention in a moment).&nbsp;  So generally, when you see something like &ldquo;this.drawGridLines&rdquo; in the grid properties in the docs, just replace &ldquo;this&rdquo; with &ldquo;grid&rdquo; in your options object.&nbsp;  So it becomes optionsObj.grid.drawGridLines.&nbsp;  Do likewise with the other objects in the plot, replacing &ldquo;this&rdquo;, with the respective attribute on the plot like &ldquo;legend&rdquo; or &ldquo;title&rdquo;.&nbsp;  Series and Axes are handled a little different, because series is an array and axes has 4 distinct children &ldquo;xaxis&rdquo;, &ldquo;yaxis&rdquo;, &ldquo;x2axis&rdquo; and &ldquo;y2axis&rdquo;.</p><p>So, to remove the shadow from the grid and change the grid border size you would do:</p><blockquote><pre>optionObj = {grid:{shadow:false, borderWidth:9.0}};</pre></blockquote><p>To do the same as above but also make all the text in the plot red you would do:</p><blockquote><pre>optionObj = {
   textColor:&quot;#ff0000&quot;,
   grid:{shadow:false, borderWidth:9.0}
}</pre></blockquote><p>Here is a more deeply nested example.&nbsp; Say you want to specify a min and max on your y axis and use a specific color for your second series.&nbsp;  That would look like:</p><blockquote><pre>optionsObj = {
   axes:{yaxis:{min:5, max:230}},
   series:[{},{color:&quot;#33ff66&quot;}]
}</pre></blockquote><p>Note that series options are an array in order of the series data you sent in to your plot.&nbsp;  To get to the second series, you have to put an object (even if empty) in place of the first series.</p><p>There is a handy shortcut to assign options to all axes or all series at one go.&nbsp;  Use axesDefaults and seriesDefaults.&nbsp;  So, if you wanted both x and y axes to start at 0 and you wanted all series to not show markers, you could do:</p><blockquote><pre>optionsObj = {axesDefaults:{min:0}, seriesDefaults:{showMarker:false}}</pre></blockquote><p>Another shortcut is for the plot title.&nbsp;  Normally, you would assign options to the title as an object.&nbsp;  If you specify a title option as a string, it will assign that to the title.text property automatically.&nbsp; So these two are equivalent:</p><blockquote><pre>optionsObj = {title:{text:&quot;My Plot&quot;}}</pre></blockquote><p>and</p><blockquote><pre>optionsObj = {title:&quot;My Plot&quot;}</pre></blockquote><p>Where things need more explaination is with renderers, plugins and their options.&nbsp;  Briefly, what&rsquo;s  renderer, what&rsquo;s a plugin.</p><p>A renderer is an object that is used to draw something and gets attached to an existing object in the plot in order to draw it.&nbsp;  A plugin does more than just provide drawing functionality to an object.&nbsp;  It will do more like calculate a trend line, change the cursor, provide event driven functionality, etc.&nbsp;  I consider renderers plugins, but plugins don&rsquo;t have to be renderers.</p><p>So, how do you use renderers, plugins, and specify their options?&nbsp; Some common renderes are for bar charts and category axes.&nbsp;  If you want to render your series as a bar chart with each set of bars showing up in a category on the x axis, you do:</p><blockquote><pre>optionsObj = {
   seriesDefaults:{renderer:$.jqplot.BarRenderer},
   axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}
}</pre></blockquote><p>This replaces the default renderer used for all series in the plot with a bar renderer and the x axis default renderer (but not any other axis) with a category renderer.</p><p>Now, how would I assign options to those renderers?&nbsp;  The renderer&rsquo;s attributes may not be present in the pre-existing jqPlot object, they may be specific to the renderer.&nbsp;  This is done through the &ldquo;rendererOptions&rdquo; option on the appropriate object.&nbsp; So, if I wanted my bars to be 25 pixels wide, I would do:</p><blockquote><pre>optionsObj = {
   seriesDefaults:{
       renderer:$.jqplot.BarRenderer},
       rendererOptions:{
           barWidth:25
       },
   axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}
}</pre></blockquote><p>Again, this is using the &ldquo;seriesDefaults&rdquo; option, which will apply options to all series in the plot.&nbsp;  You could do the same on any particular series in the plot through the &ldquo;series&rdquo; options array.</p><p>Plugins are free to add their own options.&nbsp;  For example, the highlighter plugin has it&rsquo;s own set of options that are unique to it.&nbsp; As a result, it responds to options placed in the &ldquo;highlighter&rdquo; attribute of your options object.&nbsp;  So, if I wanted to change the highlighter tooltip to fade in and out slowly and be positioned directly above the point I&rsquo;m highlighting:</p><blockquote><pre>optionsObj = {
    highlighter:{tooltipFadeSpeed:'slow', tooltipLocation:'n'}
}</pre></blockquote><p>Other plugins, like dragable and trendlines, add their options in with the series.&nbsp;  This is because both of those plugins can have different options for different series in the plot.&nbsp;  So, if you wanted to specify the color of the dragable and constrain it to drag only on the x axis as well as specify the color of the trend line you could do:</p><blockquote><pre>series:[{
    dragable: {
        color: '#ff3366',
        constrainTo: 'x'
    },
    trendline: {
        color: '#cccccc'
    }
}]</pre></blockquote><p>This would apply those options to the first series only.&nbsp;  If you had 2 series and wanted to turn off dragging and trend lines on the second series, you could do:</p><blockquote><pre>series:[{
    dragable: {
        color: '#ff3366',
        constrainTo: 'x'
    },
    trendline: {
        color: '#cccccc'
    }
}, {
   isDragable: false,
   trendline:{
       show: false
   }
}]</pre></blockquote><p>Note, series dragability is turned off with the &ldquo;isDragable&rdquo; option directly on the series itself, not with a suboption of &ldquo;dragable&rdquo;.&nbsp;  This may be improved in the future.</p><p>I hope this is helpful.&nbsp; A few key points to remember:</p><ul><li>When you see &ldquo;this&rdquo; in the api docs, you generally replace it with the name of the object (in lowercase) you are looking at in your options object.</li><li>seriesDefaults and axesDefaults are convenient shortcuts.</li><li>to assign options to a renderer, generally use the &ldquo;rendererOptions&rdquo;</li><li>plugins may add their own options attribute, like &ldquo;highlighter&rdquo; or &ldquo;cursor&rdquo;.</li></ul><p>** Note:  you can set attributes after the plot is created (like plot.grid.shadow = false), but you&rsquo;ll have to issue the appropriate calls to possibly reinitialize and redraw the plot.&nbsp;  jqPlot can definitely handle this to change the plot after creation (this is how the dragable plugin updates the plot data and the trend line plugin recomputes itself when data changes).&nbsp;  This hasn&rsquo;t been documented yet, however.</p></div></div></div>

</div><!--Content-->


<div id=Footer>Copyright &copy; 2009 - 2010 Chris Leonello&nbsp; &middot;&nbsp; Updated November 12th, 2012&nbsp; &middot;&nbsp; <a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->


<div id=Menu><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Usage and Options</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MFile><a href="usage-txt.html">Usage</a></div></div><div class=MEntry><div class=MFile><a href="jqPlotOptions-txt.html">jqPlot Options</a></div></div><div class=MEntry><div class=MFile id=MSelected>Options Tutorial</div></div><div class=MEntry><div class=MFile><a href="jqPlotCssStyling-txt.html">jqPlot CSS Customization</a></div></div><div class=MEntry><div class=MFile><a href="changes-txt.html">Change Log</a></div></div><div class=MEntry><div class=MLink><a href="../../tests/">Examples</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent4')">API Documentation</a><div class=MGroupContent id=MGroupContent4><div class=MEntry><div class=MFile><a href="jqplot-core-js.html">jqPlot Charts</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent2')">Core Renderers</a><div class=MGroupContent id=MGroupContent2><div class=MEntry><div class=MFile><a href="jqplot-axisTickRenderer-js.html">Axis Tick Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-canvasGridRenderer-js.html">Canvas Grid Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-divTitleRenderer-js.html">Div Title Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-linearAxisRenderer-js.html">Linear Axis Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-markerRenderer-js.html">Marker Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-shapeRenderer-js.html">Shape Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-shadowRenderer-js.html">Shadow Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-lineRenderer-js.html">Line Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-axisLabelRenderer-js.html">Axis Label Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-themeEngine-js.html">Theme Engine</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-toImage-js.html">fn</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent3')">Plugins</a><div class=MGroupContent id=MGroupContent3><div class=MEntry><div class=MFile><a href="plugins/jqplot-barRenderer-js.html">jqplot.<wbr>BarRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-BezierCurveRenderer-js.html">jqplot.<wbr>BezierCurveRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-blockRenderer-js.html">jqplot.<wbr>BlockRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-bubbleRenderer-js.html">jqplot.<wbr>BubbleRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasAxisLabelRenderer-js.html">jqplot.<wbr>CanvasAxisLabelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasAxisTickRenderer-js.html">jqplot.<wbr>CanvasAxisTickRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidGridRenderer-js.html">jqplot.<wbr>CanvasGridRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasOverlay-js.html">jqplot.<wbr>CanvasOverlay</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-categoryAxisRenderer-js.html">jqplot.<wbr>CategoryAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-ciParser-js.html">jqplot.<wbr>ciParser</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-cursor-js.html">jqplot.<wbr>Cursor</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-dateAxisRenderer-js.html">jqplot.<wbr>DateAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-donutRenderer-js.html">jqplot.<wbr>DonutRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-dragable-js.html">jqplot.<wbr>Dragable</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-enhancedLegendRenderer-js.html">jqplot.<wbr>enhancedLegendRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-funnelRenderer-js.html">jqplot.<wbr>FunnelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-highlighter-js.html">jqplot.<wbr>Highlighter</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-logAxisRenderer-js.html">jqplot.<wbr>LogAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-mekkoAxisRenderer-js.html">jqplot.<wbr>MekkoAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-mekkoRenderer-js.html">jqplot.<wbr>MekkoRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-meterGaugeRenderer-js.html">jqplot.<wbr>MeterGaugeRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-ohlcRenderer-js.html">jqplot.<wbr>OHLCRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pieRenderer-js.html">jqplot.<wbr>PieRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pointLabels-js.html">jqplot.<wbr>PointLabels</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidAxisRenderer-js.html">jqplot.<wbr>pyramidAxisRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidRenderer-js.html">jqplot.<wbr>pyramidRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-trendline-js.html">jqplot.<wbr>Trendline</a></div></div></div></div></div></div></div></div><div class=MEntry><div class=MFile><a href="gpl-2-0-txt.html">GPL License</a></div></div><div class=MEntry><div class=MFile><a href="MIT-LICENSE-txt.html">MIT License</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent5')">Index</a><div class=MGroupContent id=MGroupContent5><div class=MEntry><div class=MIndex><a href="../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Classes.html">Classes</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Properties.html">Properties</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Functions.html">Functions</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Hooks.html">Hooks</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Files.html">Files</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option  id=MSearchEverything selected value="General">Everything</option><option value="Classes">Classes</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Hooks">Hooks</option><option value="Properties">Properties</option></select></div><script language=JavaScript><!--
HideAllBut([1, 4, 5], 6);// --></script></div><!--Menu-->


<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CSection><b>This document is out of date. </div></div><!--END_ND_TOOLTIPS-->


<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>


<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>