<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> window.onload = function () { var grad; var 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, noaxes: true, ymax: 180, scaleDecimals: 2, scaleZerostart: true, textSize: 8, textColor: '#0091FE', gutterLeft: 40, gutterRight:300, ylabelsCount: 6, tickmarks: 'dot', ticksize: 5, tickmarksDotLinewidth: 1, shadow: false, textAccessible: true } }).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, greenEnd: 100, redStart: 100, yellowColor: 'transparent', redColor: 'transparent', greenColor: grad, textColor: 'gray', labelsCount: 0, valueText: true, valueTextBounding: false, valueTextColor: '#aaa', unitsPost: '%', tickmarksBigColor: 'transparent', tickmarksSmallColor: 'transparent', shadow: false, needleColors: ['blue'], backgroundColor: 'rgba(0,0,0,0)', borderOuter: 'rgba(0,0,0,0)', borderInner: 'rgba(0,0,0,0)', borderOutline: 'rgba(0,0,0,0)', textAccessible: true } }).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(); var 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, greenEnd: 100, redStart: 100, yellowColor: 'transparent', redColor: 'transparent', greenColor: grad, textColor: 'transparent', tickmarksBigColor: 'transparent', tickmarksSmallColor: 'transparent', shadow: false, needleColors: ['blue'], backgroundColor: '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, unitsPost: 'km/h', textAccessible: true } }).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.gutterRight, options: { align: 'right', max: 8, scaleDecimals: 1, textSize: 8, textColor: '#90AA00', colors: ['transparent'], textAccessible: true } }).draw(); }; </script>