1 <?php ob_start('ob_gzhandler') ?>
5 <meta http-equiv="X-UA-Compatible" content="chrome=1">
8 * o------------------------------------------------------------------------------o
9 * | This file is part of the RGraph package - you can learn more at: |
11 * | http://www.rgraph.net |
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: |
17 * | http://www.rgraph.net/LICENSE.txt |
18 * o------------------------------------------------------------------------------o
21 <title>RGraph: HTML5 canvas graph library - odometer</title>
23 <meta name="keywords" content="rgraph html5 canvas example odometer chart" />
24 <meta name="description" content="RGraph: Odometer chart example" />
26 <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
27 <link rel="icon" type="image/png" href="../images/favicon.png">
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]-->
37 window.onload = function ()
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');
53 odo1.Set('chart.green.color', 'gray');
54 odo1.Set('chart.yellow.color', 'gray');
55 odo1.Set('chart.red.color', 'gray');
57 RGraph.AddCustomEventListener(odo1, 'ondraw',
60 var context = obj.context;
61 context.strokeStyle = 'black';
62 context.fillStyle = 'white';
64 context.moveTo(obj.centerx, obj.centery);
65 context.arc(obj.centerx, obj.centery, 10, 0, 6.28, 0);
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');
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');
106 <!-- Social networking buttons -->
109 function HideTwitterDIV ()
111 document.getElementById("twitter_div").style.opacity = 0;
112 document.getElementById("twitter_div").style.display = 'none';
116 function ShowTwitterDIV (e)
118 var e = RGraph.FixEventObject(document.all ? event : e);
119 var div = document.getElementById("twitter_div");
120 var img = document.getElementById("twitter_icon");
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';
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);
141 * This code installs the event handler that hides the Twitter DIV
143 if (RGraph.isIE8()) {
144 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
146 window.addEventListener('click', HideTwitterDIV, false);
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 about RGraph</a><br>
153 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
156 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
159 if (navigator.userAgent.indexOf('Opera') == -1) {
160 document.getElementById("social_icons").style.position = 'fixed';
161 document.getElementById("twitter_div").style.position = 'fixed';
166 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
170 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=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" />
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" />
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"/>
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"/>
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" />
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" />
199 <!-- /Social networking buttons -->
202 <h1>RGraph: HTML5 canvas graph library - Odometer</h1>
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>');
210 <div id="breadcrumb">
211 <a href="../index.html">RGraph: HTML5 canvas graph library</a>
213 <a href="./index.html">Examples</a>
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.
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.
233 <li><a href="../docs/odo.html">Odometer API documentation</a></li>
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>