RGraph/examples/tradar.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
  22     <title>RGraph: HTML5 canvas graph library - Traditional radar chart</title>
  23
  24     <meta name="keywords" content="rgraph html5 canvas example tradar radar chart" />
  25     <meta name="description" content="RGraph: Traditional radar chart" />
  26
  27     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  28     <link rel="icon" type="image/png" href="../images/favicon.png">
  29
  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]-->
  37
  38     <script>
  39         window.onload = function ()
  40         {
  41             if (RGraph.isIE8()) {
  42                 ShowGraph1();
  43                 ShowGraph2();
  44             }
  45         }
  46
  47         function ShowGraph1 ()
  48         {
  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)']);
  57             tradar5.Draw();
  58         }
  59
  60         function ShowGraph2 ()
  61         {
  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');
  70
  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]
  77                                                 ]);
  78                 tradar.Set('chart.annotatable', true);
  79             }
  80
  81             tradar.Draw();
  82         }
  83     </script>
  84 </head>
  85 <body>
  86
  87     <!-- Social networking buttons -->
  88
  89     <script>
  90         function HideTwitterDIV ()
  91         {
  92             document.getElementById("twitter_div").style.opacity = 0;
  93             document.getElementById("twitter_div").style.display = 'none';
  94         }
  95
  96
  97         function ShowTwitterDIV (e)
  98         {
  99             var e   = RGraph.FixEventObject(document.all ? event : e);
 100             var div = document.getElementById("twitter_div");
 101             var img = document.getElementById("twitter_icon");
 102
 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';
 106
 107             /**
 108             * Fade it in
 109             */
 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);
 115
 116             e.stopPropagation();
 117
 118             return false;
 119         }
 120
 121
 122         /**
 123         * This code installs the event handler that hides the Twitter DIV
 124         */
 125         if (RGraph.isIE8()) {
 126              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 127         } else {
 128             window.addEventListener('click', HideTwitterDIV, false);
 129         }
 130     </script>
 131
 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&nbsp;about&nbsp;RGraph</a><br>
 135         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 136     </div>
 137
 138     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 139         <script>
 140             // Opera fix
 141             if (navigator.userAgent.indexOf('Opera') == -1) {
 142               document.getElementById("social_icons").style.position = 'fixed';
 143               document.getElementById("twitter_div").style.position = 'fixed';
 144
 145             }
 146         </script>
 147
 148         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 149
 150
 151             <div id="social">
 152                 <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">
 153                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 154                 </a>
 155
 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" />
 158                 </a>
 159
 160
 161 <!--
 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"/>
 164                 </a>
 165
 166
 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"/>
 169                 </a>
 170
 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" />
 173                 </a>
 174
 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" />
 177                 </a>
 178 -->
 179             </div>
 180     </div>
 181     <!-- /Social networking buttons -->
 182
 183
 184 <div id="breadcrumb">
 185     <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 186     >
 187     <a href="./index.html">Examples</a>
 188     >
 189     Traditional radar chart
 190 </div>
 191
 192 <h1>RGraph: HTML5 canvas graph library - Traditional radar chart</h1>
 193
 194     <script>
 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>');
 197         }
 198     </script>
 199
 200     <div style="float: right; width: 450px">
 201     </div>
 202
 203     <p>
 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.
 207     </p>
 208
 209     <p>
 210         Suitable for many datasets, but not all. If not, then the Rose chart may be more apt.
 211     </p>
 212
 213     <p>
 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.
 216     </p>
 217
 218     <div>
 219         <ul>
 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>
 222         </ul>
 223     </div>
 224
 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>
 229     </div>
 230
 231     <script>
 232         if (!RGraph.isIE8()) {
 233             ShowGraph1();
 234             ShowGraph2();
 235         }
 236     </script>
 237
 238
 239 </body>
 240 </html>