Context Navigation

source: Dev/branches/rest-dojo-ui/jQueryUI/client/RGraph/docs/hbar.html @ 312

Last change on this file since 312 was 312, checked in by jkraaijeveld, 13 years ago

File size: 30.4 KB

Line
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: Javascript charts and graph library - horizontal bar charts documentation</title>
22
23	<meta name="keywords" content="rgraph javascript charts docs hbar horizontal bar" />
24	<meta name="description" content="RGraph: Javascript charts and graph library - Documentation about the Horizontal Bar (HBar) charts" />
25
26	<meta property="og:title" content="RGraph: Javascript charts and graph library" />
27	<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
28	<meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
29
30	<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
31	<link rel="icon" type="image/png" href="../images/favicon.png">
32
33	<script>
34	var _gaq = _gaq \|\| [];
35	_gaq.push(['_setAccount', 'UA-54706-2']);
36	_gaq.push(['_trackPageview']);
37
38	(function() {
39	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
40	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
41	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
42	})();
43	</script>
44
45	</head>
46	<body>
47
48
49	<!-- Social networking buttons -->
50	<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
51	<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%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20charts%20types&title=RGraph:Javascript%20charts%20and%20graphs%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /></a>
52	<a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+and+graph+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank"><img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" /></a>
53	</div>
54
55	<script>
56	// Opera fix
57	if (navigator.userAgent.indexOf('Opera') == -1) {
58	document.getElementById("social_icons").style.position = 'fixed';
59	}
60	</script>
61	<!-- Social networking buttons -->
62
63	<div id="breadcrumb">
64	<a href="../index.html">RGraph: Javascript charts and graph library</a>
65	>
66	<a href="index.html">Documentation</a>
67	>
68	Horizontal bar charts
69	</div>
70
71	<h1>RGraph: <span>Javascript charts and graph library</span> - Horizontal bar charts documentation</h1>
72
73	<script>
74	if (RGraph.isIE8()) {
75	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 charts, 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://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a> to see some screenshots.</div>');
76	}
77	</script>
78
79	<p>
80	Horizontal bar charts are a variation on Bar charts, which can be useful when you have larger labels, since you have
81	more space available to you for them.
82	</p>
83
84	<p>
85	The example file is <a href="../examples/hbar.html">here</a>.
86	</p>
87
88	<pre class="code">
89	<script>
90	window.onload = function ()
91	{
92	var data = [280,45,133,166,84,259,266,960,219,311];
93
94	var hbar = new RGraph.HBar('myCanvas', data);
95	hbar.Set('chart.labels', ['Richard', 'Alex', 'Nick', 'Scott', 'Kjnell', 'Doug', 'Charles', 'Michelle', 'Mark', 'Alison']);
96	hbar.Set('chart.gutter.left', 45);
97	hbar.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
98	hbar.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
99	hbar.Set('chart.background.grid', true);
100	hbar.Set('chart.colors', ['rgba(255,0,0,1)']);
101	hbar.Draw();
102	}
103	</script>
104	</pre>
105
106	<ul>
107	<li><a href="#available.properties">Properties</a></li>
108	<li><a href="#available.methods">Methods</a></li>
109	</ul>
110
111	<a name="available.properties"></a>
112	<h2>Properties</h2>
113
114	<p>
115	You can use these properties to control how the bar chart apears. You can set them by using the Set() method. Eg:
116	</p>
117
118	<p>
119	<b>myHBar.Set('name', 'value');</b>
120	</p>
121
122	<ul>
123	<li><a href="#chart">Chart configuration</a></li>
124	<li><a href="#margins">Margins</a></li>
125	<li><a href="#colors">Colors</a></li>
126	<li><a href="#background">Background</a></li>
127	<li><a href="#labels and text">Labels and text</a></li>
128	<li><a href="#titles">Titles</a></li>
129	<li><a href="#scale and axes">Scale and axes</a></li>
130	<li><a href="#miscellaneous">Miscellaneous</a></li>
131	<li><a href="#shadow">Shadow</a></li>
132	<li><a href="#key">Key</a></li>
133	<li><a href="#interactive features">Interactive features</a></li>
134	<li><a href="#zoom">Zoom</a></li>
135	</ul>
136
137
138	<a name="margins"></a>
139	<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>
140
141
142
143	<a name="chart.gutter.left"></a>
144	<b>chart.gutter.left</b><br />
145	The left gutter of the chart, (the gutter is where the labels and title are)).<br />
146	<i>Default: 75</i><br /><br />
147
148	<a name="chart.gutter.right"></a>
149	<b>chart.gutter.right</b><br />
150	The right gutter of the chart, (the gutter is where the labels and title are).<br />
151	<i>Default: 25</i><br /><br />
152
153	<a name="chart.gutter.top"></a>
154	<b>chart.gutter.top</b><br />
155	The top gutter of the chart, (the gutter is where the labels and title are).<br />
156	<i>Default: 25</i><br /><br />
157
158	<a name="chart.gutter.bottom"></a>
159	<b>chart.gutter.bottom</b><br />
160	The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
161	<i>Default: 25</i><br /><br />
162
163	<a name="colors"></a>
164	<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.colors"></a>
165	<b>chart.colors</b><br />
166	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 />
167	<a name="background"></a>
168	<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>
169	<b>chart.background.barcolor1</b><br />
170	The color of the background bars, (1 of 2). <br /><i>Default: white</i><br /><br />
171	<a name="chart.background.barcolor2"></a>
172	<b>chart.background.barcolor2</b><br />
173	The color of the background bars, (2 of 2). <br /><i>Default: white</i><br /><br />
174	<a name="chart.background.grid"></a>
175	<b>chart.background.grid</b><br />
176	Whether to show the background grid or not. <br /><i>Default: true</i><br /><br />
177	<a name="chart.background.grid.color"></a>
178	<b>chart.background.grid.color</b><br />
179	The color of the background grid. <br /><i>Default: #ddd</i><br /><br />
180	<a name="chart.background.grid.hsize"></a>
181	<b>chart.background.grid.hsize</b><br />
182	The horizontal background grid size. <br /><i>Default: 40</i><br /><br />
183	<a name="chart.background.grid.vsize"></a>
184	<b>chart.background.grid.vsize</b><br />
185	The vertical background grid size. <br /><i>Default: 18</i><br /><br />
186	<a name="chart.background.grid.width"></a>
187	<b>chart.background.grid.width</b><br />
188	The width that the background grid lines are. Decimals (eg 0.5) are permitted.<br /><i>Default: 0.5</i><br /><br />
189	<a name="chart.background.grid.border"></a>
190	<b>chart.background.grid.border</b><br />
191	Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br />
192	<a name="chart.background.grid.hlines"></a>
193	<b>chart.background.grid.hlines</b><br />
194	Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br />
195	<a name="chart.background.grid.vlines"></a>
196	<b>chart.background.grid.vlines</b><br />
197	Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br />
198	<a name="chart.background.grid.autofit"></a>
199	<b>chart.background.grid.autofit</b><br />
200	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 />
201	<a name="chart.background.grid.autofit.numhlines"></a>
202	<b>chart.background.grid.autofit.numhlines</b><br />
203	When using autofit this allows you to specify how many horizontal grid lines you want. <br /><i>Default: 14</i><br /><br />
204	<a name="chart.background.grid.autofit.numvlines"></a>
205	<b>chart.background.grid.autofit.numvlines</b><br />
206	When using autofit this allows you to specify how many vertical grid lines you want. <br /><i>Default: 20</i><br /><br />
207
208	<a name="labels and text"></a>
209	<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>
210
211	<a name="chart.xlabels"></a>
212	<b>chart.xlabels</b><br />
213	A boolean controlling whether the X labels are shown.<br />
214	<i>Default: true</i><br /><br />
215
216	<a name="chart.labels"></a>
217	<b>chart.labels</b><br />
218	An array of the labels to be used on the chart. <br />
219	<i>Default: An empty array</i><br /><br />
220
221	<a name="chart.labels.above"></a>
222	<b>chart.labels.above</b><br />
223	This is a boolean which if true, will cause labels to be shown to the right of the bars. (It's called "above"
224	for API compatibility).<br />
225	<i>Default: false</i><br /><br />
226
227	<a name="chart.labels.above.decimals"></a>
228	<b>chart.labels.above.decimals</b><br />
229	This is a number which controls how many decimals are shown. It defaults to 0, and since it was added (4th December 2010)
230	you may need to set this, otherwise no decimals will be shown.<br />
231	<i>Default: 0</i><br /><br />
232
233	<a name="chart.text.font"></a>
234	<b>chart.text.font</b><br />
235	The font used to render the text.<br />
236	<i>Default: Verdana</i><br /><br />
237
238	<a name="chart.text.color"></a>
239	<b>chart.text.color</b><br />
240	The color of the labels. <br />
241	<i>Default: black</i><br /><br />
242
243	<a name="chart.text.size"></a>
244	<b>chart.text.size</b><br />
245	The size (in points) of the labels. <br />
246	<i>Default: 10</i><br /><br />
247
248
249	<a name="titles"></a>
250	<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>
251
252	<a name="chart.title"></a>
253	<b>chart.title</b><br />
254	The title of the chart, if any. <br />
255	<i>Default: null</i><br /><br />
256
257	<a name="chart.title.background"></a>
258	<b>chart.title.background</b><br />
259	The background color (if any) for the title.<br />
260	<i>Default: null</i><br /><br />
261
262	<a name="chart.title.hpos"></a>
263	<b>chart.title.hpos</b><br />
264	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 />
265	<a name="chart.title.vpos"></a>
266	<b>chart.title.vpos</b><br />
267	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 />
268	<a name="chart.title.xaxis"></a>
269	<b>chart.title.xaxis</b><br />
270	This allows to specify a title for the X axis.<br /><i>Default: none</i><br /><br />
271	<a name="chart.title.yaxis"></a>
272	<b>chart.title.yaxis</b><br />
273	This allows to specify a title for the Y axis.<br /><i>Default: none</i><br /><br />
274	<a name="chart.title.xaxis.pos"></a>
275	<b>chart.title.xaxis.pos</b><br />
276	This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br />
277	<a name="chart.title.yaxis.pos"></a>
278	<b>chart.title.yaxis.pos</b><br />
279	This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.5</i><br /><br />
280	<a name="chart.title.color"></a>
281	<b>chart.title.color</b><br />
282	The color of the title.<br /> <i>Default: black</i><br /><br />
283	<a name="scale and axes"></a>
284	<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 and axes</h3> <a name="chart.scale.point"></a>
285	<b>chart.scale.point</b><br />
286	The character used as the decimal point.<br /><i>Default: .</i><br /><br />
287	<a name="chart.scale.thousand"></a>
288	<b>chart.scale.thousand</b><br />
289	The character used as the thousand separator<br /><i>Default: ,</i><br /><br />
290
291	<a name="chart.scale.round"></a>
292	<b>chart.scale.round</b><br />
293	Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br />
294	<i>Default: null</i><br /><br />
295
296	<a name="chart.xmax"></a>
297	<b>chart.xmax</b><br />
298	(Optional) An optional max figure for the X scale.<br />
299	<i>Default: none (one is calculated)</i><br /><br />
300
301	<a name="chart.xmin"></a>
302	<b>chart.xmin</b><br />
303	An optional minimum figure for the X scale.<br />
304	<i>Default: 0</i><br /><br />
305
306	<a name="chart.yaxispos"></a>
307	<b>chart.yaxispos</b><br />
308	The position of the Y axis. Works with regular and grouped charts. Can be either <i>center</i> or <i>left</i>.<br /> <i>Default: left</i><br /><br />
309	<a name="chart.axis.color"></a>
310	<b>chart.axis.color</b><br />
311	The color of the axes.<br /> <i>Default: black</i><br /><br />
312	<a name="chart.units.pre"></a>
313	<b>chart.units.pre</b><br />
314	The units that the X 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 />
315	<a name="chart.units.post"></a>
316	<b>chart.units.post</b><br />
317	The units that the X 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 />
318	<a name="chart.units.ingraph"></a>
319	<b>chart.units.ingraph</b><br />
320	If your units are long, setting this stipulates them to be used for ingraph labels only.<br /><i>Default: false</i><br /><br />
321
322
323
324
325
326
327
328
329	<a name="miscellaneous"></a>
330	<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>
331
332	<a name="chart.grouping"></a>
333	<b>chart.grouping</b><br />
334	How the bars are grouped, and it should be one of: <b>grouped</b> or <b>stacked</b><br />
335	<i>Default: grouped</i><br /><br />
336
337	<a name="chart.vmargin"></a>
338	<b>chart.vmargin</b><br />
339	The vertical margin that is applied to each individual bar.<br />
340	<i>Default: 3</i><br /><br />
341
342	<a name="chart.strokestyle"></a>
343	<b>chart.strokestyle</b><br />
344	The color of the outlines of the bars.<br />
345	<i>Default: black</i><br /><br />
346
347	<a name="chart.highlight.stroke"></a>
348	<b>chart.highlight.stroke</b><br />
349	If you use tooltips, this controls the colour of the highlight stroke.
350	<br /><i>Default: black</i><br /><br />
351
352	<a name="chart.highlight.fill"></a>
353	<b>chart.highlight.fill</b><br />
354	If you use tooltips, this controls the colour of the highlight fill.
355	<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
356
357
358
359
360
361	<a name="shadow"></a>
362	<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>
363	<b>chart.shadow</b><br />
364	Whether a small drop shadow is applied. <br /><i>Default: false</i><br /><br />
365	<a name="chart.shadow.color"></a>
366	<b>chart.shadow.color</b><br />
367	The color of the shadow. <br /><i>Default: #666</i><br /><br />
368	<a name="chart.shadow.offsetx"></a>
369	<b>chart.shadow.offsetx</b><br />
370	The X offset of the shadow. <br /><i>Default: 3</i><br /><br />
371	<a name="chart.shadow.offsety"></a>
372	<b>chart.shadow.offsety</b><br />
373	The Y offset of the shadow. <br /><i>Default: 3</i><br /><br />
374	<a name="chart.shadow.blur"></a>
375	<b>chart.shadow.blur</b><br />
376	The severity of the shadow blurring effect. <br /><i>Default: 3</i><br /><br />
377
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.halign"></a>
394	<b>chart.key.halign</b><br />
395	Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
396	aligned <i>left</i> or <i>right</i>.<br />
397	<i>Default: right</i><br /><br />
398
399	<a name="chart.key.position"></a>
400	<b>chart.key.position</b><br />
401	Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
402	<i>Default: graph</i><br /><br />
403
404	<b>chart.key.position.x</b><br />
405	This allows you to specify a specific X coordinate for the key.<br />
406	<i>Default: null</i><br /><br />
407
408	<b>chart.key.position.y</b><br />
409	This allows you to specify a specific Y coordinate for the key.<br />
410	<i>Default: null</i><br /><br />
411
412	<b>chart.key.position.gutter.boxed</b><br />
413	If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
414	<i>Default: true</i><br /><br />
415
416	<a name="chart.key.shadow"></a>
417	<b>chart.key.shadow</b><br />
418	Whether a small drop shadow is applied to the key.<br />
419	<i>Default: false</i><br /><br />
420
421	<a name="chart.key.shadow.color"></a>
422	<b>chart.key.shadow.color</b><br />
423	The color of the shadow.<br />
424	<i>Default: #666</i><br /><br />
425
426	<a name="chart.key.shadow.blur"></a>
427	<b>chart.key.shadow.blur</b><br />
428	The extent of the blurring effect used on the shadow.<br />
429	<i>Default: 3</i><br /><br />
430
431	<a name="chart.key.shadow.offsetx"></a>
432	<b>chart.key.shadow.offsetx</b><br />
433	The X offset of the shadow.<br />
434	<i>Default: 2</i><br /><br />
435
436	<a name="chart.key.shadow.offsety"></a>
437	<b>chart.key.shadow.offsety</b><br />
438	The Y offset of the shadow.<br />
439	<i>Default: 2</i><br /><br />
440
441	<b>chart.key.rounded</b><br />
442	This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
443	<i>Default: false</i><br /><br />
444
445	<b>chart.key.color.shape</b><br />
446	This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
447	<i>Default: square</i><br /><br />
448
449	<b>chart.key.linewidth</b><br />
450	The line width of the surrounding border on the key.<br />
451	<i>Default: 1</i><br /><br />
452
453
454	<a name="interactive features"></a>
455	<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>
456
457	<a name="chart.contextmenu"></a>
458	<b>chart.contextmenu</b><br />
459	An array of context menu items. You cannot have context menus AND tooltips, only one or the other. More information on context menus is <a href="context.html">here</a>.<br />
460	<i>Default: [] (An empty array)</i><br /><br />
461
462	<a name="chart.tooltips"></a>
463	<b>chart.tooltips</b><br />
464	An array of tooltips for the chart.<br />
465	<i>Default: An empty array</i><br /><br />
466
467	<a name="chart.tooltips.event"></a>
468	<b>chart.tooltips.event</b><br />
469	This is the event that triggers the tooltips. It can be <i>onclick</i> or <i>onmousemove</i>.<br />
470	<i>Default: onclick</i><br /><br />
471
472	<a name="chart.tooltips.effect"></a>
473	<b>chart.tooltips.effect</b><br />
474	The visual effect used when showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br />
475	<i>Default: fade</i><br /><br />
476
477	<a name="chart.tooltips.css.class"></a>
478	<b>chart.tooltips.css.class</b><br />
479	This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br />
480	<a name="chart.tooltips.override"></a>
481	<b>chart.tooltips.override</b><br />
482	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 />
483	<a name="chart.annotatable"></a>
484	<b>chart.annotatable</b><br />
485	Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
486	<a name="chart.annotate.color"></a>
487	<b>chart.annotate.color</b><br />
488	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 />
489
490
491	<a name="chart.resizable"></a>
492	<b>chart.resizable</b><br />
493	Defaulting to false, this determines whether your chart 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 />
494	<i>Default: false</i><br /><br />
495
496
497	<a name="chart.resize.handle.background"></a>
498	<b>chart.resize.handle.background</b><br />
499	With this you can specify the background color for the resize handle. If you're adjusting the position of the
500	handle then you may need this to make the handle stand out more.<br />
501	<i>Default: null</i><br /><br />
502
503
504
505	<a name="zoom"></a>
506	<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>
507	<b>chart.zoom.mode</b><br />
508	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 />
509	<a name="chart.zoom.factor"></a>
510	<b>chart.zoom.factor</b><br />
511	This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
512	<a name="chart.zoom.fade.in"></a>
513	<b>chart.zoom.fade.in</b><br />
514	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 />
515	<a name="chart.zoom.fade.out"></a>
516	<b>chart.zoom.fade.out</b><br />
517	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 />
518	<a name="chart.zoom.hdir"></a>
519	<b>chart.zoom.hdir</b><br />
520	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 />
521	<a name="chart.zoom.vdir"></a>
522	<b>chart.zoom.vdir</b><br />
523	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 />
524	<a name="chart.zoom.delay"></a>
525	<b>chart.zoom.delay</b><br />
526	The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
527	<a name="chart.zoom.frames"></a>
528	<b>chart.zoom.frames</b><br />
529	The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
530	<a name="chart.zoom.shadow"></a>
531	<b>chart.zoom.shadow</b><br />
532	Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
533	<a name="chart.zoom.thumbnail.width"></a>
534	<b>chart.zoom.thumbnail.width</b><br />
535	When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
536	<a name="chart.zoom.thumbnail.height"></a>
537	<b>chart.zoom.thumbnail.height</b><br />
538	When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
539	<a name="chart.zoom.background"></a>
540	<b>chart.zoom.background</b><br />
541	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 />
542	</div><!-- /DOCS --><br /><br />
543
544
545
546
547
548
549
550
551
552
553
554
555	<a name="available.methods"></a>
556	<br /> <br />
557	<h2>Methods</h2>
558
559	<a name="getbar"></a>
560	<b>obj.getBar()</b><br /><br />
561	This method makes it easier to get hold of which bar has been clicked on, or hovered over. It returns an array of:
562	<ul>
563	<li>The X coordinate</li>
564	<li>The Y coordinate</li>
565	<li>The width of the bar</li>
566	<li>The height of the bar</li>
567	<li>The numerical index of the bar. This corresponds (for example) to the tooltips array, and the coordinates array</li>
568	</ul>
569
570	An example usage is:
571
572	<pre class="code">
573	<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
574
575	<script src="RGraph.common.core.js"></script>
576	<script src="RGraph.hbar.js"></script>
577
578	<script>
579	myGraph = new RGraph.HBar('myCanvas', [1.2, 1.3, 1.4, 1.5,6,1.9,2,2.1,2.5]);
580	myGraph.Set('chart.labels', ['John', 'Barry', 'Rich', 'Craig', 'Tom', 'Frank', 'Helen', 'Joyce', 'Fred'])
581	myGraph.Draw();
582
583	RGraph.Register(myGraph);
584
585	myGraph.canvas.onclick = function (e)
586	{
587	RGraph.Redraw();
588
589	var canvas = e.target;
590	var context = canvas.getContext('2d');
591	var obj = canvas.__object__;
592	<span style="color: green">var bar = obj.getBar(e);</span>
593
594	if (bar) {
595
596	var top = bar[0];
597	var left = bar[1];
598	var width = bar[2];
599	var height = bar[3];
600	var idx = bar[4];
601
602	context.beginPath();
603	context.strokeStyle = 'black';
604	context.fillStyle = 'rgba(255,255,255,0.5)';
605	context.strokeRect(top, left, width, height);
606	context.fillRect(top, left, width, height);
607	context.stroke();
608	context.fill();
609	}
610	}
611	</script>
612	</pre>
613	</body>
614	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: