/home/mip/public_html/template/AdminLTE/plugins/RGraph/demos/line-blue-green.html
<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    

    <script src="../libraries/RGraph.common.core.js"></script>
    <script src="../libraries/RGraph.drawing.yaxis.js"></script>
    <script src="../libraries/RGraph.gauge.js"></script>
    <script src="../libraries/RGraph.line.js"></script>
    
    <title>A Line chart/Gauge dashboard</title>
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A Line chart/Gauge dashboard" />
     
</head>
<body>

    <h1>A Line chart/Gauge dashboard</h1>

    <canvas id="cvs" width="975" height="250" style="border: 1px solid #ddd; box-shadow: 1px 1px 2px #ccc">[No canvas support]</canvas>
    
    <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>







    <p></p>

    This goes in the documents header:
    <pre class="code">
&lt;script src="RGraph.common.core.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.drawing.yaxis.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.gauge.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.line.js"&gt;&lt;/script&gt;
</pre>
    
    Put this where you want the chart to show up:
    <pre class="code">
&lt;canvas id="cvs" width="975" height="250" style="border: 1px solid #ddd; box-shadow: 1px 1px 2px #ccc"&gt;
    [No canvas support]
&lt;/canvas&gt;
</pre>

    This is the code that generates the chart:
    <pre class="code">
&lt;script&gt;
    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)
        {
            <span>// On the first frame obj.centerx is not defined, but
            // it is on subsequent frames</span>
            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)
        {
            <span>// On the first frame obj.centerx is not defined, but
            // it is on subsequent frames</span>
            RGraph.path2(obj.context,[
                'b',
                'a',obj.centerx,obj.centery, 60,0,6.28, false,
                'f', 'rgba(232,232,232,.5)'
            ]);
        }).draw();



        <span>// Draw the right hand Y axis using the drawing API</span>
        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();
    };
&lt;/script&gt;
</pre>



    <p>
        <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.rgraph.net" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://www.rgraph.net', null, 'top=50,left=50,width=600,height=368'); return false"><img src="../images/facebook-large.png" width="200" height="43" alt="Share on Facebook" border="0" title="Visit the RGraph Facebook page" /></a>
        <a href="https://twitter.com/_rgraph" target="_blank" onclick="window.open('https://twitter.com/_rgraph', null, 'top=50,left=50,width=700,height=400'); return false"><img src="../images/twitter-large.png" width="200" height="43" alt="Share on Twitter" border="0" title="Mention RGraph on Twitter" /></a>
         
    </p>



    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>
Path: home/mip/public_html/template/AdminLTE/plugins/RGraph/demos