An adjustable range chart.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
window.onload = function ()
{
var l1 = new RGraph.Line({
id: 'cvs',
data: [
[8,8,6,6,8,9,13,15,16,15,15,12,11,11,13,10,12,11,10,13,12,9,8,11,12,10,16,15,12,11],
[4,5,3,2,5,6,8,9,5,6,4,5,3,2,5,6,8,9,5,6,4,5,3,2,5,6,8,9,5,6]
],
options: {
gutterTop: 50,
labels: ['13th','14th','15th','16th','15th','16th','17th','18th','19th'],
title: 'Range of fuel consumption',
filled: true,
filledRange: true,
fillstyle: 'rgba(128,255,128,0.5)',
linewidth: 2,
colors: ['green'],
numxticks: 8,
adjustable: true,
tickmarks: null,
ymax: 25,
textSize: 14,
textAccessible: true
}
}).draw();
};
</script>