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
22 <title>RGraph: HTML5 canvas graph library - Traditional radar chart</title>
24 <meta name="keywords" content="rgraph html5 canvas example tradar radar chart" />
25 <meta name="description" content="RGraph: Traditional radar chart" />
27 <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
28 <link rel="icon" type="image/png" href="../images/favicon.png">
30 <script src="../libraries/RGraph.common.core.js" ></script>
31 <script src="../libraries/RGraph.common.context.js" ></script>
32 <script src="../libraries/RGraph.common.annotate.js" ></script>
33 <script src="../libraries/RGraph.common.tooltips.js" ></script>
34 <script src="../libraries/RGraph.common.zoom.js" ></script>
35 <script src="../libraries/RGraph.tradar.js" ></script>
36 <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
39 window.onload = function ()
47 function ShowGraph1 ()
49 var tradar5 = new RGraph.Tradar('tradar5', [43,84,54,64,34,21,21]);
50 tradar5.Set('chart.labels.axes', 'n');
51 tradar5.Set('chart.circle', 50);
52 tradar5.Set('chart.circle.fill', 'rgba(0, 0, 255, 0.3)');
53 tradar5.Set('chart.tooltips', ['Dave (43)', 'John (84)', 'Kiffen (54)', 'Peter (64)', 'Lou (34)', 'Igor (21)', 'John (21)']);
54 tradar5.Set('chart.tooltips.effect', 'fade');
55 tradar5.Set('chart.title', 'The results of the competition (tooltips)');
56 tradar5.Set('chart.labels', ['Dave (43)', 'John (84)', 'Kiffen (54)', 'Peter (64)', 'Lou (34)', 'Igor (21)', 'John (21)']);
60 function ShowGraph2 ()
62 var tradar = new RGraph.Tradar('tradar1', [3,3,41,37,16]);
63 tradar.Set('chart.background.circles', true);
64 tradar.Set('chart.color', 'rgba(255,0,0,0.3)');
65 tradar.Set('chart.circle.fill', 'rgba(200,255,200,0.9)');
66 tradar.Set('chart.labels', ['Safari (3%)', 'Other (3%)', 'MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)']);
67 tradar.Set('chart.title', "Browser share (annotatable, context, zoom)" );
68 tradar.Set('chart.linewidth', 1);
69 tradar.Set('chart.labels.axes', 'n');
71 if (!RGraph.isIE8()) {
72 tradar.Set('chart.zoom.vdir', 'up');
73 tradar.Set('chart.contextmenu', [
74 ['Zoom in', RGraph.Zoom],
75 ['Clear', function () {RGraph.Clear(tradar.canvas); tradar.Draw()}],
76 ['Show PNG', RGraph.showPNG]
78 tradar.Set('chart.annotatable', true);
87 <!-- Social networking buttons -->
90 function HideTwitterDIV ()
92 document.getElementById("twitter_div").style.opacity = 0;
93 document.getElementById("twitter_div").style.display = 'none';
97 function ShowTwitterDIV (e)
99 var e = RGraph.FixEventObject(document.all ? event : e);
100 var div = document.getElementById("twitter_div");
101 var img = document.getElementById("twitter_icon");
103 div.style.display = 'block';
104 div.style.left = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
105 div.style.top = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
110 setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
111 setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
112 setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
113 setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
114 setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
123 * This code installs the event handler that hides the Twitter DIV
125 if (RGraph.isIE8()) {
126 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
128 window.addEventListener('click', HideTwitterDIV, false);
132 <!-- The twitter DIV -->
133 <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;">
134 <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>
135 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
138 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
141 if (navigator.userAgent.indexOf('Opera') == -1) {
142 document.getElementById("social_icons").style.position = 'fixed';
143 document.getElementById("twitter_div").style.position = 'fixed';
148 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
152 <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">
153 <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
156 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
157 <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
162 <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">
163 <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"/>
167 <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">
168 <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
171 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
172 <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
175 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
176 <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
181 <!-- /Social networking buttons -->
184 <div id="breadcrumb">
185 <a href="../index.html">RGraph: HTML5 canvas graph library</a>
187 <a href="./index.html">Examples</a>
189 Traditional radar chart
192 <h1>RGraph: HTML5 canvas graph library - Traditional radar chart</h1>
195 if (RGraph.isIE8()) {
196 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>');
200 <div style="float: right; width: 450px">
204 A traditional radar chart, that is similar to the Rose chart. Each of the data points is
205 arranged equally in terms of angle, whilst the magnitude of each point is shown by the distance from the centre. Thus,
206 data points of a higher magnitude can be seen as they are more distant from the centre.
210 Suitable for many datasets, but not all. If not, then the Rose chart may be more apt.
214 The circle, as can be seen in the second example, could be used to indicate a threshold of sorts. In the example,
215 it could be minimum sales required for a particular month. Months that fall below this threshold can be clearly seen.
220 <li><a href="../docs/tradar.html">Traditional radar chart API documentation</a></li>
221 <li><a href="rose.html">Rose chart example</a></li>
225 <div style="position: relative">
226 <canvas id="tradar1" width="450" height="350" style="float: left">[No canvas support]</canvas>
227 <span onclick="RGraph.showPNG(document.getElementById('tradar1'), event)" style="position: absolute; left: 350px; top: 30px; border: 1px black solid; padding: 1px; background-color: #eee; cursor: pointer">Get PNG</span>
228 <canvas id="tradar5" width="475" height="350" style="float: right">[No canvas support]</canvas>
232 if (!RGraph.isIE8()) {