A Line chart / Gauge chart dashboard

[No canvas support]

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>