Context Navigation

source: Dev/trunk/RGraph/docs/rose.html @ 77

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 26.8 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 personal, \|
15	* \| charity and educational purposes it is free to use. You can read the full \|
16	* \| license here: \|
17	* \| http://www.rgraph.net/LICENSE.txt \|
18	* o------------------------------------------------------------------------------o
19	*/
20	-->
21	<title>RGraph: Javascript charts and graph library - rose charts documentation</title>
22
23	<script src="../libraries/RGraph.common.core.js" ></script>
24
25	<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
26	<link rel="icon" type="image/png" href="/favicon.png">
27
28	<meta property="og:title" content="RGraph: Javascript charts and graph library" />
29	<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
30	<meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
31
32	<script>
33	var _gaq = _gaq \|\| [];
34	_gaq.push(['_setAccount', 'UA-54706-2']);
35	_gaq.push(['_trackPageview']);
36
37	(function() {
38	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
39	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
40	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
41	})();
42	</script>
43
44	</head>
45	<body>
46
47	<!-- Social networking buttons -->
48	<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
49	<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>
50	<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>
51	</div>
52
53	<script>
54	// Opera fix
55	if (navigator.userAgent.indexOf('Opera') == -1) {
56	document.getElementById("social_icons").style.position = 'fixed';
57	}
58	</script>
59	<!-- Social networking buttons -->
60
61	<div id="breadcrumb">
62	<a href="../index.html">RGraph: Javascript charts and graph library</a>
63	>
64	<a href="index.html">Documentation</a>
65	>
66	Rose charts
67	</div>
68
69	<h1>RGraph: <span>Javascript charts and graph library</span> - Rose charts documentation</h1>
70
71	<script>
72	if (RGraph.isIE8()) {
73	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>');
74	}
75	</script>
76
77	<p>
78	The example file is <a href="../examples/rose.html">here</a>.
79	</p>
80
81	<pre class="code">
82	<script>
83	window.onload = function ()
84	{
85	var data = [41,37,16,3,3];
86
87	var rose = new RGraph.Rose('myRose', data);
88	rose.Set('chart.labels', ['MSIE 7 (41%)',
89	'MSIE 6 (37%)',
90	'Firefox (16%)',
91	'Safari (3%)',
92	'Other (3%)']);
93	rose.Draw();
94	}
95	</script>
96	</pre>
97
98	<a name="available.properties"></a>
99	<ul>
100	<li><a href="#available.properties">Properties</a></li>
101	<li><a href="#available.methods">Methods</a></li>
102	<li><a href="#stacked">Stacked Rose charts</a></li>
103	<li><a href="#non-equi-angular">Non-equi-angular Rose charts</a></li>
104	</ul>
105
106	<h2>Properties</h2>
107
108	<p>
109	You can use these properties to control how the Rose chart appears. You can set them by using the Set() method. Eg:
110	</p>
111
112	<p>
113	<b>myRose.Set('name', 'value');</b>
114	</p>
115
116	<ul>
117	<li><a href="#margins">Margins</a></li>
118	<li><a href="#colors">Colors</a></li>
119	<li><a href="#labels and text">Labels and text</a></li>
120	<li><a href="#titles">Titles</a></li>
121	<li><a href="#axis properties">Axis properties</a></li>
122	<li><a href="#scale">Scale</a></li>
123	<li><a href="#key">Key</a></li>
124	<li><a href="#interactive features">Interactive features</a></li>
125	<li><a href="#zoom">Zoom</a></li>
126	<li><a href="#misc">Miscellaneous</a></li>
127	</ul>
128
129
130	<a name="margins"></a>
131	<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>
132
133	<a name="chart.gutter.left"></a>
134	<b>chart.gutter.left</b><br />
135	The left gutter of the chart, (the gutter is where the labels and title are)).<br />
136	<i>Default: 25</i><br /><br />
137
138	<a name="chart.gutter.right"></a>
139	<b>chart.gutter.right</b><br />
140	The right gutter of the chart, (the gutter is where the labels and title are).<br />
141	<i>Default: 25</i><br /><br />
142
143	<a name="chart.gutter.top"></a>
144	<b>chart.gutter.top</b><br />
145	The top gutter of the chart, (the gutter is where the labels and title are).<br />
146	<i>Default: 25</i><br /><br />
147
148	<a name="chart.gutter.bottom"></a>
149	<b>chart.gutter.bottom</b><br />
150	The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
151	<i>Default: 25</i><br /><br />
152
153
154	<a name="colors"></a>
155	<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>
156
157	<a name="chart.colors"></a>
158	<b>chart.colors</b><br />
159	An array of colors to be used by the chart.<br />
160	<i>Default: ['red', 'rgb(0,255,255)', 'rgb(0,255,0)', 'gray', 'blue', 'rgb(255,128,255)','green', 'pink', 'gray', 'aqua']</i><br /><br />
161
162	<a name="chart.colors.alpha"></a>
163	<b>chart.colors.alpha</b><br />
164	Instead of using <i>rgba()</i>, you can use color definitions such as <i>red</i> along with this setting to add
165	transparency.<br />
166	<i>Default: null</i></i><br /><br />
167
168	<a name="chart.colors.sequential"></a>
169	<b>chart.colors.sequential</b><br />
170	Because of the new (as of July 2011) support for grouped Rose charts, the way colors are used has changed. So to have them
171	used in a sequential fashion as before the change, you will need to set this option to true.
172	<i>Default: false</i></i><br /><br />
173
174	<a name="labels and text"></a>
175	<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.font"></a>
176	<b>chart.text.font</b><br />
177	The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
178	<a name="chart.text.color"></a>
179	<b>chart.text.color</b><br />
180	The color of the labels. <br /><i>Default: black</i><br /><br />
181	<a name="chart.text.size"></a>
182	<b>chart.text.size</b><br />
183	The size of the text (in points).<br /> <i>Default: 10</i><br /><br />
184	<a name="chart.labels"></a>
185	<b>chart.labels</b><br />
186	The labels, if any, for the chart.<br /><i>Default: none</i><br /><br />
187	<a name="chart.labels.axes"></a>
188	<b>chart.labels.axes</b><br />
189	This controls the axes that show the scale labels. Each letter stands for the appropriate axis (North, South, East and West)<br /><i>Default: nsew</i><br /><br />
190	<a name="chart.labels.position"></a>
191	<b>chart.labels.position</b><br />
192	This can be either <i>center</i> or <i>edge</i> and determines the position of the labels.<br /><i>Default: center</i><br /><br />
193	<a name="titles"></a>
194	<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> <a name="chart.title"></a>
195	<b>chart.title</b><br />
196	The title of the chart. <br /><i>Default: none</i><br /><br />
197
198	<a name="chart.title.background"></a>
199	<b>chart.title.background</b><br />
200	The background color (if any) for the title.<br />
201	<i>Default: null</i><br /><br />
202
203	<a name="chart.title.color"></a>
204	<b>chart.title.color</b><br />
205	The color of the title.<br /> <i>Default: black</i><br /><br />
206	<a name="chart.title.hpos"></a>
207	<b>chart.title.hpos</b><br />
208	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 />
209	<a name="chart.title.vpos"></a>
210	<b>chart.title.vpos</b><br />
211	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 />
212
213	<a name="axis properties"></a>
214	<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">Axis properties</h3> <a name="chart.ymax"></a>
215	<b>chart.ymax</b><br />
216	This can be set to control the maximum value of the scale. It's so called to maintain a degree of API compatibility across chart libraries.<br /><i>Default: null</i><br /><br />
217
218	<a name="scale"></a>
219	<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>
220
221	<a name="chart.scale.round"></a>
222	<b>chart.scale.round</b><br />
223	Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br />
224	<i>Default: null</i><br /><br />
225
226
227
228	<a name="key"></a>
229	<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>
230
231	<a name="chart.key"></a>
232	<b>chart.key</b><br />
233	An array of key information. <br />
234	<i>Default: [] (An empty array)</i><br /><br />
235
236	<a name="chart.key.background"></a>
237	<b>chart.key.background</b><br />
238	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>
239	<i>Default: white</i><br /><br />
240
241	<a name="chart.key.halign"></a>
242	<b>chart.key.halign</b><br />
243	Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
244	aligned <i>left</i> or <i>right</i>.<br />
245	<i>Default: right</i><br /><br />
246
247	<a name="chart.key.position"></a>
248	<b>chart.key.position</b><br />
249	Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
250	<i>Default: graph</i><br /><br />
251
252	<b>chart.key.position.x</b><br />
253	This allows you to specify a specific X coordinate for the key.<br />
254	<i>Default: null</i><br /><br />
255
256	<b>chart.key.position.y</b><br />
257	This allows you to specify a specific Y coordinate for the key.<br />
258	<i>Default: null</i><br /><br />
259
260	<b>chart.key.position.gutter.boxed</b><br />
261	If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
262	<i>Default: true</i><br /><br />
263
264	<a name="chart.key.shadow"></a>
265	<b>chart.key.shadow</b><br />
266	Whether a small drop shadow is applied to the key.<br />
267	<i>Default: false</i><br /><br />
268
269	<a name="chart.key.shadow.color"></a>
270	<b>chart.key.shadow.color</b><br />
271	The color of the shadow.<br />
272	<i>Default: #666</i><br /><br />
273
274	<a name="chart.key.shadow.blur"></a>
275	<b>chart.key.shadow.blur</b><br />
276	The extent of the blurring effect used on the shadow.<br />
277	<i>Default: 3</i><br /><br />
278
279	<a name="chart.key.shadow.offsetx"></a>
280	<b>chart.key.shadow.offsetx</b><br />
281	The X offset of the shadow.<br />
282	<i>Default: 2</i><br /><br />
283
284	<a name="chart.key.shadow.offsety"></a>
285	<b>chart.key.shadow.offsety</b><br />
286	The Y offset of the shadow.<br />
287	<i>Default: 2</i><br /><br />
288
289	<b>chart.key.rounded</b><br />
290	This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
291	<i>Default: false</i><br /><br />
292
293	<b>chart.key.color.shape</b><br />
294	This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
295	<i>Default: square</i><br /><br />
296
297	<b>chart.key.linewidth</b><br />
298	The line width of the surrounding border on the key.<br />
299	<i>Default: 1</i><br /><br />
300
301
302
303	<a name="interactive features"></a>
304	<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.tooltips"></a>
305
306	<b>chart.tooltips</b><br />
307	An array of tooltips. You can use HTML if you so wish.<br />
308	<i>Default: [] (An empty array)</i><br /><br />
309
310	<a name="chart.tooltips.event"></a>
311	<b>chart.tooltips.event</b><br />
312	This is the event that triggers the tooltips. It can be either <i>onclick</i> or <i>onmousemove</i>.<br />
313	<i>Default: onclick</i><br /><br />
314
315	<a name="chart.tooltips.effect"></a>
316	<b>chart.tooltips.effect</b><br />
317	The tooltip effect used. Can be either <i>fade</i> or <i>expand</i>.<br />
318	<i>Default: fade</i><br /><br />
319
320	<a name="chart.tooltips.css.class"></a>
321	<b>chart.tooltips.css.class</b><br />
322	This is the name of the CSS class the chart uses.<br />
323	<i>Default: RGraph_tooltip</i><br /><br />
324
325	<a name="chart.tooltips.override"></a>
326	<b>chart.tooltips.override</b><br />
327	If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more
328	information on the <a href="tooltips.html">tooltips documentation page</a><br />
329	<i>Default: null</i><br /><br />
330
331	<a name="chart.contextmenu"></a>
332	<b>chart.contextmenu</b><br />
333	An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br />
334	<i>Default: [] (An empty array)</i><br /><br />
335
336	<a name="chart.annotatable"></a>
337	<b>chart.annotatable</b><br />
338	Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br />
339	<i>Default: false</i><br /><br />
340
341	<a name="chart.annotate.color"></a>
342	<b>chart.annotate.color</b><br />
343	If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br />
344	<i>Default: black</i><br /><br />
345
346
347
348	<a name="chart.resizable"></a>
349	<b>chart.resizable</b><br />
350	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 />
351	<i>Default: false</i><br /><br />
352
353
354	<a name="chart.resize.handle.background"></a>
355	<b>chart.resize.handle.background</b><br />
356	With this you can specify the background color for the resize handle. If you're adjusting the position of the
357	handle then you may need this to make the handle stand out more.<br />
358	<i>Default: null</i><br /><br />
359
360
361	<a name="chart.adjustable"></a>
362	<b>chart.adjustable</b><br />
363	Defaulting to false, this determines whether your rose chart will be adjustable (click the edge of a segment and drag to adjust it). <br /><i>Default: false</i><br /><br />
364	<a name="zoom"></a>
365	<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>
366	<b>chart.zoom.mode</b><br />
367	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 />
368	<a name="chart.zoom.factor"></a>
369	<b>chart.zoom.factor</b><br />
370	This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
371	<a name="chart.zoom.fade.in"></a>
372	<b>chart.zoom.fade.in</b><br />
373	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 />
374	<a name="chart.zoom.fade.out"></a>
375	<b>chart.zoom.fade.out</b><br />
376	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 />
377	<a name="chart.zoom.hdir"></a>
378	<b>chart.zoom.hdir</b><br />
379	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 />
380	<a name="chart.zoom.vdir"></a>
381	<b>chart.zoom.vdir</b><br />
382	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 />
383	<a name="chart.zoom.delay"></a>
384	<b>chart.zoom.delay</b><br />
385	The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
386	<a name="chart.zoom.frames"></a>
387	<b>chart.zoom.frames</b><br />
388	The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
389	<a name="chart.zoom.shadow"></a>
390	<b>chart.zoom.shadow</b><br />
391	Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
392	<a name="chart.zoom.thumbnail.width"></a>
393	<b>chart.zoom.thumbnail.width</b><br />
394	When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
395	<a name="chart.zoom.thumbnail.height"></a>
396	<b>chart.zoom.thumbnail.height</b><br />
397	When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
398	<a name="chart.zoom.background"></a>
399	<b>chart.zoom.background</b><br />
400	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 />
401
402	<a name="misc"></a>
403	<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>
404
405	<a name="chart.highlight.stroke"></a>
406	<b>chart.highlight.stroke</b><br />
407	If you use tooltips, this controls the colour of the highlight stroke.
408	<br /><i>Default: black</i><br /><br />
409
410	<a name="chart.highlight.fill"></a>
411	<b>chart.highlight.fill</b><br />
412	If you use tooltips, this controls the colour of the highlight fill.
413	<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
414
415	<a name="chart.variant"></a>
416	<b>chart.variant</b><br />
417	This option can be either <i>stacked</i> (the default) or <i>non-equi-angular</i>. Just because his option is set to
418	<i>stacked</i> does not automatically mean your chart is stacked. If you don't suppy the appropriate data you chart
419	may well appear as a regular Rose chart. Examples of appropriate data:
420
421	<p>
422	A regular Rose chart
423	</p>
424
425	<pre class="code">
426	myRose = new RGraph.Rose('myCanvas', [8,5,4,8,6,7,2,3,5,8]);
427	</pre>
428
429	<p>
430	A stacked Rose chart
431	</p>
432
433	<pre class="code">
434	myRose = new RGraph.Rose('myCanvas', [[2,6],[2,4],[1,5],[4,3],[7,5],[8,3],[4,5],[3,4],[2,6],[4,5]]);
435	</pre>
436
437	<p>
438	A non-equi-angular Rose chart
439	</p>
440
441	<pre class="code">
442	myRose = new RGraph.Rose('myCanvas', [[45,23],[45,23],[5,26],[78,4],[49,12],[49,21],[40,18],[48,12],[43,23],[45,12]]);
443	myRose.Set('chart.variant', 'non-equi-angular');
444	</pre>
445
446	<p>
447	It is important to note that with a non-equi-angular each "value" is actually an array consisting of two values,
448	as shown. The first value represents the magnitude of the segment (ie how far the segment extends outwards),
449	and the second value represents the size of the segment. The second value is relative to all the other second
450	values - it is not the absolute angle used. The angle is calculated for you.
451	</p>
452
453	<i>Default: stacked</i><br /><br />
454	</div>
455
456	<a name="available.methods"></a>
457	<br /> <br />
458	<h2>Methods</h2>
459
460	<b>obj.getSegment()</b><br /><br />
461
462	obj.getSegment() makes it easy to determine which segment of the Rose chart was clicked on. It provides:
463
464	<ul>
465	<li>Originating X coordinate</li>
466	<li>Originating Y coordinate</li>
467	<li>The starting radius of the segment</li>
468	<li>The ending radius of the segment</li>
469	<li>The starting angle (in degrees)</li>
470	<li>The ending angle (in degrees)</li>
471	<li>The numerical index of the segment</li>
472	</ul>
473
474	<pre class="code">
475	<script>
476	RGraph.Register(myGraph);
477
478	myGraph.canvas.onclick = function (e)
479	{
480	RGraph.FixEventObject(e);
481	RGraph.Redraw();
482
483	var canvas = e.target;
484	var context = canvas.getContext('2d');
485	var obj = canvas.__object__;
486	<span style="color: green">var segment = obj.getSegment(e);</span>
487
488	if (segment) {
489	context.fillStyle = 'rgba(255,255,255,0.5)';
490	context.beginPath();
491
492	// Angles are provided in degrees, so convert them to radians
493	segment[4] /= 57.29;
494	segment[5] /= 57.29;
495
496	context.moveTo(segment[0], segment[1]);
497	context.arc(segment[0], segment[1], segment[3], segment[4], segment[5], 0);
498	context.arc(segment[0], segment[1], segment[2], segment[5], segment[4], true);
499	context.stroke();
500	context.fill();
501
502	e.stopPropagation();
503	}
504	}
505
506	window.onclick = function (e)
507	{
508	RGraph.Redraw();
509	}
510	</script>
511	</pre>
512
513	<b>Important Note</b>
514
515	<p>
516	This method was formerly a common object method, called <i>RGraph.getSegment(e)</i>, but has now (6th March 2011) been
517	moved to be part of the Rose chart object.
518	</p>
519
520	<a name="stacked"></a>
521	<br /> <br />
522	<h2>Stacked Rose charts</h2>
523	<p>
524	Rose charts can now be stacked, much like stacked Bar charts. For an example see the <a href="../examples/rose.html">Rose
525	chart example page</a>. The data should be supplied in the same format as a stacked Bar chart:
526	</p>
527
528	<pre class="code">
529	myRose = new RGraph.Rose('myCanvas', [[4,6,2],[8,4,7],[4,3,6],[1,5,6]]);
530	</pre>
531
532	<a name="non-equi-angular"></a>
533	<br /> <br />
534	<h2>Non-equi-angular Rose charts</h2>
535	<p>
536	Rose charts can be displayed in a <i>non-equi-angular</i> mode. For an example see the
537	<a href="../examples/rose.html">Rose chart example page</a>. Instead of a plain array of values (as with a regular
538	Rose chart), each data point should itself be a two element array consisting of the magnitude value and also a relative
539	circular size. This second value is not the actual degrees used - these are calculated. For example:
540	</p>
541
542	<pre class="code">
543	<script>
544	myRose = new RGraph.Rose('myCanvas', [[47,6],[48,2],[40,4],[43,5],[45,6]]);
545	myRose.Set('chart.variant', 'non-equi-angular');
546	myRose.Draw();
547	</script>
548	</pre>
549
550
551	</body>
552	</html>

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

Download in other formats: