Lines charts, scatter plots and series options
Code examples showing php using agile toolkit and jqplot.
This page shows how to implement the jqplot line graph demos using the atk4 plugin for jqplot. For more details on jqplot and it's options, refer to the original page at http://www.jqplot.com/tests/line-charts.php
Note agile toolkit uses MVC so the code snippet shown is the full php code required to render the page. You will also create a .html e.g. atk4-examples/templates/page/line.html) file which contains a tag e.g. <?$chart1?>.
The html page is linked to the php page in the defaultTemplate function e.g. return array('page/line') will relate to the correct .html template.
The third parameter in the add command e.g. $chart = $p->add('jqplot', null, 'chart1') specifies the tag that will be replaced in the html with the rendered graph from jqplot using the series and options specified - how neat is that!
The $this->api->template->append lines should be on a single line but are split here to accomodate lower resolution screens <1024px wide.
Note agile toolkit uses MVC so the code snippet shown is the full php code required to render the page. You will also create a .html e.g. atk4-examples/templates/page/line.html) file which contains a tag e.g. <?$chart1?>.
The html page is linked to the php page in the defaultTemplate function e.g. return array('page/line') will relate to the correct .html template.
The third parameter in the add command e.g. $chart = $p->add('jqplot', null, 'chart1') specifies the tag that will be replaced in the html with the rendered graph from jqplot using the series and options specified - how neat is that!
The $this->api->template->append lines should be on a single line but are split here to accomodate lower resolution screens <1024px wide.
jqPlot code
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.min.js">
</script><![endif]-->
<script language="javascript" type="text/javascript" src="../src/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../src/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.min.css" />
<script class="code" type="text/javascript">
$(document).ready(function(){
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
</script>
agile toolkit code
class page_line extends Page {
function init(){
parent::init();
$p=$this;
$this->api->template->append('css_include', '<link type="text/css"
href="./atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.css" rel="stylesheet" />'."\n");
$this->api->template->append('ie_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/excanvas.min.js"></script>'."\n");
$this->api->template->append('js_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.min.js"></script>'."\n");
$this->js()->_load('jqplot_helper');
$chart = $p->add('jqplot', null, 'chart1');
$chart->setSeries(array(array(3,7,9,1,4,6,8,2,5)));
}
function defaultTemplate(){
return array('page/line');
}
}
The lines highlighted in different colours correspond between the two code snippets. Those in black are not required e.g. it is not necessary to include the jquery.min.js in agile toolkit as it is loaded already from Frontend.php.
jqPlot code
$(document).ready(function(){
var plot2 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], {
// Give the plot a title.
title: 'Plot With Options',
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
// An axes object holds options for all axes.
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
// Up to 9 y axes are supported.
axes: {
// options for each axis are specified in seperate option objects.
xaxis: {
label: "X Axis",
// Turn off "padding". This will allow data point to lie on the
// edges of the grid. Default padding is 1.2 and will keep all
// points inside the bounds of the grid.
pad: 0
},
yaxis: {
label: "Y Axis"
}
}
});
});
agile toolkit code
class page_line extends Page {
function init(){
parent::init();
$p=$this;
$this->api->template->append('css_include', '<link type="text/css"
href="./atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.css" rel="stylesheet" />'."\n");
$this->api->template->append('ie_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/excanvas.min.js"></script>'."\n");
$this->api->template->append('js_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.min.js"></script>'."\n");
$this->api->template->append('js_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>'."\n");
$this->api->template->append('js_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>'."\n");
$this->js()->_load('jqplot_helper');
$chart2 = $p->add('jqplot', null, 'chart2');
$chart2->setSeries(array(array(3,7,9,1,4,6,8,2,5)));
$chart2->set('title','Plot With Options');
$chart2->set('axesDefaults',array('labelRenderer'=>'CanvasAxisLabelRenderer'));
$chart2->set('axes',array(
'xaxis'=>array('label'=>'X Axis','pad'=>0),
'yaxis'=>array('label'=>'Y Axis')
)
);
}
function defaultTemplate(){
return array('page/line');
}
}
jqPlot code
$(document).ready(function(){
// Some simple loops to build up data arrays.
var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.4){
cosPoints.push([i, Math.cos(i)]);
}
var sinPoints = [];
for (var i=0; i<2*Math.PI; i+=0.4){
sinPoints.push([i, 2*Math.sin(i-.8)]);
}
var powPoints1 = [];
for (var i=0; i<2*Math.PI; i+=0.4) {
powPoints1.push([i, 2.5 + Math.pow(i/4, 2)]);
}
var powPoints2 = [];
for (var i=0; i<2*Math.PI; i+=0.4) {
powPoints2.push([i, -2.5 - Math.pow(i/4, 2)]);
}
var plot3 = $.jqplot('chart3', [cosPoints, sinPoints, powPoints1, powPoints2],
{
title:'Line Style Options',
// Series options are specified as an array of objects, one object
// for each series.
series:[
{
// Change our line width and use a diamond shaped marker.
lineWidth:2,
markerOptions: { style:'dimaond' }
},
{
// Don't show a line, just show markers.
// Make the markers 7 pixels with an 'x' style
showLine:false,
markerOptions: { size: 7, style:"x" }
},
{
// Use (open) circlular markers.
markerOptions: { style:"circle" }
},
{
// Use a thicker, 5 pixel line and 10 pixel
// filled square markers.
lineWidth:5,
markerOptions: { style:"filledSquare", size:10 }
}
]
}
);
});
agile toolkit code
class page_line extends Page {
function init(){
parent::init();
$p=$this;
$this->api->template->append('css_include', '<link type="text/css"
href="./atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.css" rel="stylesheet" />'."\n");
$this->api->template->append('ie_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/excanvas.min.js"></script>'."\n");
$this->api->template->append('js_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.min.js"></script>'."\n");
$this->api->template->append('js_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>'."\n");
$this->api->template->append('js_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>'."\n");
$this->js()->_load('jqplot_helper');
for ($i=0; $i<2*M_PI;$i=$i+0.4) {
$cosPoints[]=array($i, cos($i));
}
for ($i=0; $i<2*M_PI;$i=$i+0.4) {
$sinPoints[]=array($i, 2*sin($i-.8));
}
for ($i=0; $i<2*M_PI;$i=$i+0.4) {
$powPoints1[]=array($i, 2.5+pow($i/4,2));
}
for ($i=0; $i<2*M_PI;$i=$i+0.4) {
$powPoints2[]=array($i, -2.5-pow($i/4,2));
}
$chart3 = $p->add('jqplot', null, 'chart3');
$chart3->setSeries(array($cosPoints, $sinPoints, $powPoints1, $powPoints2));
$chart3->set('title','Line Style Options');
$chart3->set('series',array(array('lineWidth'=>2,'markerOptions'=>array('style'=>'diamond')),
array('showLine'=>false, 'markerOptions'=>array('size'=>7, 'style'=>'x')),
array('markerOptions'=>array('style'=>'circle')),
array('lineWidth'=>5,'markerOptions'=>array('size'=>10, 'style'=>'filledSquare'))
)
);
$chart3->set('axes',array(
'xaxis'=>array('min'=>-1,'max'=>7, 'tickInterval'=>1),
'yaxis'=>array('min'=>-6, 'max'=>6)
)
);
}
function defaultTemplate(){
return array('page/line');
}
}
So lets look at what we need to do to fetch data for the graph from mysql using agile toolkit.
From the atk4-example default install we have to set the DSN for our mysql connection in /atk4-example/config-default.php and in /atk4-example/lib/frontend.php we need to uncomment the line $this->dbConnect();
agile toolkit code
class page_line extends Page {
function init(){
parent::init();
$p=$this;
$this->api->template->append('css_include', '<link type="text/css"
href="./atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.css" rel="stylesheet" />'."\n");
$this->api->template->append('ie_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/excanvas.min.js"></script>'."\n");
$this->api->template->append('js_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.min.js"></script>'."\n");
$this->api->template->append('js_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>'."\n");
$this->api->template->append('js_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>'."\n");
$this->api->template->append('js_include','<script type="text/javascript"
src="./atk4-addons/sterling/jqplot/templates/js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>'."\n");
$this->js()->_load('jqplot_helper');
$db=$this->api->db->dsql()->table('driver d')
->field('d.driver')
->field('d.points')
->where('d.year',2011)
->order('d.points desc')
->do_getAll();
foreach ($db as $row) {
if (is_array($row)) {
$dbdata[] = array($row[0],floatval($row[1]));
}
}
$chart4 = $p->add('jqplot', null, 'chart4');
$chart4->setSeries(array($dbdata));
$chart4->set('title','Formula One - 2011 Drivers Results');
$chart4->set('axes',array(
'xaxis'=>array('renderer'=>'CategoryAxisRenderer'),
)
);
}
function defaultTemplate(){
return array('page/line');
}
}