/home/mip/mip/public/template/AdminLTE/plugins/RGraph/demos/basic-web-workers.html
<!DOCTYPE html>
<html>
<head>
    <title>A basic example of a chart updated via a Web Worker</title>

    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content=" A basic example of a chart updated via a Web Worker" />
    <meta name="googlebot" content="NOODP">
    
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />

    <!-- Include the RGraph libraries -->
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.gauge.js" ></script>

</head>
<body>
    
    <h1>A basic demo of Web Workers</h1>
    
    <p>
        This is basic demo of using Web Workers (which are child threads) to generate a random value which is posted back to
        the main thread (this page). The value is then used to update the Gauge. To make a useful example you could use the
        child thread in conjunction with Web Sockets to retieve (for example) load values from your server(s).
        Also, to retrieve data from your server you may find it easier and less involved to use AJAX.
    </p>
    
    <canvas id="cvs" width="300" height="300">[No canvas support]</canvas>

    <script>
        window.onload = function ()
        {
            /**
            * Create the worker child thread. The code that is used as the child thread is held
            * in the /libraries/basic-web-workers.js file.
            */
            var worker = new Worker('/libraries/basic-web-workers.js');
            
            /**
            * The message event is used to listen for messages from the worker thread. When it sends a message
            * to the main thread (ie the main page) the message event is fired and this function runs. It simply updates
            * the Gauge using the Grow effect.
            */
            worker.addEventListener('message', function (e)
            {
                // The data/message that is returned from the worker is a string - so
                // it must be converted to a number
                var value = (Number(e.data) * 0.2) + 0.4;
                gauge.value = value;
                gauge.grow();
    
            }, false);
            
            /**
            * Create the Gauge chart. Initially it is set to have 0 value.
            */
            var gauge = new RGraph.Gauge({
                id: 'cvs',
                min: 0,
                max: 1,
                value:0,
                options: {
                    textAccessible: true,
                    scaleDecimals: 1
                }
            }).draw();
        };
    </script>

    <p>
        <b>See also:</b>
    </p>

    <ul>
        <li><a href="http://www.html5rocks.com/en/tutorials/workers/basics/" target="_blank">Article about Web Workers on html5rocks.com</a></li>
    </ul>







    <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.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="300" height="300"&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>/**
        * Create the worker child thread. The code that is used as the child thread is held
        * in the /libraries/basic-web-workers.js file.
        */</span>
        var worker = new Worker('/libraries/basic-web-workers.js');
        
        <span>/**
        * The message event is used to listen for messages from the worker thread. When it sends a message
        * to the main thread (ie the main page) the message event is fired and this function runs. It simply updates
        * the Gauge using the Grow effect.
        */</span>
        worker.addEventListener('message', function (e)
        {
            <span>// The data/message that is returned from the worker is a string - so
            // it must be converted to a number</span>
            var value = (Number(e.data) * 0.2) + 0.4;
            gauge.value = value;
            gauge.grow();

        }, false);
        
        <span>/**
        * Create the Gauge chart. Initially it is set to have 0 value.
        */</span>
        var gauge = new RGraph.Gauge({
            id: 'cvs',
            min: 0,
            max: 1,
            value:0,
            options: {
                textAccessible: true,
                scaleDecimals: 1
            }
        }).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>

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