Charting reports

Another way to present information to users without using text is to provide charts. Typical text-style reports written in PHP can be leveraged to charting reports by taking several simple steps.

Charting reports use jQuery jqPlot plug-in. In the header, there should be the following:

<link href=”js/jqplot/jquery.jqplot.css” rel=”stylesheet” type=”text/css”>

for styles, and

<script type=”text/javascript” src=”js/jqplot/jquery.jqplot.js”></script>
<script type=”text/javascript” src=”js/jqplot/plugins/jqplot.barRenderer.min.js”></script>
<script type=”text/javascript” src=”js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js”></script>
<script type=”text/javascript” src=”js/jqplot/plugins/jqplot.pointLabels.min.js”></script>

There are 3 variables that need to set, as highlighted:

<script type=”text/javascript”>

$(document).ready(function(){
var plot2 = $.jqplot(‘chart’, [<?=$seriesdata?>], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true, location: ‘e’, edgeTolerance: -15 },

// Rotate the bar shadow as if bar is lit from top right.
shadowAngle: 135,

// Here’s where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: ‘horizontal’
}
},
series:<?=$legenddata?>,
legend: {
show: true,
placement: ‘outsideGrid’
},
axes: {
xaxis:{renderer:$.jqplot.LogAxisRenderer},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: <?=$labeldata?>
}
}
});

});
</script>

$seriesdata

Series data have to be in the form:

[series1,series2,…., seriesN]

where N is the number of series (in this specific example, it is the number of statuses). A series is in the form

[value1,location1],[value2,location2],…,[valueM,locationM]

where M is the number of labels along the axis (in this specific example, it is the number of crews).

An example is given below with 3 series:

[[2,1], [4,2], [6,3], [3,4]],
[[5,1], [1,2], [3,3], [4,4]],
[[4,1], [7,2], [1,3], [2,4]]]

$legenddata

Legend data have to be in the form:

[{label:legend1},{label:legend2},…,{label:legendN}]

An example for the series above that follows:

[{label:’ASSIGNED’},{label:’CLOSED’},{label:’OPEN’}]

In the corresponding legend, 3 different labels are used for the 3 statuses, respectively.

$labeldata

Label data have to be in the form:

[label1,label2,…,labelM]

where M is the number of labels along the axis.

An example is given below:

[‘2ND SHIFT’,’3RD SHIFT’,’CARPENTRY’]