RGraph/examples/odo.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 - odometer</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas example odometer chart" />
  24     <meta name="description" content="RGraph: Odometer chart 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.zoom.js" ></script>
  33     <script src="../libraries/RGraph.odo.js" ></script>
  34     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  35
  36     <script>
  37         window.onload = function ()
  38         {
  39             // ID, MINIMUM, MAXIMUM, INDICATED VALUE
  40             var odo1 = new RGraph.Odometer('odo1', 0, 12,9.5);
  41             odo1.Set('chart.labels', ['12', '1','2','3','4','5','6','7','8','9','10','11']);
  42             odo1.Set('chart.needle.thickness', 5);
  43             odo1.Set('chart.needle.color', 'black');
  44             odo1.Set('chart.needle.extra', [[30, 'black']]);
  45             odo1.Set('chart.needle.head', false);
  46             odo1.Set('chart.title', 'A clock-esque odometer (zoom)');
  47             odo1.Set('chart.label.area', 40);
  48             odo1.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom],['Cancel', function () {}]]);
  49             odo1.Set('chart.shadow.outer', true);
  50             odo1.Set('chart.needle.tail', false);
  51             odo1.Set('chart.zoom.vdir', 'up');
  52
  53             odo1.Set('chart.green.color', 'gray');
  54             odo1.Set('chart.yellow.color', 'gray');
  55             odo1.Set('chart.red.color', 'gray');
  56
  57             RGraph.AddCustomEventListener(odo1, 'ondraw',
  58             function (obj)
  59             {
  60                 var context = obj.context;
  61                 context.strokeStyle = 'black';
  62                 context.fillStyle = 'white';
  63                 context.beginPath();
  64                     context.moveTo(obj.centerx, obj.centery);
  65                     context.arc(obj.centerx, obj.centery, 10, 0, 6.28, 0);
  66                 context.stroke();
  67                 context.fill();
  68             }
  69             );
  70
  71             odo1.Draw();
  72
  73             // ID, MINIMUM, MAXIMUM, INDICATED VALUE
  74             var odo2 = new RGraph.Odometer('odo2', 0, 360, 56);
  75             odo2.Set('chart.annotatable', true);
  76             //odo2.Set('chart.needle.thickness', 6);
  77             odo2.Set('chart.needle.color', 'black');
  78             odo2.Set('chart.needle.tail', false);
  79             //odo2.Set('chart.needle.type', 'triangle');
  80             odo2.Set('chart.label.area', 35);
  81             odo2.Set('chart.contextmenu', [['Clear', function () {RGraph.Clear(odo2.canvas); odo2.Draw();}]]);
  82             odo2.Set('chart.border', document.all ? false : true);
  83             odo2.Set('chart.title', 'A bordered compas');
  84             //odo2.Set('chart.tickmarks.highlighted', true);
  85             odo2.Set('chart.labels', ['N','NE','E','SE','S','SW','W','NW']);
  86             odo2.Set('chart.red.min', 360);
  87             odo2.Set('chart.red.color', 'gray');
  88             odo2.Set('chart.value.text', true);
  89             odo2.Set('chart.value.units.post', ' degrees');
  90             odo2.Draw();
  91
  92
  93             var odo3 = new RGraph.Odometer('odo3',0, 200, 160);
  94             odo3.Set('chart.green.max', 150);
  95             odo3.Set('chart.red.min', 175);
  96             odo3.Set('chart.title', 'An odometer');
  97             odo3.Set('chart.shadow.inner', true);
  98             odo3.Set('chart.value.text', true);
  99             odo3.Set('chart.value.units.post', ' litres');
 100             odo3.Draw();
 101         }
 102     </script>
 103 </head>
 104 <body>
 105
 106     <!-- Social networking buttons -->
 107
 108     <script>
 109         function HideTwitterDIV ()
 110         {
 111             document.getElementById("twitter_div").style.opacity = 0;
 112             document.getElementById("twitter_div").style.display = 'none';
 113         }
 114
 115
 116         function ShowTwitterDIV (e)
 117         {
 118             var e   = RGraph.FixEventObject(document.all ? event : e);
 119             var div = document.getElementById("twitter_div");
 120             var img = document.getElementById("twitter_icon");
 121
 122             div.style.display = 'block';
 123             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
 124             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
 125
 126             /**
 127             * Fade it in
 128             */
 129             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
 130             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
 131             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
 132             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
 133             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
 134
 135             e.stopPropagation();
 136
 137             return false;
 138         }
 139
 140         /**
 141         * This code installs the event handler that hides the Twitter DIV
 142         */
 143         if (RGraph.isIE8()) {
 144              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 145         } else {
 146             window.addEventListener('click', HideTwitterDIV, false);
 147         }
 148     </script>
 149
 150     <!-- The twitter DIV -->
 151     <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;">
 152         <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>
 153         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 154     </div>
 155
 156     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 157         <script>
 158             // Opera fix
 159             if (navigator.userAgent.indexOf('Opera') == -1) {
 160               document.getElementById("social_icons").style.position = 'fixed';
 161               document.getElementById("twitter_div").style.position = 'fixed';
 162
 163             }
 164         </script>
 165
 166         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 167
 168
 169             <div id="social">
 170                 <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">
 171                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 172                 </a>
 173
 174                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 175                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 176                 </a>
 177
 178
 179 <!--
 180                 <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">
 181                     <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"/>
 182                 </a>
 183
 184
 185                 <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">
 186                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 187                 </a>
 188
 189                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 190                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 191                 </a>
 192
 193                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 194                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 195                 </a>
 196 -->
 197             </div>
 198     </div>
 199     <!-- /Social networking buttons -->
 200
 201
 202 <h1>RGraph: HTML5 canvas graph library - Odometer</h1>
 203     <script>
 204         if (RGraph.isIE8()) {
 205             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>');
 206         }
 207     </script>
 208
 209
 210     <div id="breadcrumb">
 211         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 212         >
 213         <a href="./index.html">Examples</a>
 214         >
 215         Odometer
 216     </div>
 217
 218     <div>
 219         <p>
 220             The Odometer can be used to provide an indication of a particular value. For example you could easily use it to
 221             represent values for a control panel that shows information about a server. An Odometer indicating how much disk
 222             space is used for example, would be more visual than a simple number.
 223         </p>
 224
 225         <p>
 226             The green, yellow and red areas are configurable, allowing you to add some level of urgency into your figures. The
 227             figures are also configurable, so it can go from 0-10, or from 0-100.
 228         </p>
 229     </div>
 230
 231     <div>
 232         <ul>
 233             <li><a href="../docs/odo.html">Odometer API documentation</a></li>
 234         </ul>
 235     </div>
 236
 237     <canvas id="odo1" width="300" height="300"><div class="canvasfallback">[No canvas support]</div></canvas>
 238     <canvas id="odo2" width="300" height="300"><div class="canvasfallback">[No canvas support]</div></canvas>
 239     <canvas id="odo3" width="300" height="300"><div class="canvasfallback">[No canvas support]</div></canvas>
 240 </body>
 241 </html>