/home/mip/mip/public/template/AdminLTE/plugins/RGraph/demos/gauge-bank.html
<!DOCTYPE html >
<html>
<head>
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.gauge.js" ></script>
    
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <title>A bank of adjustable Gauge charts</title>

    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A bank of adjustable Gauge charts" />
     
</head>
<body>

    <h1>A bank of adjustable Gauge charts</h1>
    
    <p>
        These Gauge charts are adjustable and are brought to the "front" of the
        stacking order when mouseover'ed. Note that because of the use of the overlap
        the textAccessible option won't work and thus is disabled.
    </p>
    
    <button onclick="gauge2.value = 100; gauge2.grow()">Click me to animate centerGauge</button><br /><br />

    <canvas id="cvs" width="600" height="350" style="border: 1px solid gray">[No canvas support]</canvas>

    <script>
        window.onload = function ()
        {
            // These are intentionally globals
            gauge1 = new RGraph.Gauge({
                id: 'cvs',
                min:0,
                max: 10,
                value: 18,
                options: {
                    title: 'Pressure',
                    titleBottom: 'Pa',
                    titleBottomColor: '#aaa',
                    centerx: 175,
                    radius: 150,
                    adjustable: true,
                    textAccessible: false
                }
            }).draw();

            gauge2 = new RGraph.Gauge({
                id: 'cvs',
                min:0,
                max: 100,
                value: 78,
                options: {
                    centerx: 275,
                    radius: 150,
                    adjustable: true,
                    title: 'Volume',
                    titleBottomColor: '#aaa',
                    textAccessible: false
                }
            }).draw();

            gauge3 = new RGraph.Gauge({
                id: 'cvs',
                min:0,
                max: 100,
                value: 78,
                options: {
                    centerx: 400,
                    radius: 150,
                    adjustable: true,
                    title: 'Flow rate',
                    titleBottomColor: '#aaa',
                    textAccessible: false
                }
            }).draw();
            
            gauge3.canvas.onmousemove = function (e)
            {
                var mouseXY = RGraph.getMouseXY(e);
                var obj     = RGraph.ObjectRegistry.getObjectByXY(e);
                
                if (obj) {
                    RGraph.ObjectRegistry.bringToFront (obj);
                }
            }
        };
    </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.common.dynamic.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.common.effects.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.gauge.js"&gt;&lt;/script&gt;
</pre>
    
    Put this where you want the chart to show up:
    <pre class="code">
&lt;canvas id="cvs" width="500" height="250" style="border: 1px solid #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 ()
    {
        <span>// These are intentionally globals</span>
        gauge1 = new RGraph.Gauge({
            id: 'cvs',
            min:0,
            max: 10,
            value: 18,
            options: {
                title: 'Pressure',
                titleBottom: 'Pa',
                titleBottomColor: '#aaa',
                centerx: 125,
                radius: 100,
                adjustable: true
            }
        }).draw();




        gauge2 = new RGraph.Gauge({
            id: 'cvs',
            min:0,
            max: 100,
            value: 78,
            options: {
                centerx: 250,
                radius: 100,
                adjustable: true,
                title: 'Volume',
                titleBottom: 'm�',
                titleBottomColor: '#aaa'
            }
        }).draw();

        gauge3 = new RGraph.Gauge({
            id: 'cvs',
            min:0,
            max: 100,
            value: 78,
            options: {
                centerx: 375,
                radius: 100,
                adjustable: true,
                title: 'Flow rate',
                titleBottom: 'm�/s',
                titleBottomColor: '#aaa'
            }
        }).draw();
        
        gauge3.canvas.onmousemove = function (e)
        {
            var mouseXY = RGraph.getMouseXY(e);
            var obj     = RGraph.ObjectRegistry.getObjectByXY(e);
            
            if (obj) {
                RGraph.ObjectRegistry.bringToFront (obj);
            }
        }
    };
&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>

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