Free cookie consent management tool by TermsFeed Policy Generator

source: branches/HiveStatistics/sources/HeuristicLab.Services.Hive.Statistics/3.3/Scripts/jqPlot/usage.txt @ 9617

Last change on this file since 9617 was 9617, checked in by pfleck, 11 years ago

#2063:
Started integrating Hive statistics into statistics web project.
Added jqPlot library for charting.

File size: 4.8 KB
Line 
1Title: jqPlot Usage
2
3Usage Documentation:
4
5Introduction:
6
7jqPlot is a jQuery plugin to generate pure client-side javascript charts in your web pages.
8
9The jqPlot home page is at <http://www.jqplot.com/>. 
10
11The project page and downloads are at <http://www.bitbucket.org/cleonello/jqplot/>.
12
13Below are a few examples to demonstrate jqPlot usage.  These plots are shown as static images. 
14Many more examples of dynamically rendered plots can be seen on the test and examples pages here: <../../tests/>.
15
16Include the Files:
17
18jqPlot requires jQuery (1.4+ required for certain features). jQuery is included in the distribution. 
19To use jqPlot include jquery, the jqPlot jQuery plugin, jqPlot css file and optionally the excanvas
20script for IE support in your web page.  Note, excanvas is required only for IE versions below 9.  IE 9 includes
21native support for the canvas element and does not require excanvas:
22
23> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
24> <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
25> <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
26> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
27
28Add a plot container:
29
30Add a container (target) to your web page where you want your plot to show up.
31Be sure to give your target a width and a height:
32
33> <div id="chartdiv" style="height:400px;width:300px; "></div>
34
35Create a plot:
36
37Then, create the actual plot by calling the
38$.jqplot plugin with the id of your target and some data:
39
40> $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
41
42Which will produce a
43chart like:
44
45(see images/basicline.png)
46
47Plot Options:
48
49You can customize the plot by passing options to the $.jqplot function.  Options are described in
50<jqPlot Options> in the jqPlotOptions.txt file.  An example of options usage:
51
52> $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
53> { title:'Exponential Line',
54>   axes:{yaxis:{min:-10, max:240}},
55>   series:[{color:'#5FAB78'}]
56> });
57
58Which will produce
59a plot like:
60
61(see images/basicoptions.png)
62
63Using Plugins:
64
65You can use jqPlot plugins (that is, plugins to the jqPlot plugin) by including them in your html
66after you include the jqPlot plugin.  Here is how to include the log axis plugin:
67
68> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
69> <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
70> <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
71> <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
72> <script language="javascript" type="text/javascript" src="jqplot.logAxisRenderer.js"></script>
73
74Important note:  For jqplot builds r529 and above (0.9.7r529 and higher), you must explicitly
75enable plugins via either the { show: true } plugin option to the plot or by using
76the $.jqplot.config.enablePlugins = true; config options set on the page before plot creation.
77Only plugins that can be immediately active upon loading are affected.  This includes
78non-renderer plugins like cursor, dragable, highlighter, and trendline.
79
80Here is a the same $.jqplot call
81but with a log y axis:
82
83> $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
84> { title:'Exponential Line',
85>   axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer}},
86>   series:[{color:'#5FAB78'}]
87> });
88
89Which produces
90a plot like:
91
92(see images/basiclogaxis.png)
93
94You can further customize with options specific
95to the log axis plugin:
96
97> $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
98> { title:'Exponential Line',
99>   axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer, tickDistribution:'power'}},
100>   series:[{color:'#5FAB78'}]
101> });
102
103Which makes a
104plot like:
105
106(see images/basiclogoptions.png)
107
108For a full list of options, see <jqPlot Options> in the jqPlotOptions.txt file.
109
110You can add as many plugins as you wish.  Order is generally not important. 
111Some plugins, like the highlighter plugin which highlights data points near the
112mouse,  don't need any extra options or setup to function.  Highlighter does have
113additional options which the user can set.
114
115Other plugins, the barRenderer for example, provide functionality the must be specified
116in the chart options object.  To render a series as a bar graph with the bar renderer,
117you would first include the plugin after jqPlot:
118
119> <script language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
120
121Then you would create
122a chart like:
123
124> $.jqplot('chartdiv',  [[34.53, 56.32, 25.1, 18.6]], {series:[{renderer:$.jqplot.BarRenderer}]});
125
126Here the default LineRenderer is replaced by a BarRenderer to generate a bar graph for the first (an only) series.
Note: See TracBrowser for help on using the repository browser.