jqPlot plugin for Agile Toolkit 4.1.1

Agile ToolKit is a PHP5 toolkit consisting of a core framework, User Interface and JQuery integration .
The goal of Agile Toolkit is to allow web developer to produce rich, dynamic, stylish and powerful web application by only writing native PHP code and very little of it.
You can download the latest stable release of Agile ToolKit from http://agiletoolkit.org/download.
More information about the Agile ToolKit is available here - php framework with jquery

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features
You can download the latest jqplot plugin from here https://bitbucket.org/cleonello/jqplot/downloads/.
see http://www.jqplot.com/ for more details on jqplot

These pages provide examples of integrating jqPlot with Agile ToolKit (aka ATK4).
The example pages show the graphs from the jqplot example pages but created inside agile toolkit. The javascript code is shown below the graph along with the Agile ToolKit equivalent code.
In most cases, the full ATK page code is shown whereas the jqplot version is as taken from the example page on jqplot.com.

It makes sense to use a php framework such as Agile Toolkit in conjunction with jqplot because in most cases, you will want to retrieve the data to be graphed from a database such as mysql or maybe a web service.
As jqplot is a pure javascript library, this means it runs on the client side whereas your data is on your server.
The agile toolkit provides very neat and simple integration between the two as you will see from the code examples.

jqPlot Options

One difference when using jqplot from within Agile Toolkit is in specifying the options. If you have a page which makes space for your graph but doesnt render it, check the options (you can view source to see if the are as expected).

For example, jqPlot options are specified as a JSON array such as this
axesDefaults: {
   tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
   tickOptions: {
      angle: 30
   }
},

so to translate this into php, we use the set function which always has two parameters

The first parameter for the set function will always be one of 'axesDefault','seriesDefaults','axes','title','series','legend','grid','seriesColours','stackSeries','cursor','dragable' or 'highlighter'.

If the first parameter is for example, title, the second parameter is just a string .e.g. $chart->set('title','Graph Title Here');
If the first paarmeter is for example, stackSeries, the second parameter is a boolean e.g. $chart->set('stackSeries',true);
For parameters which themselves have several suboptions such as axesDefaults, the second parameter will always be an array.

$chart->set('axesDefaults',array( ... ));

for the suboptions in axesDefaults, we use the key=>value notation for each option

$chart->set('axesDefaults',array('tickRenderer'=>'CanvasAxisTickRenderer' ));

and if the suboption itself has subsuboptions, we define the value as an array - key=>array(key=>value)

$chart->set('axesDefaults',array('tickRenderer'=>'CanvasAxisTickRenderer',
                                  'tickOptions'=>array('angle'=>30)));

For some options such as series, the position determines which series the suboptions apply to

$chart2->setSeries(array($line1,$line2));
$chart2->set('series',array(array('renderer'=>'BarRenderer'),
                            array('xaxis'=>'x2axis', 'yaxis'=>'y2axis')
                           )
             );

Here we have provided two series so we can specify different suboptions for each series

If we only want to apply options to the second series, we have to provide an empty array

e.g. the following will cause the second series to be shown on the same graph as the first
$chart2->setSeries(array($line1,$line2));
$chart2->set('series',array(array(),array('xaxis'=>'x2axis', 'yaxis'=>'y2axis')));

Another difference is in the parameters specified for renderers - in the jqplot javascript code, the shorthand for Jquery is $ so these are specified for example as

var s1=[10,13,15,20];
var ticks=['April','May','June','July']
var plot1 = $.jqplot('chart1', [s1], {
               seriesDefaults:{
			renderer:$.jqplot.BarRenderer,
               },
		axes: {
			xaxis: {
				renderer: $.jqplot.CategoryAxisRenderer,
				ticks: ticks
			}
		}9
}
but php does not like the $. notation so in agiletoolkit you can specify just the last part of the renderer name and the plugin will substitute the full name.
$s1=array(10,13,15,29);
$ticks=array('April','May','June','July');

$chart = $p->add('jqplot', 'chart', null);
$chart->setSeries($s1);
$chart->set('seriesDefaults',array('renderer'=>'BarRenderer'));
$chart->set('axes',array(
		'xaxis'=>array('renderer'=>'CategoryAxisRenderer','ticks'=>$ticks),
		)
);

I'm still learning agiletoolkit, jquery and jqplot and some things take a little getting used to but i am sharing this plugin for others making the same journey.
By creating these pages, i've been able to test the plugin so that it should work as advertised and enable probably 90% of functionality in the jqplot library to be used within the agile toolkit. My work here has been relatively simple but none of this would be possible without the efforts of Romans Malinovskis (agile toolkit) and Chris Leonello (jqplot).
Dont forget to support the work of those guys by donating to them.

Regards

Trevor North

Sterling Endeavours Ltd.