1. Chris Leonello
  2. jqplot


jqplot / src / usage.txt

Title: jqPlot Usage

jqPlot is a jQuery plugin to generate pure client-side javascript charts in your web pages. The jqPlot home page is at <http://www.jqplot.com/>.  The project page and downloads are at <http://www.bitbucket.org/cleonello/jqplot/>.  jqPlot is .  

Below are a few static samples to demonstrate jqPlot usage.  These plots are not actually generated, but shown as images.  Many more examples of dynamically rendered plots can be seen on the unit test page here: <../../tests/>.

To use jqPlot include jquery, the jqPlot jQuery plugin, and optionally the excanvas script for IE 
support in your web page:

> <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
> <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
> <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
Add a container (target) to your web page where you want your plot to show up.
Be sure to give your target a width and a height:

> <div id="chartdiv" style="height:400px;width:300px; "></div> 

Then, create the actual plot by calling the 
$.jqplot plugin with the id of your target and some data:

> $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

Which will produce a 
chart like:

(see samples/basicline.png)

You can customize the plot by passing options to the 
$.jqplot function:

> $.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'}]
> });

Which will produce 
a plot like:

(see samples/basicoptions.png)

You can use jqPlot plugins (that is, plugins to the jqPlot plugin) by including them in your html 
after you include the jqPlot plugin.  Here is how to include the log axis plugin:

: <script language="javascript" type="text/javascript" src="jqplot.LogAxisRenderer.js"></script>

Here is a the same $.jqplot call 
but with a log y axis:

: $.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'}]
: });

Which produces 
a plot like:

(see samples/basiclogaxis.png)

You can further customize with options specific 
to the log axis plugin:

: $.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'}]
: });

Which makes a 
plot like:

(see samples/basiclogoptions.png)

Propeties that can be set through the options object are documented in the rest of this site.