4 <meta http-equiv="X-UA-Compatible" content="chrome=1">
7 * o------------------------------------------------------------------------------o
8 * | This file is part of the RGraph package - you can learn more at: |
10 * | http://www.rgraph.net |
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: |
16 * | http://www.rgraph.net/LICENSE.txt |
17 * o------------------------------------------------------------------------------o
20 <title>RGraph: HTML5 canvas graph library - bar chart documentation</title>
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" />
25 <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
26 <link rel="icon" type="image/png" href="../images/favicon.png">
30 <!-- Social networking buttons -->
31 <script src="../libraries/RGraph.common.core.js" ></script>
34 function HideTwitterDIV ()
36 document.getElementById("twitter_div").style.opacity = 0;
37 document.getElementById("twitter_div").style.display = 'none';
41 function ShowTwitterDIV (e)
43 var e = RGraph.FixEventObject(document.all ? event : e);
44 var div = document.getElementById("twitter_div");
45 var img = document.getElementById("twitter_icon");
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';
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);
66 * This code installs the event handler that hides the Twitter DIV
69 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
71 window.addEventListener('click', HideTwitterDIV, false);
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 about RGraph</a><br>
78 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
81 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
84 if (navigator.userAgent.indexOf('Opera') == -1) {
85 document.getElementById("social_icons").style.position = 'fixed';
86 document.getElementById("twitter_div").style.position = 'fixed';
91 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
95 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=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" />
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" />
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"/>
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"/>
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" />
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" />
124 <!-- /Social networking buttons -->
126 <div id="breadcrumb">
127 <a href="../index.html">RGraph: HTML5 canvas graph library</a>
129 <a href="index.html">Documentation</a>
134 <h1>RGraph: HTML5 canvas graph library - Bar chart documentation</h1>
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>');
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.
147 The example file is <a href="../examples/bar.html">here</a>.
151 <li><a href="#available.properties">Properties</a></li>
152 <li><a href="#available.methods">Methods</a></li>
157 window.onload = function ()
159 var data = [280,45,133,166,84,259,266,960,219,311];
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)']);
173 <a name="available.properties"></a>
177 You can use these properties to control how the bar graph apears. You can set them by using the Set() method. Eg:
181 <b>myBar.Set('name', 'value');</b>
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>
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 />
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 />
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 />
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 />
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>
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>
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 />
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 />
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 />
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 />
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 />
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 />
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>
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 />
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 />
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 />
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 />
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 />
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 />
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 />
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 />
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 />
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 />
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 />
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 />
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 />
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 />
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 />
543 <a name="available.methods"></a>
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:
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>
562 <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
564 <script src="RGraph.common.core.js"></script>
565 <script src="RGraph.bar.js"></script>
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'])
572 RGraph.Register(myGraph);
574 myGraph.canvas.onclick = function (e)
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>
585 var left = coords[2];
586 var width = coords[3];
587 var height = coords[4];
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);