progress.html | searchcode

/peanut_web/Calibrators/RGraph/examples/progress.html

http://atcacode.googlecode.com/
HTML | 138 lines | 99 code | 23 blank | 16 comment | 0 complexity | 7ca3a58bc2cdf0d8cdedcadef0c067c7 MD5 | raw file
Possible License(s): GPL-2.0

<?php ob_start('ob_gzhandler') ?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!--
        /**
        * o------------------------------------------------------------------------------o
        * | This file is part of the RGraph package - you can learn more at:             |
        * |                                                                              |
        * |                          http://www.rgraph.net                               |
        * |                                                                              |
        * | This package is licensed under the RGraph license. For all kinds of business |
        * | purposes there is a small one-time licensing fee to pay and for non          |
        * | commercial  purposes it is free to use. You can read the full license here:  |
        * |                                                                              |
        * |                      http://www.rgraph.net/LICENSE.txt                       |
        * o------------------------------------------------------------------------------o
        */
    -->
    <title>RGraph: HTML5 canvas graph library - progress bar</title>

    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
    <link rel="icon" type="image/png" href="/favicon.png">

    <script src="../libraries/RGraph.common.js"></script>
    <script src="../libraries/RGraph.progress.js"></script>
    <!--[if IE]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->

    <script>
        window.onload = function ()
        {
            var progress1 = new RGraph.Progress('progress1', 63, 100);
            progress1.Set('chart.tickmarks', false);
            progress1.Set('chart.arrows', true);

            if (!document.all) {
                progress1.Set('chart.annotatable', true);
                progress1.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom], ['Show the palette', RGraph.Showpalette], ['Clear', function () {RGraph.Clear(progress1.canvas, '#fff'); progress1.Draw();}]]);
            }

            progress1.Draw();

            /**
            * This draws the sdecond progress bar
            */
            var gradient = progress1.context.createLinearGradient(0,0,450,0);
            gradient.addColorStop(0, 'red');
            gradient.addColorStop(0.3, 'yellow');
            gradient.addColorStop(1, '#6f6');

            var progress2 = new RGraph.Progress('progress2', 96, 100);
            progress2.Set('chart.color', gradient);
            progress2.Set('chart.shadow', true);
            progress2.Set('chart.title', 'Disk usage (tooltip, context menu)');
            progress2.Set('chart.units.post', 'Gb');

            if (!document.all) {
                progress2.Set('chart.tooltips', ['<b>Warning!</b><br />Disk usage is high. It might be time to delete<br /> some of your files']);
                progress2.Set('chart.contextmenu', [['A sample context menu', function () {}]]);
            }

            progress2.Draw();

            var progress3 = new RGraph.Progress('progress3', 7, 10);
            progress3.Set('chart.color', 'rgb(123,215,155)');
            progress3.Set('chart.tickmarks', false);
            progress3.Set('chart.orientation', 'vertical');
            progress3.Set('chart.arrows', true);
            progress3.Draw();

            var progress4 = new RGraph.Progress('progress4', 1, 10);
            progress4.Set('chart.color', 'red');
            progress4.Set('chart.gutter', 30);
            progress4.Set('chart.orientation', 'vertical');

            if (!document.all) {
                progress4.Set('chart.tooltips', ['<b>Danger</b><br />The water tank is getting very low!']);
            }

            progress4.Draw();

            var progress5 = new RGraph.Progress('progress5', 14, 50);
            progress5.Set('chart.color', 'yellow');
            progress5.Set('chart.gutter', 30);
            progress5.Set('chart.orientation', 'vertical');
            progress5.Draw();
        }
    </script>
</head>
<body>

<div id="breadcrumb">
    <a href="../index.html">RGraph: HTML5 canvas graph library</a>
    >
    <a href="./index.html">Examples</a>
    >
    Progress bar
</div>

    <h1>RGraph: HTML5 canvas graph library - Progress bar</h1>

    <script>
        if (document.all) {
            document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag yet, so if you want to see the graphs, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul></div>');
        }
    </script>

    <p>
        This is a Progress Bar for showing, well, progress. Though you can show anything with it - use it to show load on your server,
        or percentage space free on your servers disk drive. You could even incorporate it with some AJAX to retrieve status information
        from your webserver dynamically, making the Progress Bar realtime. To redraw the progress bar simply call <i>RGraph.Clear()</i>
        (which clears the canvas) and then call <i>myProgress.Draw()</i> again.
    </p>
        
    <p>
        The colours, title and scale are configurable, allowing you to represent a wide range of values.
    </p>

    <div>
        <ul>
            <li><a href="../docs/progress.html">Progress bar API documentation</a></li>
        </ul>
    </div>

    <div style="float: left; width: 48%">
        <canvas width="450" height="75" id="progress1">[No canvas support]</canvas>
        <canvas width="450" height="75" id="progress2">[No canvas support]</canvas>
    </div>

    <div style="float: right; width: 48%">
        <canvas width="100" height="370" id="progress3">[No canvas support]</canvas>
        <canvas width="100" height="370" id="progress4">[No canvas support]</canvas>
        <canvas width="100" height="370" id="progress5">[No canvas support]</canvas>
    </div>

</body>
</html>