A Line chart / Gauge chart dashboard
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.drawing.yaxis.js"></script>
<script src="RGraph.gauge.js"></script>
<script src="RGraph.line.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="975" height="250" style="border: 1px solid #ddd; box-shadow: 1px 1px 2px #ccc">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
var grad;
line = new RGraph.Line({
id: 'cvs',
data: [
[125,128,135,136,21,137,125,123,126,124,123,125,128,128,124,125,126,123,122,121,126,124,125,126,122,121,120,119,11,17],
[125,126,179,165,132,35,36,37,48,49,12,35,48,45,46,43,38,51,52,12,16,95,96,91,48,43,29,24,53,101]
],
options: {
colors: ['#0091FE','#90AA00'],
backgroundColor: '#eee',
backgroundGridColor: 'white',
backgroundGridVlines: false,
axes: false,
yaxisScaleMax: 180,
yaxiScaleDecimals: 2,
textSize: 8,
textColor: '#0091FE',
marginLeft: 40,
marginRight:300,
yaxisLabelsCount: 6,
tickmarksStyle: 'dot',
tickmarksSize: 5,
tickmarksStyleDotLinewidth: 1,
shadow: false
}
}).trace2({frames: 60});
grad = line.context.createLinearGradient(825 - 65,0,825 + 65,0);
grad.addColorStop(0, 'green');
grad.addColorStop(0.4, 'yellow');
grad.addColorStop(0.6, 'yellow');
grad.addColorStop(1, 'red');
var gauge = new RGraph.Gauge({
id: 'cvs',
value: 57,
min: 0,
max: 100,
options: {
centerx: 825,
centery: 63,
radius: 75,
anglesStart: 3.14 - 0.785,
anglesEnd: 6.28 + 0.785,
bandingGreenEnd: 100,
bandingRedStart: 100,
bandingYellowColor: 'transparent',
bandingRedColor: 'transparent',
bandingGreenColor: grad,
textColor: 'gray',
labelsCount: 0,
valueText: true,
valueTextBounding: false,
valueTextColor: '#aaa',
valueTextUnitsPost: '%',
tickmarksLargeColor: 'transparent',
tickmarksSmallColor: 'transparent',
shadow: false,
needleColors: ['blue'],
colorsBackground: 'rgba(0,0,0,0)',
borderOuter: 'rgba(0,0,0,0)',
borderInner: 'rgba(0,0,0,0)',
borderOutline: 'rgba(0,0,0,0)'
}
}).on('beforedraw', function (obj)
{
// On the first frame obj.centerx
is not defined, but
// it is on subsequent frames
RGraph.path2(obj.context,[
'b',
'a',obj.centerx,obj.centery, 60,0,6.28, false,
'f', 'rgba(232,232,232,.5)'
]);
}).draw();
gauge = new RGraph.Gauge({
id: 'cvs',
value: 34,
min: 0,
max: 100,
options: {
centerx: 825,
centery: 187,
radius: 75,
anglesStart: 3.14 - 0.785,
anglesEnd: 6.28 + 0.785,
bandingGreenEnd: 100,
bandingRedStart: 100,
bandingYellowColor: 'transparent',
bandingRedColor: 'transparent',
bandingGreenColor: grad,
textColor: 'transparent',
tickmarksLargeColor: 'transparent',
tickmarksSmallColor: 'transparent',
shadow: false,
needleColors: ['blue'],
colorsBackground: 'rgba(0,0,0,0)',
borderOuter: 'rgba(0,0,0,0)',
borderInner: 'rgba(0,0,0,0)',
borderOutline: 'rgba(0,0,0,0)',
valueText: true,
valueTextColor: '#aaa',
valueTextBounding: false,
valueTextUnitsPost: 'km/h'
}
}).on('beforedraw', function (obj)
{
// On the first frame obj.centerx
is not defined, but
// it is on subsequent frames
RGraph.path2(obj.context,[
'b',
'a',obj.centerx,obj.centery, 60,0,6.28, false,
'f', 'rgba(232,232,232,.5)'
]);
}).draw();
// Draw the right hand Y axis using the drawing API
var yaxis = new RGraph.Drawing.YAxis({
id: 'cvs',
x: line.canvas.width - line.marginRight,
options: {
yaxisTickmarksAlign: 'right',
yaxisScaleMax: 8,
yaxiScaleDecimals: 1,
textSize: 8,
textColor: '#90AA00',
colors: ['transparent']
}
}).draw();
</script>