RGraph/examples/vprogress.html

   1 <?php ob_start('ob_gzhandler') ?>
   2 <!DOCTYPE html>
   3 <html>
   4 <head>
   5     <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6     <!--
   7         /**
   8         * o------------------------------------------------------------------------------o
   9         * | This file is part of the RGraph package - you can learn more at:             |
  10         * |                                                                              |
  11         * |                          http://www.rgraph.net                               |
  12         * |                                                                              |
  13         * | This package is licensed under the RGraph license. For all kinds of business |
  14         * | purposes there is a small one-time licensing fee to pay and for non          |
  15         * | commercial  purposes it is free to use. You can read the full license here:  |
  16         * |                                                                              |
  17         * |                      http://www.rgraph.net/LICENSE.txt                       |
  18         * o------------------------------------------------------------------------------o
  19         */
  20     -->
  21     <title>RGraph: HTML5 canvas graph library - vertical progress bar</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas example vertical progress bar" />
  24     <meta name="description" content="RGraph: Vertical Progress Bar example" />
  25
  26     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  27     <link rel="icon" type="image/png" href="../images/favicon.png">
  28
  29     <script src="../libraries/RGraph.common.core.js"></script>
  30     <script src="../libraries/RGraph.common.context.js" ></script>
  31     <script src="../libraries/RGraph.common.annotate.js" ></script>
  32     <script src="../libraries/RGraph.common.tooltips.js" ></script>
  33     <script src="../libraries/RGraph.common.zoom.js" ></script>
  34     <script src="../libraries/RGraph.common.resizing.js" ></script>
  35     <script src="../libraries/RGraph.vprogress.js"></script>
  36     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  37
  38     <script>
  39         window.onload = function ()
  40         {
  41             var progress1 = new RGraph.VProgress('progress1', 63, 100);
  42             progress1.Set('chart.tickmarks', false);
  43             progress1.Set('chart.annotatable', true);
  44             progress1.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom], ['Show the palette', RGraph.Showpalette], ['Clear', function () {RGraph.Clear(progress1.canvas, '#fff'); progress1.Draw();}]]);
  45             progress1.Set('chart.margin', 3);
  46             progress1.Set('chart.tickmarks.inner', true);
  47             progress1.Set('chart.label.inner', true);
  48             progress1.Set('chart.gutter', 30);
  49             progress1.Set('chart.units.post', '%');
  50
  51             progress1.Draw();
  52
  53             var progress2 = new RGraph.VProgress('progress2', [6.5, 1, 2], 10);
  54             progress2.Set('chart.colors', ['red', '#cfc', 'blue']);
  55             progress2.Set('chart.shadow', true);
  56             progress2.Set('chart.shadow.color', '#666');
  57             progress2.Set('chart.shadow.offsetx', 0);
  58             progress2.Set('chart.shadow.offsety', 0);
  59             progress2.Set('chart.shadow.blur', 15);
  60             progress2.Set('chart.margin', 3);
  61             progress2.Set('chart.tooltips', ['John', 'Fred', 'Pete']);
  62             progress2.Set('chart.tooltips.effect', 'contract');
  63             progress2.Set('chart.tickmarks', true);
  64             progress2.Set('chart.tickmarks.inner', true);
  65             progress2.Set('chart.tickmarks.color', '#333');
  66             progress2.Draw();
  67         }
  68     </script>
  69 </head>
  70 <body>
  71
  72     <!-- Social networking buttons -->
  73
  74     <script>
  75         function HideTwitterDIV ()
  76         {
  77             document.getElementById("twitter_div").style.opacity = 0;
  78             document.getElementById("twitter_div").style.display = 'none';
  79         }
  80
  81
  82         function ShowTwitterDIV (e)
  83         {
  84             var e   = RGraph.FixEventObject(document.all ? event : e);
  85             var div = document.getElementById("twitter_div");
  86             var img = document.getElementById("twitter_icon");
  87
  88             div.style.display = 'block';
  89             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  90             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  91
  92             /**
  93             * Fade it in
  94             */
  95             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  96             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  97             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  98             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  99             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
 100
 101             e.stopPropagation();
 102
 103             return false;
 104         }
 105
 106
 107         /**
 108         * This code installs the event handler that hides the Twitter DIV
 109         */
 110         if (RGraph.isIE8()) {
 111              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 112         } else {
 113             window.addEventListener('click', HideTwitterDIV, false);
 114         }
 115     </script>
 116
 117     <!-- The twitter DIV -->
 118     <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;">
 119         <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet&nbsp;about&nbsp;RGraph</a><br>
 120         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 121     </div>
 122
 123     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 124         <script>
 125             // Opera fix
 126             if (navigator.userAgent.indexOf('Opera') == -1) {
 127               document.getElementById("social_icons").style.position = 'fixed';
 128               document.getElementById("twitter_div").style.position = 'fixed';
 129
 130             }
 131         </script>
 132
 133         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 134
 135
 136             <div id="social">
 137                 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
 138                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 139                 </a>
 140
 141                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 142                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 143                 </a>
 144
 145
 146 <!--
 147                 <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
 148                     <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 149                 </a>
 150
 151
 152                 <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
 153                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 154                 </a>
 155
 156                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 157                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 158                 </a>
 159
 160                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 161                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 162                 </a>
 163 -->
 164             </div>
 165     </div>
 166     <!-- /Social networking buttons -->
 167
 168
 169 <div id="breadcrumb">
 170     <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 171     >
 172     <a href="./index.html">Examples</a>
 173     >
 174     Vertical Progress bar
 175 </div>
 176
 177     <h1>RGraph: HTML5 canvas graph library - Vertical Progress bar</h1>
 178
 179     <script>
 180         if (RGraph.isIE8()) {
 181             document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, 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> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
 182         }
 183     </script>
 184
 185     <p>
 186         This is a Progress Bar for showing state. You can show anything with it - use it to show load on your server,
 187         or percentage space free on your servers disk drive. You could even incorporate it with some AJAX to retrieve status information
 188         from your webserver dynamically, making the Progress Bar realtime. To redraw the progress bar simply call <i>RGraph.Clear()</i>
 189         (which clears the canvas) and then call <i>myProgress.Draw()</i> again.
 190     </p>
 191
 192     <p>
 193         The colours, title and scale are configurable, allowing you to represent a wide range of values.
 194     </p>
 195
 196     <div>
 197         <ul>
 198             <li><a href="../docs/vprogress.html">Vertical Progress bar API documentation</a></li>
 199             <li><a href="hprogress.html">Horizontal Progress bar</a></li>
 200         </ul>
 201     </div>
 202
 203     <div>
 204         <canvas width="125" height="450" id="progress1">[No canvas support]</canvas>
 205         <canvas width="125" height="450" id="progress2">[No canvas support]</canvas>
 206     </div>
 207
 208 </body>
 209 </html>