jqplot / docs / files / usage-txt.html

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

<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><!--
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><h1 class=CTitle><a name="jqPlot_Usage"></a>jqPlot Usage</h1><div class=CBody><p>jqPlot is a jquery extension to render completely client-side javascript charts in your web pages.&nbsp; The project home page and downloads can be found at <a href="http://code.google.com/p/jqplot/" class=LURL target=_top>http://code.google.com/p/jqplot/</a>.&nbsp;  It is currently under heavy development but fully functional.&nbsp;  To use jqPlot, in your html, include jquery, the jqPlot plugin, and optionally the excanvas script for IE support in your web page:</p><blockquote><pre>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;../jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;jquery.jqplot.js&quot;&gt;&lt;/script&gt;
&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;</pre></blockquote><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><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="samples/basicline.png" width="416" height="317"><p>You can customize the plot by passing options to the $.jqplot function:</p><blockquote><pre>$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
  axes:{yaxis:{min:-10, max:240}},
  series:[{color:'#5FAB78'}]
});</pre></blockquote><p>Which will produce a plot like:</p><img src="samples/basicoptions.png" width="417" height="315"><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;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;jqplot.LogAxisRenderer.js&quot;&gt;&lt;/script&gt;</pre></blockquote><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]]],
{ title:'Exponential Line',
  axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer}},
  series:[{color:'#5FAB78'}]
});</pre></blockquote><p>Which produces a plot like:</p><img src="samples/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]]],
{ title:'Exponential Line',
  axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer, tickDistribution:'power'}},
  series:[{color:'#5FAB78'}]
});</pre></blockquote><p>Which makes a plot like:</p><img src="samples/basiclogoptions.png" width="416" height="310"><p>Propeties that can be set through the options object are documented in the rest of this site.</p></div></div></div>

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


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


<div id=Menu><div class=MEntry><div class=MFile id=MSelected>jqPlot Usage</div></div><div class=MEntry><div class=MFile><a href="examples-txt.html">jqPlot Examples</a></div></div><div class=MEntry><div class=MFile><a href="jquery-jqplot-js.html">jqPlot</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-logAxisRenderer-js.html">$.jqplot.<wbr>LogAxisRenderer</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Index</a><div class=MGroupContent id=MGroupContent1><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></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="Properties">Properties</option></select></div></div><!--Menu-->



<!--START_ND_TOOLTIPS-->
<!--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>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.