Context Navigation

source: Dev/branches/Cartis/Tiles preview/js/RGraph/docs/line.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: 46.3 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 - line charts documentation</title>
22
23	<meta name="keywords" content="rgraph html5 canvas docs line charts" />
24	<meta name="description" content="RGraph: Javascript charts and graph library - Documentation about Line 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	<!-- Social networking buttons -->
49	<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
50	<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>
51	<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>
52	</div>
53
54	<script>
55	// Opera fix
56	if (navigator.userAgent.indexOf('Opera') == -1) {
57	document.getElementById("social_icons").style.position = 'fixed';
58	}
59	</script>
60	<!-- Social networking buttons -->
61
62	<div id="breadcrumb">
63	<a href="../index.html">RGraph: Javascript charts and graph library</a>
64	>
65	<a href="index.html">Documentation</a>
66	>
67	Line charts
68	</div>
69
70	<h1>RGraph: <span>Javascript charts and graph library</span> - Line charts documentation</h1>
71
72	<script>
73	if (RGraph.isIE8()) {
74	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>');
75	}
76	</script>
77
78	<p>
79	Line charts, along with Bar charts, are probably the most configurable of all the charts available.
80	</p>
81
82	<p>
83	The example file is <a href="../examples/line.html">here</a>.
84	</p>
85
86	<ul>
87	<li><a href="#available.properties">Properties</a></li>
88	<li><a href="#available.methods">Methods</a></li>
89	<li><a href="#combining.line.bar">Combining the Line and Bar charts</a></li>
90	<li><a href="#alternative.colors">Alternative colors</a></li>
91	<li><a href="#filled.accumulative">Accumulative filled Line charts</a></li>
92	<li><a href="#custom.tickmarks">Custom tickmarks</a></li>
93	<li><a href="#coords2">The coords2 array</a></li>
94	</ul>
95
96	<pre class="code">
97	<script>
98	window.onload = function ()
99	{
100	var data = [10,4,17,50,25,19,20,25,30,29,30,29];
101
102	var line = new RGraph.Line("myLine", data);
103	line.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
104	line.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
105	line.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
106	line.Set('chart.colors', ['rgba(255,0,0,1)']);
107	line.Set('chart.linewidth', 2);
108	line.Set('chart.filled', true);
109	line.Set('chart.hmargin', 5);
110	line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
111	line.Set('chart.gutter.left', 40);
112	line.Draw();
113	}
114	</script>
115	</pre>
116
117	<a name="available.properties"></a>
118	<h2>Properties</h2>
119
120	<p>
121	You can use these properties to control how the Line chart apears. You can set them by using the Set() method. Eg:
122	</p>
123
124	<p>
125	<b>myLine.Set('name', 'value');</b>
126	</p>
127
128	<ul>
129	<li><a href="#background">Background</a></li>
130	<li><a href="#labels and text">Labels and text</a></li>
131	<li><a href="#margins">Margins</a></li><li><a href="#colors">Colors</a></li>
132	<li><a href="#shadow">Shadow</a></li>
133	<li><a href="#interactive features">Interactive features</a></li>
134	<li><a href="#titles">Titles</a></li><li><a href="#key">Key</a></li>
135	<li><a href="#scale">Scale</a></li>
136	<li><a href="#axis properties">Axis properties</a></li>
137	<li><a href="#zoom">Zoom</a></li><li><a href="#miscellaneous">Miscellaneous</a>
138	</li>
139	</ul>
140
141
142	<a name="background"></a>
143	<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>
144	<b>chart.background.barcolor1</b><br />
145	The color of the background bars (1 of 2).<br /><i>Default: rgba(0,0,0,0)</i><br /><br />
146	<a name="chart.background.barcolor2"></a>
147	<b>chart.background.barcolor2</b><br />
148	The color of the background bars (2 of 2).<br /><i>Default: rgba(0,0,0,0)</i><br /><br />
149	<a name="chart.background.grid"></a>
150	<b>chart.background.grid</b><br />
151	Whether to show the background grid or not.<br /><i>Default: true</i><br /><br />
152	<a name="chart.background.grid.color"></a>
153	<b>chart.background.grid.color</b><br />
154	The color of the background grid.<br /><i>Default: #eee</i><br /><br />
155	<a name="chart.background.hbars"></a>
156	<b>chart.background.hbars</b><br />
157	An array of information stipulating horizontal colored bars. You can use these to indicate limits. Eg: <i>myLine.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 />
158	<a name="chart.background.grid.hsize"></a>
159	<b>chart.background.grid.hsize</b><br />
160	The horizontal size of the grid.<br /><i>Default: 25</i><br /><br />
161	<a name="chart.background.grid.vsize"></a>
162	<b>chart.background.grid.vsize</b><br />
163	The vertical size of the grid.<br /><i>Default: 25</i><br /><br />
164	<a name="chart.background.grid.width"></a>
165	<b>chart.background.grid.width</b><br />
166	The width of the background grid.<br /><i>Default: 1</i><br /><br />
167	<a name="chart.background.grid.border"></a>
168	<b>chart.background.grid.border</b><br />
169	Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br />
170	<a name="chart.background.grid.hlines"></a>
171	<b>chart.background.grid.hlines</b><br />
172	Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br />
173	<a name="chart.background.grid.vlines"></a>
174	<b>chart.background.grid.vlines</b><br />
175	Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br />
176
177	<a name="chart.background.grid.autofit"></a>
178	<b>chart.background.grid.autofit</b><br />
179	Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many
180	horizontal and vertical lines you want.<br />
181	<i>Default: false</i><br /><br />
182
183	<a name="chart.background.grid.autofit.numhlines"></a>
184	<b>chart.background.grid.autofit.numhlines</b><br />
185	When using autofit this allows you to specify how many horizontal grid lines you want. <br />
186	<i>Default: 7</i><br /><br />
187
188	<a name="chart.background.grid.autofit.numvlines"></a>
189	<b>chart.background.grid.autofit.numvlines</b><br />
190	When using autofit this allows you to specify how many vertical grid lines you want. <br />
191	<i>Default: 20</i><br /><br />
192
193	<a name="chart.background.grid.autofit.align"></a>
194	<b>chart.background.grid.autofit.align</b><br />
195	If you want to have your grid lines line up with the labels (both X and Y axes), you can set this to true and RGraph will
196	attempt to make the grid lines line up. If you have a <i>chart.hmargin</i> set then the alignment will be thrown out.<br />
197	<i>Default: false</i><br /><br />
198
199	<a name="chart.background.image"></a>
200	<b>chart.background.image</b><br />
201	If you want to specify a background image to use on your chart, specify it with this property.<br />
202	<i>Default: null</i><br /><br />
203
204	<a name="chart.backdrop"></a>
205	<b>chart.backdrop</b><br />
206	When enabled this specifies that the line(s) will have a backdrop effect. You can control the transparency with the other backdrop settings).<br /><i>Default: false</i><br /><br />
207	<a name="chart.backdrop.size"></a>
208	<b>chart.backdrop.size</b><br />
209	This controls the size/extent of the backdrop effect.<br /><i>Default: 30</i><br /><br />
210	<a name="chart.backdrop.alpha"></a>
211	<b>chart.backdrop.alpha</b><br />
212	This controls how much transparency the backdrop effect has. It can go from 0 - 1.<br /><i>Default: 0.2</i><br /><br />
213	<a name="labels and text"></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">Labels and text</h3>
215
216	<a name="chart.labels.above"></a>
217	<b>chart.labels.above</b><br />
218	Whether the values are shown in labels drawn above the line.<br />
219	<i>Default: false</i><br /><br />
220
221	<a name="chart.labels.above.size"></a>
222	<b>chart.labels.above.size</b><br />
223	The size of the labels which are drawn above the line.<br />
224	<i>Default: 8</i><br /><br />
225
226	<a name="chart.labels"></a>
227	<b>chart.labels</b><br />
228	An array of the X labels for the chart. <br />
229	<i>Default: [] (An empty array)</i><br /><br />
230
231	<a name="chart.labels.ingraph"></a>
232	<b>chart.labels.ingraph</b><br />
233	An array of labels for the chart which are drawn "inside" the chart. 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 />
234	<a name="chart.ylabels"></a>
235	<b>chart.ylabels</b><br />
236	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 />
237
238	<a name="chart.ylabels.invert"></a>
239	<b>chart.ylabels.invert</b><br />
240	Reverses the Y axis so that 0 is at the top, instead of the bottom.<br />
241	<i>Default: false</i><br /><br />
242
243	<a name="chart.ylabels.count"></a>
244	<b>chart.ylabels.count</b><br />
245	A value (<i>1, 3, 5 or 10</i>) that controls how many Y labels there are. <br />
246	<i>Default: 5</i><br /><br />
247
248	<a name="chart.ylabels.inside"></a>
249	<b>chart.ylabels.inside</b><br />
250	This controls whether the Y labels are drawn inside the Y axis or not. If your labels are large, this may help.<br /><i>Default: false</i><br /><br />
251	<a name="chart.ylabels.inside.color"></a>
252	<b>chart.ylabels.inside.color</b><br />
253	If the Y labels are to be drawn inside the Y axis, this is used as the background color.<br />
254	<i>Default: rgba(255,255,255,0.5)</i><br /><br />
255
256	<a name="chart.ylabels.specific"></a>
257	<b>chart.ylabels.specific</b><br />
258	You can use this option to give your own Y labels (eg ['Low', 'Medium', 'High'].<br />
259	<i>Default: null</i><br /><br />
260
261	<a name="chart.xlabels.inside"></a>
262	<b>chart.xlabels.inside</b><br />
263	This controls whether the X labels are drawn inside the X axis or not. By using this you can significantly
264	reduce the size of the gutter needed. <br />
265	<i>Default: false</i><br /><br />
266
267	<a name="chart.xlabels.inside.color"></a>
268	<b>chart.xlabels.inside.color</b><br />
269	If the X labels are to be drawn inside the X axis, this is used as the background color.<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
270	<a name="chart.text.size"></a>
271	<b>chart.text.size</b><br />
272	The size of the text (in points).<br /><i>Default: 10</i><br /><br />
273	<a name="chart.text.angle"></a>
274	<b>chart.text.angle</b><br />
275	The angle of the horizontal text labels (at the bottom of the chart). Previously this could be 0, 45 or 90, but now (31st July 2010) this can be any angle.<br /><i>Default: 0 (Horizontal)</i><br /><br />
276	<a name="chart.text.font"></a>
277	<b>chart.text.font</b><br />
278	The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
279	<a name="chart.text.color"></a>
280	<b>chart.text.color</b><br />
281	The color of the labels. <br /><i>Default: black</i><br /><br />
282
283	<a name="margins"></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">Margins</h3>
285
286
287
288	<a name="chart.gutter.left"></a>
289	<b>chart.gutter.left</b><br />
290	The left gutter of the chart, (the gutter is where the labels and title are)).<br />
291	<i>Default: 25</i><br /><br />
292
293	<a name="chart.gutter.right"></a>
294	<b>chart.gutter.right</b><br />
295	The right gutter of the chart, (the gutter is where the labels and title are).<br />
296	<i>Default: 25</i><br /><br />
297
298	<a name="chart.gutter.top"></a>
299	<b>chart.gutter.top</b><br />
300	The top gutter of the chart, (the gutter is where the labels and title are).<br />
301	<i>Default: 25</i><br /><br />
302
303	<a name="chart.gutter.bottom"></a>
304	<b>chart.gutter.bottom</b><br />
305	The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
306	<i>Default: 25</i><br /><br />
307
308
309	<a name="chart.hmargin"></a>
310	<b>chart.hmargin</b><br />
311	The size of the horizontal margin. This is on the inside of the axes.<br /><i>Default: 0</i><br /><br />
312	<a name="colors"></a>
313	<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>
314	<b>chart.colors</b><br />
315	An array of line colors.<br /><i>Default: ['#f00', '#0f0', '', '#00f', '#f0f', '#ff0', '#0ff'] 9</i><br /><br />
316	<a name="chart.colors.alternate"></a>
317	<b>chart.colors.alternate</b><br />
318	Set this to true if you want your line color(s) to be alternated. <a href="#note.colors">See note</a><br /><i>Default: false</i><br /><br />
319	<a name="chart.fillstyle"></a>
320	<b>chart.fillstyle</b><br />
321	A single color or an array of colors that filled line charts will use.<br /><br /><b>Important:</b> This used to be a string, and still can be, but can now also be an array.<br /><i>Default: null</i><br /><br />
322
323	<a name="chart.filled"></a>
324	<b>chart.filled</b><br />
325	Whether the area under the line is filled or not. This looks best when there is no horizontal
326	margin.<br /><br />
327
328	<b>Note:</b> When showing multiple lines the values are additive by default. This means that if you have two lines
329	they will be "stacked" on top of each other. If this is not the desired behaviour then you can set the option
330	below to false.<br />
331	<i>Default: false</i><br /><br />
332
333	<a name="chart.filled.accumulative"></a>
334	<b>chart.filled.accumulative</b><br />
335	When showing multiple filled lines the values are by default accumulative (ie added to each other). If this is not the
336	desired behaviour, then you can set this property to <i>false</i> to have them drawn "non-accumulatively".<br/><br/>
337
338	<b>Note:</b> If you use fully opaque colors in conjunction with this option set to false it's feasible that you
339	might not see one or more of the lines, or parts of the line. If you want to see all of the lines you should
340	leave this option set to its default <i>true</i> setting. You can see an example of this setting
341	<a href="line_filled.html">here</a>.
342
343	<br /><br />
344
345	<i>Default: true</i><br /><br />
346
347	<a name="chart.filled.range"></a>
348	<b>chart.filled.range</b><br />
349	This is useful for indicating a range. Exactly two datasets are required, with the space between them filled. This is useful for indicating a range.The <a href="../examples/line.html">line chart examples</a> page demonstrates this in action.<br /><i>Default: false</i><br /><br />
350	<a name="shadow"></a>
351	<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>
352	<b>chart.shadow</b><br />
353	If true a shadow will be applied to the line.<br /><i>Default: false</i><br /><br />
354	<a name="chart.shadow.color"></a>
355	<b>chart.shadow.color</b><br />
356	The color of the shadow. As well as a single color definition, this can also be an array of colors. This means that if you have multiple lines on your chart, each can have a different shadow color. <br /><i>Default: rgba(0,0,0,0.5)</i><br /><br />
357	<a name="chart.shadow.offsetx"></a>
358	<b>chart.shadow.offsetx</b><br />
359	The X offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br />
360	<a name="chart.shadow.offsety"></a>
361	<b>chart.shadow.offsety</b><br />
362	The Y offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br />
363	<a name="chart.shadow.blur"></a>
364	<b>chart.shadow.blur</b><br />
365	The severity of the shadow blurring effect.<br /><i>Default: 3</i><br /><br />
366	<a name="interactive features"></a>
367	<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>
368	<b>chart.tooltips</b><br />
369	These are tooltips for the line(s). It should be an array of tooltips. If you have multiple lines, simply pass multiple arrays to the Set() method. <br /><i>Default: [] (An empty array)</i><br /><br />
370	<a name="chart.tooltips.effect"></a>
371	<b>chart.tooltips.effect</b><br />
372	The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
373
374	<a name="chart.tooltips.css.class"></a>
375	<b>chart.tooltips.css.class</b><br />
376	This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br />
377	<a name="chart.tooltips.override"></a>
378	<b>chart.tooltips.override</b><br />
379	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 />
380	<a name="chart.tooltips.highlight"></a>
381	<b>chart.tooltips.highlight</b><br />
382	If you don't want/need the chart to be highlighted and thus avoid redrawing, (eg When <a href="combine.html">combining charts</a>), then set this to false.<br /><i>Default: true</i><br /><br />
383	<a name="chart.crosshairs"></a>
384	<b>chart.crosshairs</b><br />
385	If true, you will get a crosshair centering on the current mouse position.<br /><i>Default: false</i><br /><br />
386	<a name="chart.crosshairs.linewidth"></a>
387	<b>chart.crosshairs.linewidth</b><br />
388	This controls the linewidth of the crosshairs.<br /><i>Default: 1</i><br /><br />
389	<a name="chart.crosshairs.color"></a>
390	<b>chart.crosshairs.color</b><br />
391	The color of the crosshairs.<br /><i>Default: #333</i><br /><br />
392	<a name="chart.contextmenu"></a>
393	<b>chart.contextmenu</b><br />
394	An array of context menu items. Unlike the bar chart, you CAN have context menus at the same time as tooltips. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br />
395	<a name="chart.annotatable"></a>
396	<b>chart.annotatable</b><br />
397	Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
398	<a name="chart.annotate.color"></a>
399	<b>chart.annotate.color</b><br />
400	If you do not allow the use of the palette, then this will be the only color allowed for annotations.<br /><i>Default: black</i><br /><br />
401
402
403	<a name="chart.resizable"></a>
404	<b>chart.resizable</b><br />
405	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 />
406	<i>Default: false</i><br /><br />
407
408
409	<a name="chart.resize.handle.background"></a>
410	<b>chart.resize.handle.background</b><br />
411	With this you can specify the background color for the resize handle. If you're adjusting the position of the
412	handle then you may need this to make the handle stand out more.<br />
413	<i>Default: null</i><br /><br />
414
415
416	<a name="chart.adjustable"></a>
417	<b>chart.adjustable</b><br />
418	Defaulting to false, this determines whether your chart will be adjustable (click a point and drag it). <br /><i>Default: false</i><br /><br />
419	<a name="titles"></a>
420	<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>
421	<b>chart.title</b><br />
422	The title of the chart.<br /><i>Default: none</i><br /><br />
423
424	<a name="chart.title.background"></a>
425	<b>chart.title.background</b><br />
426	The background color (if any) for the title.<br />
427	<i>Default: null</i><br /><br />
428
429	<a name="chart.title.vpos"></a>
430	<b>chart.title.vpos</b><br />
431	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 />
432	<a name="chart.title.color"></a>
433	<b>chart.title.color</b><br />
434	The color of the title.<br /> <i>Default: black</i><br /><br />
435	<a name="chart.title.xaxis"></a>
436	<b>chart.title.xaxis</b><br />
437	This allows to specify a title for the X axis.<br /><i>Default: none</i><br /><br />
438	<a name="chart.title.yaxis"></a>
439	<b>chart.title.yaxis</b><br />
440	This allows to specify a title for the Y axis.<br /><i>Default: none</i><br /><br />
441	<a name="chart.title.xaxis.pos"></a>
442	<b>chart.title.xaxis.pos</b><br />
443	This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br />
444	<a name="chart.title.yaxis.pos"></a>
445	<b>chart.title.yaxis.pos</b><br />
446	This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.25</i><br /><br />
447
448	<a name="chart.title.yaxis.position"></a>
449	<b>chart.title.yaxis.align</b><br />
450	Instead of using the option above you can instead use this option, specifying <i>left</i> or <i>right</i>.<br />
451	<i>Default: left</i><br /><br />
452
453
454
455	<a name="key"></a>
456	<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>
457
458	<a name="chart.key"></a>
459	<b>chart.key</b><br />
460	An array of key information. <br />
461	<i>Default: [] (An empty array)</i><br /><br />
462
463	<a name="chart.key.background"></a>
464	<b>chart.key.background</b><br />
465	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>
466	<i>Default: white</i><br /><br />
467
468	<a name="chart.key.halign"></a>
469	<b>chart.key.halign</b><br />
470	Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
471	aligned <i>left</i> or <i>right</i>. By default the key is positioned on the opposite side to the Y axis.<br />
472	<i>Default: null</i><br /><br />
473
474	<a name="chart.key.position"></a>
475	<b>chart.key.position</b><br />
476	Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
477	<i>Default: graph</i><br /><br />
478
479	<b>chart.key.position.x</b><br />
480	This allows you to specify a specific X coordinate for the key.<br />
481	<i>Default: null</i><br /><br />
482
483	<b>chart.key.position.y</b><br />
484	This allows you to specify a specific Y coordinate for the key.<br />
485	<i>Default: null</i><br /><br />
486
487	<b>chart.key.position.gutter.boxed</b><br />
488	If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
489	<i>Default: true</i><br /><br />
490
491	<a name="chart.key.shadow"></a>
492	<b>chart.key.shadow</b><br />
493	Whether a small drop shadow is applied to the key.<br />
494	<i>Default: false</i><br /><br />
495
496	<a name="chart.key.shadow.color"></a>
497	<b>chart.key.shadow.color</b><br />
498	The color of the shadow.<br />
499	<i>Default: #666</i><br /><br />
500
501	<a name="chart.key.shadow.blur"></a>
502	<b>chart.key.shadow.blur</b><br />
503	The extent of the blurring effect used on the shadow.<br />
504	<i>Default: 3</i><br /><br />
505
506	<a name="chart.key.shadow.offsetx"></a>
507	<b>chart.key.shadow.offsetx</b><br />
508	The X offset of the shadow.<br />
509	<i>Default: 2</i><br /><br />
510
511	<a name="chart.key.shadow.offsety"></a>
512	<b>chart.key.shadow.offsety</b><br />
513	The Y offset of the shadow.<br />
514	<i>Default: 2</i><br /><br />
515
516	<a name="chart.key.rounded"></a>
517	<b>chart.key.rounded</b><br />
518	This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
519	<i>Default: false</i><br /><br />
520
521	<a name="chart.key.color.shape"></a>
522	<b>chart.key.color.shape</b><br />
523	This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
524	<i>Default: square</i><br /><br />
525
526	<a name="chart.key.linewidth"></a>
527	<b>chart.key.linewidth</b><br />
528	The line width of the surrounding border on the key.<br />
529	<i>Default: 1</i><br /><br />
530
531	<a name="chart.key.interactive"></a>
532	<b>chart.key.interactive</b><br />
533	The Line chart supports interactive keys - so you can click on a key element and RGraph will highlight
534	the appropriate line, whilst fading the rest of the chart.<br />
535	<i>Default: false</i><br /><br />
536
537	<a name="scale"></a>
538	<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>
539
540	<a name="chart.scale.formatter"></a>
541	<b>chart.scale.formatter</b><br />
542	To allow thoroughly custom formats of numbers in the scale, you can use this option to
543	specify a function that is used by RGraph to format numbers. This function should
544	handle ALL of the formatting. Eg:<br /><br />
545	<pre class="code">
546	function myFormatter(obj, num)
547	{
548	return num + 'F'; // An example of formatting
549	}
550	myGraph.Set('chart.scale.formatter', myFormatter);
551	</pre>
552	<br /><i>Default: null</i><br /><br />
553
554	<a name="chart.units.post"></a>
555	<b>chart.units.post</b><br />
556	The units (if any) that the Y axis is measured in (gets appended to the number)<br /><i>Default: none</i><br /><br />
557	<a name="chart.units.pre"></a>
558	<b>chart.units.pre</b><br />
559	The units (if any) that the Y axis is measured in (gets preppended to the number)<br /><i>Default: none</i><br /><br />
560	<a name="chart.scale.decimals"></a>
561	<b>chart.scale.decimals</b><br />
562	Determines the precision of the numbers used as the scale.<br /><i>Default: 0</i><br /><br />
563	<a name="chart.scale.point"></a>
564	<b>chart.scale.point</b><br />
565	The character used as the decimal point.<br /><i>Default: .</i><br /><br />
566
567	<a name="chart.scale.thousand"></a>
568	<b>chart.scale.thousand</b><br />
569	The character used as the thousand separator<br /><i>Default: ,</i><br /><br />
570
571	<a name="chart.scale.round"></a>
572	<b>chart.scale.round</b><br />
573	Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br />
574	<i>Default: null</i><br /><br />
575
576	<a name="chart.ymin"></a>
577	<b>chart.ymin</b><br />
578	The optional minimum Y scale value. If not specified then it will be zero.<br /><i>Default: null</i><br /><br />
579	<a name="chart.ymax"></a>
580
581	<b>chart.ymax</b><br />
582	The optional maximum Y scale value. If not specified then it will be calculated.<br />
583	<i>Default: null (It's calculated)</i><br /><br />
584
585	<b>chart.outofbounds</b><br />
586	Normally, out-of-bounds values are not drawn. By setting this to <i>true</i> you can change this behaviour.<br />
587	<i>Default: false</i><br /><br />
588
589	<a name="axis properties"></a>
590	<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.xticks"></a>
591	<b>chart.xticks</b><br />
592	The number of X tickmarks.<br /><i>Default: null (linked to number of datapoints)</i><br /><br />
593	<a name="chart.ticksize"></a>
594	<b>chart.ticksize</b><br />
595	The size of the tick marks. This only affects certain styles of tickmarks.<br /><i>Default: 3</i><br /><br />
596	<a name="chart.tickdirection"></a>
597	<b>chart.tickdirection</b><br />
598	Whether the ticks are above or below the axis.<br /><i>Default: -1 (-1 is below, 1 is above)</i><br /><br />
599	<a name="chart.axis.color"></a>
600	<b>chart.axis.color</b><br />
601	The color of the axes.<br /><i>Default: black</i><br /><br />
602	<a name="chart.xaxispos"></a>
603	<b>chart.xaxispos</b><br />
604	The position of the X axis. It can be either <i>bottom</i> or <i>center</i>.<br /><i>Default: bottom</i><br /><br />
605
606	<a name="chart.yaxispos"></a>
607	<b>chart.yaxispos</b><br />
608	Specifies the Y axis position. Can be <i>left</i> or <i>right</i>.<br /><i>Default: left</i><br /><br />
609
610	<a name="chart.noaxes"></a>
611	<b>chart.noaxes</b><br />
612	Whether the axes are drawn<br />
613	<i>Default: false (the axes ARE drawn)</i><br /><br />
614
615	<a name="chart.axesontop"></a>
616	<b>chart.axesontop</b><br />
617	A minor option, this sets the axes to be redrawn after the chart has been drawn. This is only useful in a certain
618	set of circumstances - the chart is filled and the line width is small.<br />
619	<i>Default: false</i><br /><br />
620
621	<a name="chart.noendxtick"></a>
622	<b>chart.noendxtick</b><br />
623	When you're combining the Bar and Line charts, you may want to use this property to stop the end X tick from
624	being drawn.<br />
625	<i>Default: false (the end tick IS drawn)</i><br /><br />
626
627	<a name="zoom"></a>
628	<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>
629	<b>chart.zoom.mode</b><br />
630	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 />
631	<a name="chart.zoom.factor"></a>
632	<b>chart.zoom.factor</b><br />
633	This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
634	<a name="chart.zoom.fade.in"></a>
635	<b>chart.zoom.fade.in</b><br />
636	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 />
637	<a name="chart.zoom.fade.out"></a>
638	<b>chart.zoom.fade.out</b><br />
639	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 />
640	<a name="chart.zoom.hdir"></a>
641	<b>chart.zoom.hdir</b><br />
642	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 />
643	<a name="chart.zoom.vdir"></a>
644	<b>chart.zoom.vdir</b><br />
645	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 />
646	<a name="chart.zoom.delay"></a>
647	<b>chart.zoom.delay</b><br />
648	The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
649	<a name="chart.zoom.frames"></a>
650	<b>chart.zoom.frames</b><br />
651	The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
652	<a name="chart.zoom.shadow"></a>
653	<b>chart.zoom.shadow</b><br />
654	Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
655	<a name="chart.zoom.thumbnail.width"></a>
656	<b>chart.zoom.thumbnail.width</b><br />
657	When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
658	<a name="chart.zoom.thumbnail.height"></a>
659	<b>chart.zoom.thumbnail.height</b><br />
660	When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
661	<a name="chart.zoom.background"></a>
662	<b>chart.zoom.background</b><br />
663	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 />
664	<a name="miscellaneous"></a>
665	<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>
666
667	<a name="chart.tickmarks"></a>
668	<b>chart.tickmarks</b><br />
669	What kind of tickmarks to use on the chart. This can be:<ul><li>dot</li><li>circle</li><li>filledcircle</li><li>endcircle</li><li>square</li><li>endsquare</li><li>filledsquare</li><li>filledendsquare</li><li>tick</li><li>halftick</li><li>endtick</li><li>cross</li><li>borderedcircle (same as dot)</li><li>arrow</li><li>filledarrow</li></ul><p>Note that "arrow" and "filledarrow" look better with a thinner (1 or 2) linewidth setting. Also note that now (10th August 2010) as well as a string, this can be an array of different tickmark styles.<br />
670	<i>Default: null</i><br /><br />
671
672	<a name="chart.tickmarks.dot.color"></a>
673	<b>chart.tickmarks.dot.color</b><br />
674	This is the color of the BORDER around the dot/borderedcircle style tickmarks. <br />
675	<i>Default: #fff</i><br /><br />
676
677	<a name="chart.tickmarks.linewidth"></a>
678	<b>chart.tickmarks.linewidth</b><br />
679	This is the width of the line used when drawing the tickmarks. By default this is the same as the chart.linewidth setting.<br />
680	<i>Default: null</i><br /><br />
681
682	<a name="chart.stepped"></a>
683	<b>chart.stepped</b><br />
684	Draws the line as stepped. Useful for showing stock performance for example.<br /><i>Default: false</i><br /><br />
685	<a name="chart.linewidth"></a>
686	<b>chart.linewidth</b><br />
687	The width of the line (ie the actual line on the chart). Note: If your line is stepped and filled, and you don't want a trailing line indicating the last value, you can set this to zero.<br /><i>Default: 1</i><br /><br />
688	<a name="chart.variant"></a>
689	<b>chart.variant</b><br />
690	At present this can only be <i>3d</i>, and gives a small 3D effect.<br /><i>Default: null</i><br /><br />
691	</div><!-- /DOCS --><br /><br />
692
693	<b>chart.chromefix</b><br />
694	Since version 6, Chrome has had a shadow bug, which becomes apparent when you use shadow blurring. This value defaults
695	to true and means that RGraph will skirt the bug with a small fix.<br /><i>Default: true</i><br /><br />
696
697	<a name="chart.highlight.stroke"></a>
698	<b>chart.highlight.stroke</b><br />
699	If you use tooltips, this controls the colour of the highlight stroke.
700	<br /><i>Default: black</i><br /><br />
701
702	<a name="chart.highlight.fill"></a>
703	<b>chart.highlight.fill</b><br />
704	If you use tooltips, this controls the colour of the highlight fill.
705	<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
706
707	</div>
708	<br /><br />
709
710
711	<a name="available.methods"></a>
712	<h2>Methods</h2>
713
714	<a href="getPoint"></a>
715	<b>obj.getPoint(e)</b><br /><br />
716	This method makes it easier to get hold of which point on the Line chart has been hovered over. It returns an array of:
717
718	<ul>
719	<li>The chart object</li>
720	<li>The X coordinate</li>
721	<li>The Y coordinate</li>
722	<li>The numerical index of the point. This corresponds (for example) to the tooltips array, and the coordinates array</li>
723	</ul>
724
725	An example usage is:
726
727	<pre class="code">
728	<canvas id="cvs" width="600" height="300">[No canvas support]</canvas>
729
730	<script src="RGraph.common.core.js"></script>
731	<script src="RGraph.line.js"></script>
732
733	<script>
734	myGraph = new RGraph.Line('cvs', [10,4,2,4,1]);
735	myGraph.Set('chart.hmargin', 10);
736	myGraph.Set('chart.tickmarks', 'endcircle');
737	myGraph.Set('chart.labels', ['Fred','John','Kev','Lou','Pete']);
738	myGraph.Draw();
739
740
741	RGraph.Register(myGraph);
742
743	myGraph.canvas.onmousemove = function (e)
744	{
745	RGraph.FixEventObject(e);
746
747	var canvas = e.target;
748	var context = canvas.getContext('2d');
749	var obj = e.target.__object__;
750
751	// This is the new method which simplifies getting coordinates
752	var point = obj.getPoint(e);
753
754
755	if (point) {
756
757	canvas.style.cursor = 'pointer';
758
759	// Is this the same tooltip as the one (if any) that's already being shown
760	if (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ == point[3]) {
761	return;
762	}
763
764	// Start afresh
765	RGraph.Redraw();
766
767	// Show the tooltip
768	RGraph.Tooltip(canvas, obj.Get('chart.labels')[point[3]], e.pageX, e.pageY, point[3]);
769
770	// Highlight the point
771	context.strokeStyle = 'gray';
772	context.fillStyle = 'white';
773	context.beginPath();
774	context.moveTo(point[1], point[2]);
775	context.arc(point[1], point[2], 2, 0, 6.26, 0);
776	context.stroke();
777	context.fill();
778
779	return;
780	}
781
782	canvas.style.cursor = 'default';
783	}
784
785	window.onclick = function ()
786	{
787	RGraph.Redraw();
788	}
789	</script>
790	</pre>
791
792	<a name="combining.line.bar"></a>
793	<h2>Combining the Line and Bar charts</h2>
794
795	<p>
796	You can combine the Bar and Line charts with a bit of magic. It's actually quite easy to do. <a href="combine.html">Find out more here</a>.
797	In the same vein, you can have Y axes on both the left and right.
798	</p>
799
800
801	<a name="alternative.colors"></a>
802	<h2>Alternative colors</h2>
803
804	<p>
805	Instead of a string stipulating the color, each element of the colors array can itself be a two element array,
806	stipulating the up color, and the down color. To use alternating colors you must also stipulate the alternate property:
807	</p>
808
809
810	<pre class="code">
811	myLine.Set('chart.colors.alternate', true);
812	myLine.Set('chart.colors', ['red', ['blue', 'yellow'], 'green]);
813	</pre>
814
815	<a name="filled.accumulative"></a>
816	<h2>Accumulative filled Line charts</h2>
817
818	<p>
819	The default behaviour of filled Line charts is to "stack" the lines on top of each other. This allows them all
820	to be totally visible, no matter what (unless a line has a zero value of course). If this is not desired, then there is an
821	option (<i>chart.filled.accumulative</i> - true/false) to change this behaviour so the lines are plotted "as-is".
822	Keep in mind that if you set this option to false (ie the Lines are plotted as-is) it may be wiser to use
823	semi-transparent colors or some parts of data sets (or even entire data sets) may be hidden by others. There's a
824	comparison of the different modes <a href="line_filled.html">here</a>.
825	</p>
826
827	<a name="custom.tickmarks"></a>
828	<h2>Custom tickmarks</h2>
829	<p>
830	If none of the available tickmark styles are suitable, you can instead specify a function object that draws the tickmark,
831	enabling you to draw the tickmark yourself. For example:
832	</p>
833
834	<pre class="code">
835	<script>
836	line.Set('chart.tickmarks', myTick);
837
838	/**
839	* The function that is called once per tickmark, to draw it
840	*
841	* @param object obj The chart object
842	* @param array data The entire line data
843	* @param number value The individual points value
844	* @param number index The current index, in the data array
845	* @param number x The X coordinate
846	* @param number y The Y coordinate
847	* @param string color The color of the line
848	* @param number prevX The previous X coordinate
849	* @param number prevY The previous Y coordinate
850	*/
851	function myTick (obj, data, value, index, x, y, color, prevX, prevY)
852	{
853	// Draw your custom tick here
854	}
855	</script>
856	</pre>
857
858	<a name="coords2"></a>
859	<h2>The coords2 array</h2>
860
861	An alternative method of indexing the chart coordinates is available in <i>obj.coords2</i>. With this array, all of the first
862	lines coordinates are available in <i>obj.coords2[0]</i>, the second lines coordinates in <i>obj.coords2[1]</i> and so on.
863	</body>
864	</html>

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

Download in other formats: