Report Writing – Charting reports

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”>

var plot2 = $.jqplot(‘chart’, [<?=$seriesdata?>], {
seriesDefaults: {
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’
legend: {
show: true,
placement: ‘outsideGrid’
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: <?=$labeldata?>



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


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]]]


Legend data have to be in the form:


An example for the series above that follows:


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


Label data have to be in the form:


where M is the number of labels along the axis.

An example is given below: