RGraph/examples/bar.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         /**
   9         * o------------------------------------------------------------------------------o
  10         * | This file is part of the RGraph package - you can learn more at:             |
  11         * |                                                                              |
  12         * |                          http://www.rgraph.net                               |
  13         * |                                                                              |
  14         * | This package is licensed under the RGraph license. For all kinds of business |
  15         * | purposes there is a small one-time licensing fee to pay and for non          |
  16         * | commercial  purposes it is free to use. You can read the full license here:  |
  17         * |                                                                              |
  18         * |                      http://www.rgraph.net/LICENSE.txt                       |
  19         * o------------------------------------------------------------------------------o
  20         */
  21     -->
  22     <title>RGraph: HTML5 canvas graph library - bar chart</title>
  23
  24     <meta name="keywords" content="rgraph html5 canvas example bar chart" />
  25     <meta name="description" content="RGraph: Bar chart example" />
  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.annotate.js" ></script>
  32     <script src="../libraries/RGraph.common.context.js" ></script>
  33
  34     <script src="../libraries/RGraph.common.tooltips.js" ></script>
  35     <script src="../libraries/RGraph.common.resizing.js" ></script>
  36     <script src="../libraries/RGraph.bar.js" ></script>
  37     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  38
  39     <script>
  40         /**
  41         * These are the callback functions for the context menu
  42         */
  43         function Callback1()
  44         {
  45             alert('Menu item 1 selected!');
  46         }
  47
  48         function Callback2()
  49         {
  50             alert('Menu item 2 selected!');
  51         }
  52
  53
  54         /**
  55         * The onload function creates the graph
  56         */
  57         window.onload = function ()
  58         {
  59             var bar = new RGraph.Bar('bar1', [1.2, 1.3, 1.4, 1.5,6,1.9,2,2.1,2.5]);
  60             bar.Set('chart.units.pre', '$');
  61             bar.Set('chart.units.post', 'k');
  62             bar.Set('chart.title', 'A sketch bar chart (context, resizable)');
  63             bar.Set('chart.gutter', 35);
  64             bar.Set('chart.colors', ['rgb(255,0,0)']);
  65             bar.Set('chart.labels', ['John', 'Barry', 'Rich', 'Craig', 'Tom', 'Frank', 'Helen', 'Joyce', 'Fred'])
  66             bar.Set('chart.background.grid.hsize', 20);
  67             bar.Set('chart.background.grid.vsize', 20);
  68             bar.Set('chart.background.barcolor1', 'white');
  69             bar.Set('chart.background.barcolor2', 'white');
  70             bar.Set('chart.text.angle', 30);
  71             bar.Set('chart.contextmenu', [['A test!', function () {}], ['Get PNG', RGraph.showPNG]]);
  72             bar.Set('chart.labels.above', true);
  73
  74             if (!RGraph.isIE8()) {
  75                 bar.Set('chart.resizable', true);
  76             }
  77
  78             bar.Set('chart.variant', 'sketch');
  79             bar.Set('chart.linewidth', 2);
  80             bar.Set('chart.background.grid.autofit', true);
  81             bar.Set('chart.ylabels.count', 10);
  82
  83             RGraph.Clear(bar.canvas, 'white');
  84
  85             bar.Draw();
  86
  87
  88             var bar2 = new RGraph.Bar('bar2', [140, 150, 160, 150, 120, 150, 160, 140, 120, 160]);
  89             bar2.Set('chart.background.barcolor1', 'white');
  90             bar2.Set('chart.background.barcolor2', 'white');
  91             bar2.Set('chart.title', 'Sales last quarter (tooltips)');
  92             bar2.Set('chart.title.vpos', 0.6);
  93             bar2.Set('chart.labels', ['Fred', 'Rich', 'Alex','John','Nick', 'Doug', 'Jaz', 'Pat', 'Baz', 'Bob']);
  94             bar2.Set('chart.text.angle', 45);
  95             bar2.Set('chart.gutter', 35);
  96             bar2.Set('chart.shadow', true);
  97             bar2.Set('chart.shadow.blur', 15);
  98             bar2.Set('chart.shadow.color', '#ffa0a0');
  99             bar2.Set('chart.shadow.offsetx', 0);
 100             bar2.Set('chart.shadow.offsety', 0);
 101             bar2.Set('chart.colors', ['#FF6060']);
 102             bar2.Set('chart.key.position', 'gutter');
 103             bar2.Set('chart.text.size', 10);
 104             bar2.Set('chart.text.font', 'Georgia');
 105             bar2.Set('chart.text.angle', 45);
 106             bar2.Set('chart.grouping', 'stacked');
 107
 108             if (!RGraph.isIE8()) {
 109                 bar2.Set('chart.tooltips', ['Fred', 'Rich', 'Alex','John','Nick', 'Doug', 'Jaz', 'Pat', 'Baz', 'Bob']);
 110             }
 111
 112             bar2.Draw();
 113
 114             var bar4 = new RGraph.Bar('bar4', [
 115                                         [0.000092, 0.00008],
 116                                         [0.000034, 0.000057],
 117                                         [0.000056, 0.000062],
 118                                         [0.000055, 0.000045],
 119                                         [0.000036, 0.000012],
 120                                         [0.000044, 0.000056],
 121                                         [0.000051, 0.000066],
 122                                         [0.000068, 0.000088]]);
 123             bar4.Set('chart.title', 'A grouped bar chart (small values)');
 124             bar4.Set('chart.background.barcolor1', 'white');
 125             bar4.Set('chart.background.barcolor2', 'white');
 126             bar4.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th']);
 127             bar4.Set('chart.key', ['John', 'Bob']);
 128             bar4.Set('chart.key.position', 'graph');
 129             bar4.Set('chart.key.shadow', true);
 130             bar4.Set('chart.key.background', 'rgb(255,255,255)');
 131             bar4.Set('chart.colors', ['#77f', '#7f7']);
 132             bar4.Set('chart.shadow', true);
 133             bar4.Set('chart.shadow.offsety', -3);
 134             bar4.Set('chart.shadow.color', '#aaa');
 135             bar4.Set('chart.yaxispos', 'right');
 136             bar4.Set('chart.labels.ingraph', [9,'The lowest']);
 137             bar4.Set('chart.strokestyle', 'rgba(0,0,0,0)');
 138             bar4.context.translate(-20,0);
 139             bar4.Draw();
 140
 141             var bar5 = new RGraph.Bar('bar5', [[30,20,19,21], [23,25, 27, 30], [30,25,29, 32], [27,28,35,33], [26,18,29,30], [31,20,25,27], [39,28,28,35], [27,29,28,29], [26,23,26,27], [30,20,19,21], [30,20,19,21], [30,20,19,21]]);
 142             bar5.Set('chart.units.pre', '$');
 143             bar5.Set('chart.title', 'Sales in the last 8 months (tooltips)');
 144             bar5.Set('chart.colors', ['red', 'yellow', 'green', 'orange']);
 145             bar5.Set('chart.gutter', 40);
 146             bar5.Set('chart.shadow', true);
 147             bar5.Set('chart.shadow.color', '#aaa');
 148             bar5.Set('chart.background.barcolor1', 'white');
 149             bar5.Set('chart.background.barcolor2', 'white');
 150             bar5.Set('chart.background.grid.hsize', 5);
 151             bar5.Set('chart.background.grid.vsize', 5);
 152             bar5.Set('chart.grouping', 'stacked');
 153             bar5.Set('chart.labels', ['\r\nJan', 'Feb', '\r\nMar', 'Apr', '\r\nMay', 'Jun', '\r\nJul', 'Aug', '\r\nSep','Oct','\r\nNov','Dec']);
 154             bar5.Set('chart.labels.above', true);
 155
 156             bar5.Set('chart.key', ['Richard', 'Barbara', 'Johnny', 'Frederick']);
 157             bar5.Set('chart.key.background', 'rgba(255,255,255,0.7)');
 158             bar5.Set('chart.key.position', 'gutter');
 159             bar5.Set('chart.key.position.gutter.boxed', false);
 160             bar5.Set('chart.key.position.y', bar5.Get('chart.gutter') - 15);
 161             bar5.Set('chart.key.border', false);
 162
 163             bar5.Set('chart.background.grid.width', 0.3); // Decimals are permitted
 164             bar5.Set('chart.text.angle', 0);
 165             bar5.Set('chart.strokecolor', 'rgba(0,0,0,0)');
 166             bar5.Set('chart.tooltips.event', 'onmousemove');
 167
 168             if (!RGraph.isIE8()) {
 169                 bar5.Set('chart.tooltips', [
 170                                       'Richard', 'Barbara', 'Johnny', 'Frederick',
 171                                       'Richard', 'Barbara', 'Johnny', 'Frederick',
 172                                       'Richard', 'Barbara', 'Johnny', 'Frederick',
 173                                       'Richard', 'Barbara', 'Johnny', 'Frederick',
 174                                       'Richard', 'Barbara', 'Johnny', 'Frederick',
 175                                       'Richard', 'Barbara', 'Johnny', 'Frederick',
 176                                       'Richard', 'Barbara', 'Johnny', 'Frederick',
 177                                       'Richard', 'Barbara', 'Johnny', 'Frederick'
 178                                      ]);
 179             }
 180
 181             bar5.Draw();
 182
 183         }
 184     </script>
 185 </head>
 186 <body>
 187
 188     <!-- Social networking buttons -->
 189
 190     <script>
 191         function HideTwitterDIV ()
 192         {
 193             document.getElementById("twitter_div").style.opacity = 0;
 194             document.getElementById("twitter_div").style.display = 'none';
 195         }
 196
 197
 198         function ShowTwitterDIV (e)
 199         {
 200             var e   = RGraph.FixEventObject(document.all ? event : e);
 201             var div = document.getElementById("twitter_div");
 202             var img = document.getElementById("twitter_icon");
 203
 204             div.style.display = 'block';
 205             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
 206             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
 207
 208             /**
 209             * Fade it in
 210             */
 211             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
 212             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
 213             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
 214             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
 215             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
 216
 217             e.stopPropagation();
 218
 219             return false;
 220         }
 221
 222         /**
 223         * This code installs the event handler that hides the Twitter DIV
 224         */
 225         if (RGraph.isIE8()) {
 226              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 227         } else {
 228             window.addEventListener('click', HideTwitterDIV, false);
 229         }
 230     </script>
 231
 232     <!-- The twitter DIV -->
 233     <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;">
 234         <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>
 235         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 236     </div>
 237
 238     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 239         <script>
 240             // Opera fix
 241             if (navigator.userAgent.indexOf('Opera') == -1) {
 242               document.getElementById("social_icons").style.position = 'fixed';
 243               document.getElementById("twitter_div").style.position = 'fixed';
 244
 245             }
 246         </script>
 247
 248         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 249
 250
 251             <div id="social">
 252                 <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">
 253                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 254                 </a>
 255
 256                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 257                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 258                 </a>
 259
 260 <!--
 261                 <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">
 262                     <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"/>
 263                 </a>
 264
 265
 266                 <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">
 267                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 268                 </a>
 269
 270                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 271                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 272                 </a>
 273
 274                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 275                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 276                 </a>
 277 -->
 278             </div>
 279     </div>
 280     <!-- /Social networking buttons -->
 281
 282     <div id="breadcrumb">
 283         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 284         >
 285         <a href="./index.html">Examples</a>
 286         >
 287         Bar chart
 288     </div>
 289
 290     <h1>RGraph: HTML5 canvas graph library - Bar chart</h1>
 291
 292     <script>
 293         if (RGraph.isIE8()) {
 294             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>');
 295         }
 296     </script>
 297
 298     <div>
 299         <p>
 300             The bar chart is probably one of the most widely used of charts, and also one of the most versatile. It's defined as a chart with
 301             rectangular bars with lengths proportional to the values they represent. The bar chart can be used to represent two
 302             or more values. With grouped and stacked bar charts, you can visualise two or more sets of data. For example two years
 303             worth of sales figures. Doing this you will be able to easily see differences, for example a better year when it comes
 304             to sales. You can also show negative values by having the X axis in the center, like the examples shown. If you use a
 305             grouped or stacked bar chart, a key may be helpful to your users.
 306         </p>
 307
 308         <p>
 309             By using the tooltips feature, you can provide more detail about what a particular bar represents. The tooltips in
 310             <b>RGraph</b> can contain wide range of HTML, so you can use them to show photos or movies for example.
 311         </p>
 312
 313         <div>
 314             <ul>
 315                 <li><a href="../docs/bar.html">Bar chart API documentation</a></li>
 316             </ul>
 317         </div>
 318
 319         <div style="width: 950px">
 320             <div style="width: 450px; float: left">
 321                 <canvas id="bar1" width="450" height="200">[No canvas support]</canvas>
 322                 <canvas id="bar4" width="450" height="200" style="border: 1px dashed black">[No canvas support]</canvas>
 323             </div>
 324
 325             <div style="width: 450px; float: right">
 326                 <canvas id="bar2" width="450" height="200">[No canvas support]</canvas>
 327                 <canvas id="bar5" width="450" height="200">[No canvas support]</canvas>
 328             </div>
 329         </div>
 330     </div>
 331
 332 </body>
 333 </html>