RGraph/examples/hbar.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 - horizontal bar chart</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas example horizontal bar chart" />
  24     <meta name="description" content="RGraph: Horizontal Bar 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.context.js" ></script>
  31     <script src="../libraries/RGraph.common.annotate.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.hbar.js" ></script>
  36     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  37
  38     <script>
  39         /**
  40         * The onload function creates the graph
  41         */
  42         window.onload = function ()
  43         {
  44             var hbar1 = new RGraph.HBar('hbar1', [1000,1000,3000,4000,4000,3600,2000,750,1000,2000,3000,5000]);
  45
  46             var grad = hbar1.context.createLinearGradient(0,0,450,0);
  47             grad.addColorStop(0, 'white');
  48             grad.addColorStop(1, 'red');
  49
  50             hbar1.Set('chart.labels', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
  51             hbar1.Set('chart.title', 'Results (annotatable, context, zoom)');
  52             hbar1.Set('chart.title.xaxis', 'Sales');
  53             hbar1.Set('chart.title.yaxis', 'Month');
  54             hbar1.Set('chart.colors', [grad]);
  55             hbar1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
  56             hbar1.Set('chart.units.pre', '$');
  57             hbar1.Set('chart.units.post', 'k');
  58             hbar1.Set('chart.background.barcolor1', 'white');
  59             hbar1.Set('chart.background.barcolor2', 'white');
  60             hbar1.Set('chart.background.grid.autofit', true);
  61             hbar1.Set('chart.vmargin', 2);
  62             hbar1.Set('chart.text.style', '#333');
  63
  64             if (!RGraph.isIE8()) {
  65                 hbar1.Set('chart.zoom.vdir', 'center');
  66                 hbar1.Set('chart.contextmenu', [['Get PNG', RGraph.showPNG], ['Zoom in', RGraph.Zoom], ['Clear', function () {RGraph.Clear(hbar1.canvas); hbar1.Draw();}]]);
  67                 hbar1.Set('chart.annotatable', true);
  68             }
  69
  70             hbar1.Set('chart.grouping', 'grouped');
  71             hbar1.Set('chart.gutter', 30);
  72             hbar1.Set('chart.labels.above', true);
  73
  74             var size = RGraph.getGutterSuggest(hbar1, hbar1.data) + 5;
  75             hbar1.Set('chart.gutter', size);
  76
  77             hbar1.Draw();
  78
  79             var hbar3 = new RGraph.HBar('hbar3', [[3,2,3], [3,4,5], [5,6,7], [7,8,6], [9,10,9], [10,15,3]]);
  80             hbar3.Set('chart.labels', ['Fred', 'Barney', 'Julia', 'Francis', 'Hoolio', 'Jemima']);
  81             hbar3.Set('chart.labels.above', true);
  82             hbar3.Set('chart.units.post', 'k');
  83             hbar3.Set('chart.units.pre', '$');
  84             hbar3.Set('chart.gutter', 40);
  85             hbar3.Set('chart.colors', ['green', 'red', '#ccf']);
  86             hbar3.Set('chart.shadow', false);
  87
  88             hbar3.Set('chart.key', ['Monday', 'Tuesday', 'Wednesday']);
  89             hbar3.Set('chart.key.shadow', true);
  90             hbar3.Set('chart.key.shadow.blur', 15);
  91             hbar3.Set('chart.key.shadow.offsetx', 0);
  92             hbar3.Set('chart.key.shadow.offsety', 0);
  93             hbar3.Set('chart.key.shadow.color', '#ccc');
  94
  95             hbar3.Set('chart.shadow', true);
  96             hbar3.Set('chart.shadow.offsety', 0);
  97             hbar3.Set('chart.shadow.offsetx', 0);
  98             hbar3.Set('chart.shadow.color', '#aaa');
  99             hbar3.Set('chart.shadow.blur', 10);
 100             hbar3.Set('chart.grouping', 'grouped');
 101             hbar3.Set('chart.title', 'Drinks consumed last week (tooltips)');
 102
 103             hbar3.Set('chart.tooltips', [
 104                                          'Fred on Monday', '...on Tuesday', '...on Wednesday',
 105                                          'Barney on Monday', '...on Tuesday', '...on Wednesday',
 106                                          'Julia on Monday', '...on Tuesday', '...on Wednesday',
 107                                          'Francis on Monday', '...on Tuesday', '...on Wednesday',
 108                                          'Hoolio on Monday', '...on Tuesday', '...on Wednesday',
 109                                          'Jemima on Monday', '...on Tuesday', '...on Wednesday'
 110                                         ]);
 111
 112             hbar3.Set('chart.strokestyle', 'rgba(0,0,0,0)');
 113             hbar3.Set('chart.background.grid.autofit', true);
 114             hbar3.Draw();
 115         }
 116     </script>
 117 </head>
 118 <body>
 119
 120     <!-- Social networking buttons -->
 121
 122     <script>
 123         function HideTwitterDIV ()
 124         {
 125             document.getElementById("twitter_div").style.opacity = 0;
 126             document.getElementById("twitter_div").style.display = 'none';
 127         }
 128
 129
 130         function ShowTwitterDIV (e)
 131         {
 132             var e   = RGraph.FixEventObject(document.all ? event : e);
 133             var div = document.getElementById("twitter_div");
 134             var img = document.getElementById("twitter_icon");
 135
 136             div.style.display = 'block';
 137             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
 138             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
 139
 140             /**
 141             * Fade it in
 142             */
 143             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
 144             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
 145             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
 146             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
 147             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
 148
 149             e.stopPropagation();
 150
 151             return false;
 152         }
 153
 154         /**
 155         * This code installs the event handler that hides the Twitter DIV
 156         */
 157         if (RGraph.isIE8()) {
 158              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 159         } else {
 160             window.addEventListener('click', HideTwitterDIV, false);
 161         }
 162     </script>
 163
 164     <!-- The twitter DIV -->
 165     <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;">
 166         <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>
 167         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 168     </div>
 169
 170     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 171         <script>
 172             // Opera fix
 173             if (navigator.userAgent.indexOf('Opera') == -1) {
 174               document.getElementById("social_icons").style.position = 'fixed';
 175               document.getElementById("twitter_div").style.position = 'fixed';
 176
 177             }
 178         </script>
 179
 180         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 181
 182
 183             <div id="social">
 184                 <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">
 185                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 186                 </a>
 187
 188                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 189                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 190                 </a>
 191
 192
 193 <!--
 194                 <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">
 195                     <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"/>
 196                 </a>
 197
 198
 199                 <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">
 200                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 201                 </a>
 202
 203                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 204                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 205                 </a>
 206
 207                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 208                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 209                 </a>
 210 -->
 211             </div>
 212     </div>
 213     <!-- /Social networking buttons -->
 214
 215     <div id="breadcrumb">
 216         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 217         >
 218         <a href="./index.html">Examples</a>
 219         >
 220         Horizontal Bar chart
 221     </div>
 222
 223
 224     <h1>RGraph: HTML5 canvas graph library - Horizontal bar chart</h1>
 225
 226     <script>
 227         if (RGraph.isIE8()) {
 228             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>');
 229         }
 230     </script>
 231
 232     <p>
 233         A horizontal bar chart can be useful when your labels are too big for a regular bar chart.
 234     </p>
 235
 236     <ul>
 237         <li><a href="../docs/hbar.html">The API documentation</a></li>
 238     </ul>
 239
 240     <canvas id="hbar1" width="450" height="400" style="border: 1px dashed gray">[No canvas support]</canvas>
 241     <canvas id="hbar3" width="450" height="400">[No canvas support]</canvas>
 242
 243 </body>
 244 </html>