public/javascripts/jqplot/docs/files/usage-txt.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
   2
   3 <html><head><title>jqPlot Usage</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><!--
   4 if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>
   5
   6 <!--  Generated by Natural Docs, version 1.4 -->
   7 <!--  http://www.naturaldocs.org  -->
   8
   9 <!-- saved from url=(0026)http://www.naturaldocs.org -->
  10
  11
  12
  13
  14 <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="jqPlot_Usage"></a>jqPlot Usage</div><div class=CBody><h4 class=CHeading>Usage Documentation</h4><h4 class=CHeading>Introduction</h4><p>jqPlot is a jQuery plugin to generate pure client-side javascript charts in your web pages.</p><p>The jqPlot home page is at <a href="http://www.jqplot.com/" class=LURL target=_top>http://www.jqplot.com/</a>.</p><p>The project page and downloads are at <a href="http://www.bitbucket.org/cleonello/jqplot/" class=LURL target=_top>http://www.bitbucket.org/cleonello/jqplot/</a>.</p><p>Below are a few examples to demonstrate jqPlot usage.&nbsp;  These plots are shown as static images.&nbsp; Many more examples of dynamically rendered plots can be seen on the test and examples pages here: <a href="../../tests/" class=LURL target=_top>../../tests/</a>.</p><h4 class=CHeading>Include the Files</h4><p>jqPlot requires jQuery (1.4+ required for certain features). jQuery is included in the distribution.&nbsp; To use jqPlot include jquery, the jqPlot jQuery plugin, jqPlot css file and optionally the excanvas script for IE support in your web page.&nbsp;  Note, excanvas is required only for IE versions below 9.&nbsp;  IE 9 includes native support for the canvas element and does not require excanvas:</p><blockquote><pre>&lt;!--[if lt IE 9]&gt;&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;excanvas.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;
  15 &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;
  16 &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;jquery.jqplot.min.js&quot;&gt;&lt;/script&gt;
  17 &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;jquery.jqplot.css&quot; /&gt;</pre></blockquote><h4 class=CHeading>Add a plot container</h4><p>Add a container (target) to your web page where you want your plot to show up.&nbsp; Be sure to give your target a width and a height:</p><blockquote><pre>&lt;div id=&quot;chartdiv&quot; style=&quot;height:400px;width:300px; &quot;&gt;&lt;/div&gt;</pre></blockquote><h4 class=CHeading>Create a plot</h4><p>Then, create the actual plot by calling the $.jqplot plugin with the id of your target and some data:</p><blockquote><pre>$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);</pre></blockquote><p>Which will produce a chart like:</p><img src="images/basicline.png" width="416" height="317"><h4 class=CHeading>Plot Options</h4><p>You can customize the plot by passing options to the $.jqplot function.&nbsp;  Options are described in <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.&nbsp;  An example of options usage:</p><blockquote><pre>$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
  18 { title:'Exponential Line',
  19   axes:{yaxis:{min:-10, max:240}},
  20   series:[{color:'#5FAB78'}]
  21 });</pre></blockquote><p>Which will produce a plot like:</p><img src="images/basicoptions.png" width="417" height="315"><h4 class=CHeading>Using Plugins</h4><p>You can use jqPlot plugins (that is, plugins to the jqPlot plugin) by including them in your html after you include the jqPlot plugin.&nbsp;  Here is how to include the log axis plugin:</p><blockquote><pre>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;jquery.jqplot.css&quot; /&gt;
  22 &lt;!--[if IE]&gt;&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;excanvas.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;
  23 &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;
  24 &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;jquery.jqplot.min.js&quot;&gt;&lt;/script&gt;
  25 &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;jqplot.logAxisRenderer.js&quot;&gt;&lt;/script&gt;</pre></blockquote><p>Important note:  For jqplot builds r529 and above (0.9.7r529 and higher), you must explicitly enable plugins via either the { show: true } plugin option to the plot or by using the $.jqplot.config.enablePlugins = true; config options set on the page before plot creation.&nbsp; Only plugins that can be immediately active upon loading are affected.&nbsp;  This includes non-renderer plugins like cursor, dragable, highlighter, and trendline.</p><p>Here is a the same $.jqplot call but with a log y axis:</p><blockquote><pre>$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
  26 { title:'Exponential Line',
  27   axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer}},
  28   series:[{color:'#5FAB78'}]
  29 });</pre></blockquote><p>Which produces a plot like:</p><img src="images/basiclogaxis.png" width="416" height="312"><p>You can further customize with options specific to the log axis plugin:</p><blockquote><pre>$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
  30 { title:'Exponential Line',
  31   axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer, tickDistribution:'power'}},
  32   series:[{color:'#5FAB78'}]
  33 });</pre></blockquote><p>Which makes a plot like:</p><img src="images/basiclogoptions.png" width="416" height="310"><p>For a full list of options, see <a href="jqPlotOptions-txt.html#jqPlot_Options" class=LSection id=link2 onMouseOver="ShowTip(event, 'tt1', 'link2')" onMouseOut="HideTip('tt1')">jqPlot Options</a> in the jqPlotOptions.txt file.</p><p>You can add as many plugins as you wish.&nbsp;  Order is generally not important.&nbsp; Some plugins, like the highlighter plugin which highlights data points near the mouse,  don&rsquo;t need any extra options or setup to function.&nbsp;  Highlighter does have additional options which the user can set.</p><p>Other plugins, the barRenderer for example, provide functionality the must be specified in the chart options object.&nbsp;  To render a series as a bar graph with the bar renderer, you would first include the plugin after jqPlot:</p><blockquote><pre>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;plugins/jqplot.barRenderer.min.js&quot;&gt;&lt;/script&gt;</pre></blockquote><p>Then you would create a chart like:</p><blockquote><pre>$.jqplot('chartdiv',  [[34.53, 56.32, 25.1, 18.6]], {series:[{renderer:$.jqplot.BarRenderer}]});</pre></blockquote><p>Here the default LineRenderer is replaced by a BarRenderer to generate a bar graph for the first (an only) series.</p></div></div></div>
  34
  35 </div><!--Content-->
  36
  37
  38 <div id=Footer>Copyright &copy; 2009 - 2010 Chris Leonello&nbsp; &middot;&nbsp; Updated October 7th, 2012&nbsp; &middot;&nbsp; <a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->
  39
  40
  41 <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 id=MSelected>Usage</div></div><div class=MEntry><div class=MFile><a href="jqPlotOptions-txt.html">jqPlot Options</a></div></div><div class=MEntry><div class=MFile><a href="optionsTutorial-txt.html">Options Tutorial</a></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"><!--
  42 var searchPanel = new SearchPanel("searchPanel", "HTML", "../search");
  43 --></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><!--
  44 HideAllBut([1, 4, 5], 6);// --></script></div><!--Menu-->
  45
  46
  47
  48 <!--START_ND_TOOLTIPS-->
  49 <div class=CToolTip id="tt1"><div class=CSection><b>This document is out of date. </div></div><!--END_ND_TOOLTIPS-->
  50
  51
  52
  53
  54 <div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>
  55
  56
  57 <script language=JavaScript><!--
  58 if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>