Context Navigation

source: Dev/branches/Cartis/Tiles preview/js/RGraph/docs/rscatter.html @ 283

Last change on this file since 283 was 283, checked in by tjcschipper, 13 years ago

Cartis Mockup werkt!

W
I
N
N
I
N
G

File size: 18.7 KB

Line
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: Javascript charts and graph library - Radial scatter charts documentation</title>
21
22	<meta name="keywords" content="rgraph html5 canvas javascript charts docs radial scatter chart" />
23	<meta name="description" content="RGraph: Javascript charts and graph library - Documentation about Radial scatter charts" />
24
25	<meta property="og:title" content="RGraph: Javascript charts and graph library" />
26	<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
27	<meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
28
29	<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
30	<link rel="icon" type="image/png" href="/favicon.png">
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	Radial scatter charts
67	</div>
68
69	<h1>RGraph: <span>Javascript charts and graph library</span> - Radial scatter 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 Radial scatter chart is, as the name suggests, a circular variant of scatter charts.
79	</p>
80
81	<p>
82	The example file is <a href="../examples/rscatter.html">here</a>.
83	</p>
84
85	<pre class="code">
86	<script>
87	window.onload = function ()
88	{
89	var data = [
90	[15,53,'red'],
91	[45,63,null, 'The tooltip'],
92	[48,45,'green'],
93	[52,38],
94	[51,61]
95	];
96
97	var rscatter= new RGraph.Rscatter('myCanvas', data);
98	rscatter.Set('chart.labels', ['NE','E','SE','S','SW','W','NW','N']);
99	rscatter.Set('chart.gutter.left', 35);
100	rscatter.Set('chart.gutter.right', 35);
101	rscatter.Draw();
102	}
103	</script>
104	</pre>
105
106	<h2>Properties</h2>
107
108	<p>
109	You can use these properties to control how the chart appears. You can set them by using the Set() method. Eg:
110	</p>
111
112	<p>
113	<b>myRscatter.Set('name', 'value');</b>
114	</p>
115
116	<ul>
117	<li><a href="#margins">Margins</a></li>
118	<li><a href="#labels and text">Labels and text</a></li>
119	<li><a href="#titles">Titles</a></li>
120	<li><a href="#key">Key</a></li>
121	<li><a href="#scale">Scale</a></li>
122	<li><a href="#interactive features">Interactive features</a></li>
123	<li><a href="#zoom">Zoom</a></li>
124	</ul>
125
126	<a name="margins"></a>
127	<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>
128
129	<a name="chart.gutter.left"></a>
130	<b>chart.gutter.left</b><br />
131	The left gutter of the chart, (the gutter is where the labels and title are)).<br />
132	<i>Default: 25</i><br /><br />
133
134	<a name="chart.gutter.right"></a>
135	<b>chart.gutter.right</b><br />
136	The right gutter of the chart, (the gutter is where the labels and title are).<br />
137	<i>Default: 25</i><br /><br />
138
139	<a name="chart.gutter.top"></a>
140	<b>chart.gutter.top</b><br />
141	The top gutter of the chart, (the gutter is where the labels and title are).<br />
142	<i>Default: 25</i><br /><br />
143
144	<a name="chart.gutter.bottom"></a>
145	<b>chart.gutter.bottom</b><br />
146	The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
147	<i>Default: 25</i><br /><br />
148
149	<a name="labels and text"></a>
150	<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>
151	<b>chart.text.color</b><br />
152	The color of the labels. <br /><i>Default: black</i><br /><br />
153	<a name="chart.text.size"></a>
154	<b>chart.text.size</b><br />
155	The size (in points) of the labels. <br /><i>Default: 10</i><br /><br />
156	<a name="chart.text.font"></a>
157	<b>chart.text.font</b><br />
158	The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
159	<a name="chart.labels"></a>
160	<b>chart.labels</b><br />
161	The labels, if any, for the chart.<br /><i>Default: none</i><br /><br />
162	<a name="chart.labels.axes"></a>
163	<b>chart.labels.axes</b><br />
164	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 />
165	<a name="chart.labels.position"></a>
166	<b>chart.labels.position</b><br />
167	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 />
168	<a name="titles"></a>
169	<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>
170	<b>chart.title</b><br />
171	The title of the chart, if any. <br /><i>Default: null</i><br /><br />
172
173	<a name="chart.title.background"></a>
174	<b>chart.title.background</b><br />
175	The background color (if any) for the title.<br />
176	<i>Default: null</i><br /><br />
177
178	<a name="chart.title.color"></a>
179	<b>chart.title.color</b><br />
180	The color of the title.<br /> <i>Default: black</i><br /><br />
181	<a name="chart.title.hpos"></a>
182	<b>chart.title.hpos</b><br />
183	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 />
184	<a name="chart.title.vpos"></a>
185	<b>chart.title.vpos</b><br />
186	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 />
187
188
189
190
191
192	<a name="key"></a>
193	<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>
194
195	<a name="chart.key"></a>
196	<b>chart.key</b><br />
197	An array of key information. <br />
198	<i>Default: [] (An empty array)</i><br /><br />
199
200	<a name="chart.key.background"></a>
201	<b>chart.key.background</b><br />
202	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>
203	<i>Default: white</i><br /><br />
204
205	<a name="chart.key.halign"></a>
206	<b>chart.key.halign</b><br />
207	Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
208	aligned <i>left</i> or <i>right</i>.<br />
209	<i>Default: right</i><br /><br />
210
211	<a name="chart.key.position"></a>
212	<b>chart.key.position</b><br />
213	Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
214	<i>Default: graph</i><br /><br />
215
216	<b>chart.key.position.x</b><br />
217	This allows you to specify a specific X coordinate for the key.<br />
218	<i>Default: null</i><br /><br />
219
220	<b>chart.key.position.y</b><br />
221	This allows you to specify a specific Y coordinate for the key.<br />
222	<i>Default: null</i><br /><br />
223
224	<b>chart.key.position.gutter.boxed</b><br />
225	If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
226	<i>Default: true</i><br /><br />
227
228	<a name="chart.key.shadow"></a>
229	<b>chart.key.shadow</b><br />
230	Whether a small drop shadow is applied to the key.<br />
231	<i>Default: false</i><br /><br />
232
233	<a name="chart.key.shadow.color"></a>
234	<b>chart.key.shadow.color</b><br />
235	The color of the shadow.<br />
236	<i>Default: #666</i><br /><br />
237
238	<a name="chart.key.shadow.blur"></a>
239	<b>chart.key.shadow.blur</b><br />
240	The extent of the blurring effect used on the shadow.<br />
241	<i>Default: 3</i><br /><br />
242
243	<a name="chart.key.shadow.offsetx"></a>
244	<b>chart.key.shadow.offsetx</b><br />
245	The X offset of the shadow.<br />
246	<i>Default: 2</i><br /><br />
247
248	<a name="chart.key.shadow.offsety"></a>
249	<b>chart.key.shadow.offsety</b><br />
250	The Y offset of the shadow.<br />
251	<i>Default: 2</i><br /><br />
252
253	<b>chart.key.rounded</b><br />
254	This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
255	<i>Default: false</i><br /><br />
256
257	<b>chart.key.color.shape</b><br />
258	This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
259	<i>Default: square</i><br /><br />
260
261	<b>chart.key.linewidth</b><br />
262	The line width of the surrounding border on the key.<br />
263	<i>Default: 1</i><br /><br />
264
265
266
267	<a name="interactive features"></a>
268	<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>
269	<b>chart.contextmenu</b><br />
270	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 />
271	<a name="chart.tooltips.effect"></a>
272	<b>chart.tooltips.effect</b><br />
273	The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
274	<a name="chart.tooltips.event"></a>
275	<b>chart.tooltips.event</b><br />
276	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 />
277	<a name="chart.tooltips.css.class"></a>
278	<b>chart.tooltips.css.class</b><br />
279	This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br />
280	<a name="chart.tooltips.override"></a>
281	<b>chart.tooltips.override</b><br />
282	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 />
283	<a name="chart.annotatable"></a>
284	<b>chart.annotatable</b><br />
285	Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
286	<a name="chart.annotate.color"></a>
287	<b>chart.annotate.color</b><br />
288	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 />
289
290
291	<a name="chart.resizable"></a>
292	<b>chart.resizable</b><br />
293	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 />
294	<i>Default: false</i><br /><br />
295
296
297	<a name="chart.resize.handle.background"></a>
298	<b>chart.resize.handle.background</b><br />
299	With this you can specify the background color for the resize handle. If you're adjusting the position of the
300	handle then you may need this to make the handle stand out more.<br />
301	<i>Default: null</i><br /><br />
302
303	<a name="zoom"></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">Zoom</h3> <a name="chart.zoom.mode"></a>
305	<b>chart.zoom.mode</b><br />
306	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 />
307	<a name="chart.zoom.factor"></a>
308	<b>chart.zoom.factor</b><br />
309	This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
310	<a name="chart.zoom.fade.in"></a>
311	<b>chart.zoom.fade.in</b><br />
312	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 />
313	<a name="chart.zoom.fade.out"></a>
314	<b>chart.zoom.fade.out</b><br />
315	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 />
316	<a name="chart.zoom.hdir"></a>
317	<b>chart.zoom.hdir</b><br />
318	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 />
319	<a name="chart.zoom.vdir"></a>
320	<b>chart.zoom.vdir</b><br />
321	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 />
322	<a name="chart.zoom.delay"></a>
323	<b>chart.zoom.delay</b><br />
324	The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
325	<a name="chart.zoom.frames"></a>
326	<b>chart.zoom.frames</b><br />
327	The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
328	<a name="chart.zoom.shadow"></a>
329	<b>chart.zoom.shadow</b><br />
330	Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
331	<a name="chart.zoom.thumbnail.width"></a>
332	<b>chart.zoom.thumbnail.width</b><br />
333	When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
334	<a name="chart.zoom.thumbnail.height"></a>
335	<b>chart.zoom.thumbnail.height</b><br />
336	When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
337	<a name="chart.zoom.background"></a>
338	<b>chart.zoom.background</b><br />
339	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 />
340	</div><!-- /DOCS --><br /><br />
341
342	<br /><br />
343
344	</body>
345	</html>

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

Download in other formats: