RGraph/docs/bar.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <meta http-equiv="X-UA-Compatible" content="chrome=1">
   5     <!--
   6         /**
   7         * o------------------------------------------------------------------------------o
   8         * | This file is part of the RGraph package - you can learn more at:             |
   9         * |                                                                              |
  10         * |                          http://www.rgraph.net                               |
  11         * |                                                                              |
  12         * | This package is licensed under the RGraph license. For all kinds of business |
  13         * | purposes there is a small one-time licensing fee to pay and for non          |
  14         * | commercial  purposes it is free to use. You can read the full license here:  |
  15         * |                                                                              |
  16         * |                      http://www.rgraph.net/LICENSE.txt                       |
  17         * o------------------------------------------------------------------------------o
  18         */
  19     -->
  20     <title>RGraph: HTML5 canvas graph library - bar chart documentation</title>
  21
  22     <meta name="keywords" content="rgraph html5 canvas graph docs bar chart" />
  23     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about the Bar chart" />
  24
  25     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  26     <link rel="icon" type="image/png" href="../images/favicon.png">
  27 </head>
  28 <body>
  29
  30     <!-- Social networking buttons -->
  31     <script src="../libraries/RGraph.common.core.js" ></script>
  32
  33     <script>
  34         function HideTwitterDIV ()
  35         {
  36             document.getElementById("twitter_div").style.opacity = 0;
  37             document.getElementById("twitter_div").style.display = 'none';
  38         }
  39
  40
  41         function ShowTwitterDIV (e)
  42         {
  43             var e   = RGraph.FixEventObject(document.all ? event : e);
  44             var div = document.getElementById("twitter_div");
  45             var img = document.getElementById("twitter_icon");
  46
  47             div.style.display = 'block';
  48             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  49             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  50
  51             /**
  52             * Fade it in
  53             */
  54             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  55             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  56             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  57             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  58             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  59
  60             e.stopPropagation();
  61
  62             return false;
  63         }
  64
  65         /**
  66         * This code installs the event handler that hides the Twitter DIV
  67         */
  68         if (RGraph.isIE8()) {
  69              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  70         } else {
  71             window.addEventListener('click', HideTwitterDIV, false);
  72         }
  73     </script>
  74
  75     <!-- The twitter DIV -->
  76     <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;">
  77         <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>
  78         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  79     </div>
  80
  81     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
  82         <script>
  83             // Opera fix
  84             if (navigator.userAgent.indexOf('Opera') == -1) {
  85               document.getElementById("social_icons").style.position = 'fixed';
  86               document.getElementById("twitter_div").style.position = 'fixed';
  87
  88             }
  89         </script>
  90
  91         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
  92
  93
  94             <div id="social">
  95                 <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">
  96                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
  97                 </a>
  98
  99                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 100                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 101                 </a>
 102
 103
 104 <!--
 105                 <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">
 106                     <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"/>
 107                 </a>
 108
 109
 110                 <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">
 111                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 112                 </a>
 113
 114                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 115                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 116                 </a>
 117
 118                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 119                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 120                 </a>
 121 -->
 122             </div>
 123     </div>
 124     <!-- /Social networking buttons -->
 125
 126     <div id="breadcrumb">
 127         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 128         >
 129         <a href="index.html">Documentation</a>
 130         >
 131         Bar chart
 132     </div>
 133
 134     <h1>RGraph: HTML5 canvas graph library - Bar chart documentation</h1>
 135     <script>
 136         if (RGraph.isIE8()) {
 137             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>');
 138         }
 139     </script>
 140
 141     <p>
 142         The bar graph, along with the line chart, is probably the most configurable of all the charts available,
 143         simply because it's more common.
 144     </p>
 145
 146     <p>
 147         The example file is <a href="../examples/bar.html">here</a>.
 148     </p>
 149
 150     <ul>
 151         <li><a href="#available.properties">Properties</a></li>
 152         <li><a href="#available.methods">Methods</a></li>
 153     </ul>
 154
 155     <pre class="code">
 156 &lt;script&gt;
 157     window.onload = function ()
 158     {
 159         var data = [280,45,133,166,84,259,266,960,219,311];
 160
 161         var bar = new RGraph.Bar('myCanvas', data);
 162         bar.Set('chart.labels', ['Richard', 'Alex', 'Nick', 'Scott', 'Kjnell', 'Doug', 'Charles', 'Michelle', 'Mark', 'Alison']);
 163         bar.Set('chart.gutter', 45);
 164         bar.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
 165         bar.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
 166         bar.Set('chart.background.grid', true);
 167         bar.Set('chart.colors', ['rgba(255,0,0,1)']);
 168         bar.Draw();
 169     }
 170 &lt;/script&gt;
 171 </pre>
 172
 173     <a name="available.properties"></a>
 174     <h2>Properties</h2>
 175
 176     <p>
 177         You can use these properties to control how the bar graph apears. You can set them by using the Set() method. Eg:
 178     </p>
 179
 180     <p>
 181         <b>myBar.Set('name', 'value');</b>
 182     </p>
 183
 184     <ul>
 185         <li><a href="#background">Background</a></li>
 186         <li><a href="#colors">Colors</a></li>
 187         <li><a href="#margins">Margins</a></li>
 188         <li><a href="#labels and text">Labels and text</a></li>
 189         <li><a href="#titles">Titles</a></li>
 190         <li><a href="#shadow">Shadow</a></li>
 191         <li><a href="#scale">Scale</a></li>
 192         <li><a href="#key">Key</a></li>
 193         <li><a href="#interactive features">Interactive features</a></li>
 194         <li><a href="#zoom">Zoom</a></li>
 195         <li><a href="#miscellaneous">Miscellaneous</a></li>
 196     </ul>
 197
 198
 199
 200 <a name="background"></a>
 201 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3>            <a name="chart.background.barcolor1"></a>
 202 <b>chart.background.barcolor1</b><br />
 203             The color of the background bars, (1 of 2). <br /><i>Default: white</i><br /><br />
 204             <a name="chart.background.barcolor2"></a>
 205 <b>chart.background.barcolor2</b><br />
 206             The color of the background bars, (2 of 2). <br /><i>Default: white</i><br /><br />
 207             <a name="chart.background.grid"></a>
 208 <b>chart.background.grid</b><br />
 209             Whether to show the background grid or not. <br /><i>Default: true</i><br /><br />
 210             <a name="chart.background.grid.color"></a>
 211 <b>chart.background.grid.color</b><br />
 212             The color of the background grid. <br /><i>Default: #ddd</i><br /><br />
 213             <a name="chart.background.grid.hsize"></a>
 214 <b>chart.background.grid.hsize</b><br />
 215             The horizontal background grid size. <br /><i>Default: 40</i><br /><br />
 216             <a name="chart.background.grid.vsize"></a>
 217 <b>chart.background.grid.vsize</b><br />
 218             The vertical background grid size. <br /><i>Default: 18</i><br /><br />
 219             <a name="chart.background.grid.width"></a>
 220 <b>chart.background.grid.width</b><br />
 221             The width that the background grid lines are. Decimals (eg 0.5) are permitted.<br /><i>Default: 1</i><br /><br />
 222             <a name="chart.background.grid.border"></a>
 223 <b>chart.background.grid.border</b><br />
 224             Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br />
 225             <a name="chart.background.grid.hlines"></a>
 226 <b>chart.background.grid.hlines</b><br />
 227             Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br />
 228             <a name="chart.background.grid.vlines"></a>
 229 <b>chart.background.grid.vlines</b><br />
 230             Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br />
 231             <a name="chart.background.grid.autofit"></a>
 232 <b>chart.background.grid.autofit</b><br />
 233             Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br /><i>Default: false</i><br /><br />
 234             <a name="chart.background.grid.autofit.numhlines"></a>
 235 <b>chart.background.grid.autofit.numhlines</b><br />
 236             When using autofit this allows you to specify how many horizontal grid lines you want. <br /><i>Default: 7</i><br /><br />
 237             <a name="chart.background.grid.autofit.numvlines"></a>
 238 <b>chart.background.grid.autofit.numvlines</b><br />
 239             When using autofit this allows you to specify how many vertical grid lines you want. <br /><i>Default: 20</i><br /><br />
 240             <a name="chart.background.hbars"></a>
 241 <b>chart.background.hbars</b><br />
 242             An array of information stipulating horizontal coloured bars. You can use these to indicate limits. Eg: <i>myBar.Set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]);</i> This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.<br /><i>Default: null</i><br /><br />
 243 <a name="colors"></a>
 244 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>            <a name="chart.strokecolor"></a>
 245 <b>chart.strokecolor</b><br />
 246             The color of the outline of the bars. <br /><i>Default: #666</i><br /><br />
 247             <a name="chart.colors"></a>
 248 <b>chart.colors</b><br />
 249             An array of the colors of the actual bars. <br /><i>Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']</i><br /><br />
 250 <a name="margins"></a>
 251 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>            <a name="chart.hmargin"></a>
 252 <b>chart.hmargin</b><br />
 253             The horizontal margin (in pixels) of the graph. <br /><i>Default: 5</i><br /><br />
 254             <a name="chart.gutter"></a>
 255 <b>chart.gutter</b><br />
 256             The gutter of the graph. This is the area outside of the X and Y axis - where the labels go. If you're short on space for your labels, try increasing this. <br /><i>Default: 25</i><br /><br />
 257 <a name="labels and text"></a>
 258 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3>            <a name="chart.text.color"></a>
 259 <b>chart.text.color</b><br />
 260             The color of the labels. <br /><i>Default: black</i><br /><br />
 261             <a name="chart.text.size"></a>
 262 <b>chart.text.size</b><br />
 263             The size (in points) of the labels. <br /><i>Default: 10</i><br /><br />
 264             <a name="chart.text.angle"></a>
 265 <b>chart.text.angle</b><br />
 266             The angle of the horizontal text labels (at the bottom of the graph). This can be one of three values - 0, 45 or 90.<br /><i>Default: 0 (Horizontal)</i><br /><br />
 267             <a name="chart.text.font"></a>
 268 <b>chart.text.font</b><br />
 269             The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
 270             <a name="chart.labels"></a>
 271 <b>chart.labels</b><br />
 272             An array of the labels to be used on the graph. <br /><i>Default: An empty array</i><br /><br />
 273
 274             <a name="chart.labels.above"></a>
 275             <b>chart.labels.above</b><br />
 276             If true, values will be shown above the bars. For regular and stacked bar charts units are included, whereas for
 277             grouped bar charts they're not (usually there isn't enough space for them).
 278             <br /><i>Default: false</i><br /><br />
 279
 280             <a name="chart.labels.above.decimals"></a>
 281             <b>chart.labels.above.decimals</b><br />
 282             This stipulates how many decimals are used in the above bar labels.
 283             <br /><i>Default: 0</i><br /><br />
 284
 285             <a name="chart.labels.above.size"></a>
 286             <b>chart.labels.above.size</b><br />
 287             The font size of the above bar labels. Useful if you only have a few bars.
 288             <br /><i>Default: false</i><br /><br />
 289
 290             <a name="chart.labels.ingraph"></a>
 291 <b>chart.labels.ingraph</b><br />
 292             An array of labels for the graph which are drawn "inside" the graph.  If you have 5 data points then this should have a corresponding number of elements, though there is a <a href="misc.html#shorthand.ingraph.labels">shorthand available</a>.<br /><i>Default: null</i><br /><br />
 293             <a name="chart.ylabels"></a>
 294 <b>chart.ylabels</b><br />
 295             Can be <i>true</i> or <i>false</i> and determines whether the chart has Y axis labels.<br /><i>Default: true</i><br /><br />
 296             <a name="chart.ylabels.count"></a>
 297 <b>chart.ylabels.count</b><br />
 298             A value  that controls how many Y labels there are. Previously (prior to 8th August 2010) this could be 1,3,5. Now it can be any number, but keep in mind that if you use this it may result in decimals.<br /><i>Default: 5</i><br /><br />
 299             <a name="chart.xlabels.offset"></a>
 300 <b>chart.xlabels.offset</b><br />
 301             This allows you finer grained control over the X label positioning if you need it.<br /><i>Default: 0</i><br /><br />
 302             <a name="chart.numyticks"></a>
 303 <b>chart.numyticks</b><br />
 304             The number of Y tickmarks. If you have changed the number of Y labels, you may also want to change this to match. <br /><i>Default: 10</i><br /><br />
 305 <a name="titles"></a>
 306
 307 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
 308
 309 <a name="chart.title"></a>
 310 <b>chart.title</b><br />
 311 The title of the graph, if any. <br />
 312 <i>Default: null</i><br /><br />
 313
 314 <a name="chart.title.background"></a>
 315 <b>chart.title.background</b><br />
 316 The background color (if any) for the title.<br />
 317 <i>Default: null</i><br /><br />
 318
 319 <a name="chart.title.color"></a>
 320 <b>chart.title.color</b><br />
 321             The color of the title.<br /> <i>Default: black</i><br /><br />
 322             <a name="chart.title.hpos"></a>
 323 <b>chart.title.hpos</b><br />
 324             This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
 325             <a name="chart.title.vpos"></a>
 326 <b>chart.title.vpos</b><br />
 327             This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
 328             <a name="chart.title.xaxis"></a>
 329 <b>chart.title.xaxis</b><br />
 330             This allows to specify a title for the X axis.<br /><i>Default: none</i><br /><br />
 331             <a name="chart.title.yaxis"></a>
 332 <b>chart.title.yaxis</b><br />
 333             This allows to specify a title for the Y axis.<br /><i>Default: none</i><br /><br />
 334             <a name="chart.title.xaxis.pos"></a>
 335 <b>chart.title.xaxis.pos</b><br />
 336             This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br />
 337             <a name="chart.title.yaxis.pos"></a>
 338 <b>chart.title.yaxis.pos</b><br />
 339             This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.25</i><br /><br />
 340 <a name="shadow"></a>
 341 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3>            <a name="chart.shadow"></a>
 342 <b>chart.shadow</b><br />
 343             Whether a drop shadow is applied. <br /><i>Default: false</i><br /><br />
 344             <a name="chart.shadow.color"></a>
 345 <b>chart.shadow.color</b><br />
 346             The color of the shadow. <br /><i>Default: #666</i><br /><br />
 347             <a name="chart.shadow.offsetx"></a>
 348 <b>chart.shadow.offsetx</b><br />
 349             The X offset of the shadow. <br /><i>Default: 3</i><br /><br />
 350             <a name="chart.shadow.offsety"></a>
 351 <b>chart.shadow.offsety</b><br />
 352             The Y offset of the shadow.  <br /><i>Default: 3</i><br /><br />
 353             <a name="chart.shadow.blur"></a>
 354 <b>chart.shadow.blur</b><br />
 355             The severity of the shadow blurring effect. <br /><i>Default: 3</i><br /><br />
 356 <a name="scale"></a>
 357 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3>            <a name="chart.scale.decimals"></a>
 358 <b>chart.scale.decimals</b><br />
 359             The number of decimal places to display for the Y scale.<br /><i>Default: 0</i><br /><br />
 360             <a name="chart.scale.point"></a>
 361 <b>chart.scale.point</b><br />
 362             The character used as the decimal point.<br /><i>Default: .</i><br /><br />
 363
 364             <a name="chart.scale.round"></a>
 365             <b>chart.scale.round</b><br />
 366             Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br />
 367             <i>Default: null</i><br /><br />
 368
 369             <a name="chart.units.pre"></a>
 370 <b>chart.units.pre</b><br />
 371             The units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".<br /><i>Default: none</i><br /><br />
 372             <a name="chart.units.post"></a>
 373 <b>chart.units.post</b><br />
 374             The units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".<br /><i>Default: none</i><br /><br />
 375             <a name="chart.ymax"></a>
 376 <b>chart.ymax</b><br />
 377             The optional maximum Y scale value. If not specified then it will be calculated.<br /><i>Default: null (It's calculated)</i><br /><br />
 378
 379
 380             <a name="key"></a>
 381             <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3>
 382
 383             <a name="chart.key"></a>
 384             <b>chart.key</b><br />
 385             An array of key information. <br />
 386             <i>Default: [] (An empty array)</i><br /><br />
 387
 388             <a name="chart.key.background"></a>
 389             <b>chart.key.background</b><br />
 390             The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br>
 391             <i>Default: white</i><br /><br />
 392
 393             <a name="chart.key.position"></a>
 394             <b>chart.key.position</b><br />
 395             Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
 396             <i>Default: graph</i><br /><br />
 397
 398             <b>chart.key.position.x</b><br />
 399             This allows you to specify a specific X coordinate for the key.<br />
 400             <i>Default: null</i><br /><br />
 401
 402             <b>chart.key.position.y</b><br />
 403             This allows you to specify a specific Y coordinate for the key.<br />
 404             <i>Default: null</i><br /><br />
 405
 406             <b>chart.key.position.gutter.boxed</b><br />
 407             If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
 408             <i>Default: true</i><br /><br />
 409
 410             <a name="chart.key.shadow"></a>
 411             <b>chart.key.shadow</b><br />
 412             Whether a small drop shadow is applied to the key.<br />
 413             <i>Default: false</i><br /><br />
 414
 415             <a name="chart.key.shadow.color"></a>
 416             <b>chart.key.shadow.color</b><br />
 417             The color of the shadow.<br />
 418             <i>Default: #666</i><br /><br />
 419
 420             <a name="chart.key.shadow.blur"></a>
 421             <b>chart.key.shadow.blur</b><br />
 422             The extent of the blurring effect used on the shadow.<br />
 423             <i>Default: 3</i><br /><br />
 424
 425             <a name="chart.key.shadow.offsetx"></a>
 426             <b>chart.key.shadow.offsetx</b><br />
 427             The X offset of the shadow.<br />
 428             <i>Default: 2</i><br /><br />
 429
 430             <a name="chart.key.shadow.offsety"></a>
 431             <b>chart.key.shadow.offsety</b><br />
 432             The Y offset of the shadow.<br />
 433             <i>Default: 2</i><br /><br />
 434
 435             <b>chart.key.rounded</b><br />
 436             This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
 437             <i>Default: false</i><br /><br />
 438
 439             <b>chart.key.color.shape</b><br />
 440             This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
 441             <i>Default: square</i><br /><br />
 442
 443
 444
 445 <a name="interactive features"></a>
 446 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>            <a name="chart.contextmenu"></a>
 447 <b>chart.contextmenu</b><br />
 448             An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br />
 449             <a name="chart.tooltips"></a>
 450 <b>chart.tooltips</b><br />
 451             A numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML.<br /><i>Default: null</i><br /><br />
 452             <a name="chart.tooltips.effect"></a>
 453 <b>chart.tooltips.effect</b><br />
 454             The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
 455             <a name="chart.tooltips.event"></a>
 456 <b>chart.tooltips.event</b><br />
 457             This is the event that triggers the tooltips. It can be either <i>onclick</i> or <i>onmousemove</i>.<br /><i>Default: onclick</i><br /><br />
 458             <a name="chart.tooltips.css.class"></a>
 459 <b>chart.tooltips.css.class</b><br />
 460             This is the name of the CSS class the graph uses.<br /><i>Default: RGraph_tooltip</i><br /><br />
 461             <a name="chart.tooltips.override"></a>
 462 <b>chart.tooltips.override</b><br />
 463             If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br />
 464             <a name="chart.tooltips.coords.adjust"></a>
 465 <b>chart.tooltips.coords.adjust</b><br />
 466             When you translate (to make the best use of space for example) this allows you to adjust the tooltip coordinates accordingly.<br /> <i>Default: [0,0]</i><br /><br />
 467             <a name="chart.crosshairs"></a>
 468 <b>chart.crosshairs</b><br />
 469             If true, you will get a crosshair centering on the current mouse position.<br /><i>Default: false</i><br /><br />
 470             <a name="chart.crosshairs.linewidth"></a>
 471 <b>chart.crosshairs.linewidth</b><br />
 472             This controls the linewidth of the crosshairs.<br /><i>Default: 1</i><br /><br />
 473             <a name="chart.crosshairs.color"></a>
 474 <b>chart.crosshairs.color</b><br />
 475             The color of the crosshairs.<br /><i>Default: #333</i><br /><br />
 476             <a name="chart.annotatable"></a>
 477 <b>chart.annotatable</b><br />
 478             Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
 479             <a name="chart.annotate.color"></a>
 480 <b>chart.annotate.color</b><br />
 481             If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
 482             <a name="chart.resizable"></a>
 483 <b>chart.resizable</b><br />
 484             Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /><i>Default: false</i><br /><br />
 485             <a name="chart.adjustable"></a>
 486 <b>chart.adjustable</b><br />
 487             Defaulting to false, this determines whether your bar chart will be adjustable. <br /><i>Default: false</i><br /><br />
 488 <a name="zoom"></a>
 489 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3>            <a name="chart.zoom.mode"></a>
 490 <b>chart.zoom.mode</b><br />
 491             Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
 492             <a name="chart.zoom.factor"></a>
 493 <b>chart.zoom.factor</b><br />
 494             This is the factor that the graph will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
 495             <a name="chart.zoom.fade.in"></a>
 496 <b>chart.zoom.fade.in</b><br />
 497             Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
 498             <a name="chart.zoom.fade.out"></a>
 499 <b>chart.zoom.fade.out</b><br />
 500             Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
 501             <a name="chart.zoom.hdir"></a>
 502 <b>chart.zoom.hdir</b><br />
 503             The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
 504             <a name="chart.zoom.vdir"></a>
 505 <b>chart.zoom.vdir</b><br />
 506             The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
 507             <a name="chart.zoom.delay"></a>
 508 <b>chart.zoom.delay</b><br />
 509             The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
 510             <a name="chart.zoom.frames"></a>
 511 <b>chart.zoom.frames</b><br />
 512             The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
 513             <a name="chart.zoom.shadow"></a>
 514 <b>chart.zoom.shadow</b><br />
 515             Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
 516             <a name="chart.zoom.thumbnail.width"></a>
 517 <b>chart.zoom.thumbnail.width</b><br />
 518             When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
 519             <a name="chart.zoom.thumbnail.height"></a>
 520 <b>chart.zoom.thumbnail.height</b><br />
 521             When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
 522             <a name="chart.zoom.background"></a>
 523 <b>chart.zoom.background</b><br />
 524             Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
 525 <a name="miscellaneous"></a>
 526 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>            <a name="chart.line"></a>
 527 <b>chart.line</b><br />
 528             Formerly a boolean, this now stipulates a line graph object which is to be drawn on top of the bar chart. You can see an example <a href="combine.html">here</a>.<br /><i>Default: null</i><br /><br />
 529             <a name="chart.variant"></a>
 530 <b>chart.variant</b><br />
 531             This simply stipulates whether you want a regular bar chart, a dot chart, a pyramid chart a 3D chart, a sketch or a glassy chart. Possible values are:<ul><li>bar</li><li>dot</li><li>pyramid</li><li>arrow</li><li>3d</li><li>sketch</li><li>glass</li></ul>The pyramid, dot, arrow, sketch and glass variants are only effective for regular bar charts - not grouped or stacked charts.<br /><i>Default: bar</i><br /><br />
 532             <a name="chart.xaxispos"></a>
 533 <b>chart.xaxispos</b><br />
 534             The position of the X axis. This can be <i>bottom</i> or <i>center</i>. <br /><i>Default: bottom</i><br /><br />
 535             <a name="chart.axis.color"></a>
 536 <b>chart.axis.color</b><br />
 537             The color of the axes.<br /><i>Default: black</i><br /><br />
 538             <a name="chart.grouping"></a>
 539 <b>chart.grouping</b><br />
 540             How the bars are grouped, and it should be one of: <b>grouped</b> or <b>stacked</b><br /><i>Default: grouped</i><br /><br />
 541 </div>
 542
 543     <a name="available.methods"></a>
 544     <br />&nbsp;<br />
 545     <h2>Methods</h2>
 546
 547     <a name="getbar"></a>
 548     <b>obj.getBar()</b><br /><br />
 549     This method makes it easier to get hold of which bar has been clicked on, or hovered over. It returns an array of:
 550     <ul>
 551         <li>The graph object</li>
 552         <li>The X coordinate</li>
 553         <li>The Y coordinate</li>
 554         <li>The width of the bar</li>
 555         <li>The height of the bar</li>
 556         <li>The numerical index of the bar. This corresponds (for example) to the tooltips array, and the coordinates array</li>
 557     </ul>
 558
 559     An example usage is:
 560
 561     <pre class="code">
 562 &lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
 563
 564 &lt;script src="RGraph.common.core.js"&gt;&lt;/script&gt;
 565 &lt;script src="RGraph.bar.js"&gt;&lt;/script&gt;
 566
 567 &lt;script&gt;
 568     myGraph = new RGraph.Bar('myCanvas', [1.2, 1.3, 1.4, 1.5,6,1.9,2,2.1,2.5]);
 569     myGraph.Set('chart.labels', ['John', 'Barry', 'Rich', 'Craig', 'Tom', 'Frank', 'Helen', 'Joyce', 'Fred'])
 570     myGraph.Draw();
 571
 572     RGraph.Register(myGraph);
 573
 574     myGraph.canvas.onclick = function (e)
 575     {
 576         RGraph.Redraw();
 577
 578         var canvas  = e.target;
 579         var context = canvas.getContext('2d');
 580         var obj     = canvas.__object__;
 581         <span style="color: green">var coords  = obj.getBar(e);</span>
 582
 583         if (coords) {
 584             var top    = coords[1];
 585             var left   = coords[2];
 586             var width  = coords[3];
 587             var height = coords[4];
 588
 589             context.beginPath();
 590                 context.strokeStyle = 'black';
 591                 context.fillStyle = 'rgba(255,255,255,0.5)';
 592                 context.strokeRect(top, left, width, height);
 593                 context.fillRect(top, left, width, height);
 594             context.stroke();
 595             context.fill();
 596         }
 597     }
 598 &lt;/script&gt;
 599 </pre>
 600
 601
 602 </body>
 603 </html>