RGraph/examples/pie.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 - pie chart</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas example pie chart" />
  24     <meta name="description" content="RGraph: Pie 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.annotate.js" ></script>
  31     <script src="../libraries/RGraph.common.context.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.pie.js" ></script>
  36     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  37
  38     <script>
  39         window.onload = function ()
  40         {
  41             /**
  42             * These are not angles - these are values. The appropriate angles are calculated
  43             */
  44             var pie1 = new RGraph.Pie('pie1', [41,37,16,3,3]); // Create the pie object
  45             pie1.Set('chart.labels', ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)']);
  46             pie1.Set('chart.gutter', 30);
  47             pie1.Set('chart.title', "Browsers (tooltips, context, zoom)");
  48             pie1.Set('chart.shadow', false);
  49             pie1.Set('chart.tooltips.effect', 'fade');
  50             pie1.Set('chart.tooltips.event', 'onmousemove');
  51             pie1.Set('chart.tooltips', [
  52                                         'Internet Explorer 7 (41%)',
  53                                         'Internet Explorer 6 (37%)',
  54                                         'Mozilla Firefox (16%)',
  55                                         'Apple Safari (3%)',
  56                                         'Other (3%)'
  57                                        ]
  58                                       );
  59             pie1.Set('chart.highlight.style', '3d'); // Defaults to 3d anyway; can be 2d or 3d
  60
  61             if (!RGraph.isIE8()) {
  62                 pie1.Set('chart.zoom.hdir', 'center');
  63                 pie1.Set('chart.zoom.vdir', 'up');
  64                 pie1.Set('chart.labels.sticks', true);
  65                 pie1.Set('chart.labels.sticks.color', '#aaa');
  66                 pie1.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom]]);
  67             }
  68
  69             pie1.Set('chart.linewidth', 5);
  70             pie1.Set('chart.labels.sticks', true);
  71             pie1.Set('chart.strokestyle', 'white');
  72             pie1.Draw();
  73
  74             var pie2 = new RGraph.Pie('pie2', [2,29,45,17,7]); // Create the pie object
  75             pie2.Set('chart.gutter', 45);
  76             pie2.Set('chart.title', "Some data (context, annotatable)");
  77             pie2.Set('chart.linewidth', 1);
  78             pie2.Set('chart.strokestyle', '#333');
  79             pie2.Set('chart.shadow', true);
  80             pie2.Set('chart.shadow.blur', 3);
  81             pie2.Set('chart.shadow.offsetx', 3);
  82             pie2.Set('chart.shadow.offsety', 3);
  83             pie2.Set('chart.shadow.color', 'rgba(0,0,0,0.5)');
  84             pie2.Set('chart.colors', ['red', 'pink', '#6f6', 'blue', 'yellow']);
  85             pie2.Set('chart.contextmenu', [['Clear', function () {RGraph.Clear(pie2.canvas); pie2.Draw();}]]);
  86             pie2.Set('chart.key', ['John (2%)', 'Richard (29%)', 'Fred (45%)', 'Brian (17%)', 'Peter (7%)']);
  87             pie2.Set('chart.key.background', 'white');
  88             pie2.Set('chart.key.shadow', true);
  89             pie2.Set('chart.annotatable', true);
  90             pie2.Set('chart.align', 'left');
  91             pie2.Draw();
  92         }
  93     </script>
  94 </head>
  95 <body>
  96
  97     <!-- Social networking buttons -->
  98
  99     <script>
 100         function HideTwitterDIV ()
 101         {
 102             document.getElementById("twitter_div").style.opacity = 0;
 103             document.getElementById("twitter_div").style.display = 'none';
 104         }
 105
 106
 107         function ShowTwitterDIV (e)
 108         {
 109             var e   = RGraph.FixEventObject(document.all ? event : e);
 110             var div = document.getElementById("twitter_div");
 111             var img = document.getElementById("twitter_icon");
 112
 113             div.style.display = 'block';
 114             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
 115             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
 116
 117             /**
 118             * Fade it in
 119             */
 120             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
 121             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
 122             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
 123             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
 124             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
 125
 126             e.stopPropagation();
 127
 128             return false;
 129         }
 130
 131         /**
 132         * This code installs the event handler that hides the Twitter DIV
 133         */
 134         if (RGraph.isIE8()) {
 135              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 136         } else {
 137             window.addEventListener('click', HideTwitterDIV, false);
 138         }
 139     </script>
 140
 141     <!-- The twitter DIV -->
 142     <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;">
 143         <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>
 144         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 145     </div>
 146
 147     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 148         <script>
 149             // Opera fix
 150             if (navigator.userAgent.indexOf('Opera') == -1) {
 151               document.getElementById("social_icons").style.position = 'fixed';
 152               document.getElementById("twitter_div").style.position = 'fixed';
 153
 154             }
 155         </script>
 156
 157         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 158
 159
 160             <div id="social">
 161                 <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">
 162                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 163                 </a>
 164
 165                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 166                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 167                 </a>
 168
 169
 170 <!--
 171                 <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">
 172                     <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"/>
 173                 </a>
 174
 175
 176                 <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">
 177                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 178                 </a>
 179
 180                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 181                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 182                 </a>
 183
 184                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 185                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 186                 </a>
 187 -->
 188             </div>
 189     </div>
 190     <!-- /Social networking buttons -->
 191
 192
 193 <div id="breadcrumb">
 194     <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 195     >
 196     <a href="./index.html">Examples</a>
 197     >
 198     Pie chart
 199 </div>
 200
 201     <h1>RGraph: HTML5 canvas graph library - Pie chart</h1>
 202
 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     <div>
 210
 211         <p>
 212             The Pie chart can be used when you need to represent value as part of a whole. It is commonly used to represent percentages,
 213             relative magnitudes or relative frequencies. If your intent is to compare a particular value (slice) against the whole of
 214             the Pie chart, then it can be quite effective. If however you want to compare two seperate segments, then it can get
 215             more difficult. If this is the case, you may want to consider a bar chart for example.
 216         </p>
 217
 218         <p>
 219             The colours can of course be customised, as can the borders (using the same color as the background and a line width of
 220             about 5 gives the effect of segment separation. The chart can also have a drop shadow if you want one, but this shouldn't
 221             be used in conjunction with segment seperation.
 222         </p>
 223
 224         <p>
 225             The first pie chart has a fade-in effect. This not part of the RGraph library but is very easy to implement.
 226         </p>
 227     </div>
 228
 229     <div>
 230         <ul>
 231             <li><a href="../docs/pie.html">Pie chart API documentation</a></li>
 232         </ul>
 233     </div>
 234
 235     <div style="text-align: center">
 236         <canvas id="pie1" width="420" height="300">[No canvas support]</canvas>
 237         <canvas id="pie2" width="440" height="300">[No canvas support]</canvas>
 238     </div>
 239
 240 </body>
 241 </html>