Context Navigation

source: Dev/branches/Cartis/Tiles preview/js/RGraph/docs/meter.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: 20.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 - meter charts documentation</title>
22
23	<meta name="keywords" content="rgraph html5 canvas docs meter chart" />
24	<meta name="description" content="RGraph: Javascript charts and graph library - Documentation about Meter 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	Meter charts
68	</div>
69
70	<h1>RGraph: <span>Javascript charts and graph library</span> - Meter 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	These are Meter charts. Similar to half the Odometer. The difference is purely visual, but may well be more suited to
80	a control panel type application.
81	</p>
82
83	<p>
84	The example file is <a href="../examples/meter.html">here</a>.
85	</p>
86
87	<pre class="code">
88	<script>
89	window.onload = function ()
90	{
91	var meter = new RGraph.Meter('myCanvas', 50, 100, 60);
92	meter.Set('chart.contextmenu', [
93	['Show palette', RGraph.Showpalette],
94	['Clear annotations', function () {RGraph.Clear(meter.canvas); meter.Draw();}],
95	null,
96	['Cancel', function () {}]
97	]);
98	meter.Set('chart.annotatable', true);
99	meter.Set('chart.label.position', 'inside');
100	meter.Set('chart.title', 'A sample measurement');
101	meter.Set('chart.title.vpos', 0.5);
102	meter.Set('chart.units.post', 'k');
103	meter.Set('chart.red.start', 0);
104	meter.Set('chart.red.end', 3);
105	meterSet('chart.yellow.start', 3);
106	meter.Set('chart.yellow.end', 6);
107	meter.Set('chart.green.start', 6);
108	meter.Set('chart.green.end', 10);
109	meter.Draw();
110	}
111	</script>
112	</pre>
113	<h2>Properties</h2>
114
115	<p>
116	You can use these properties to control how the Meter apears. You can set them by using the Set() method. Eg:
117	</p>
118
119	<p>
120	<b>myMeter.Set('name', 'value');</b>
121	</p>
122
123	<ul>
124	<li><a href="#margins">Margins</a></li>
125	<li><a href="#colors">Colors</a></li>
126	<li><a href="#labels and text">Labels and text</a></li>
127	<li><a href="#titles">Titles</a></li>
128	<li><a href="#scale">Scale</a></li>
129	<li><a href="#interactive features">Interactive features</a></li>
130	<li><a href="#shadow">Shadow</a></li>
131	<li><a href="#zoom">Zoom</a></li>
132	<li><a href="#miscellaneous">Miscellaneous</a></li>
133	</ul>
134
135	<a name="margins"></a>
136	<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>
137
138
139
140	<a name="chart.gutter.left"></a>
141	<b>chart.gutter.left</b><br />
142	The left gutter of the chart, (the gutter is where the labels and title are)).<br />
143	<i>Default: 25</i><br /><br />
144
145	<a name="chart.gutter.right"></a>
146	<b>chart.gutter.right</b><br />
147	The right gutter of the chart, (the gutter is where the labels and title are).<br />
148	<i>Default: 25</i><br /><br />
149
150	<a name="chart.gutter.top"></a>
151	<b>chart.gutter.top</b><br />
152	The top gutter of the chart, (the gutter is where the labels and title are).<br />
153	<i>Default: 25</i><br /><br />
154
155	<a name="chart.gutter.bottom"></a>
156	<b>chart.gutter.bottom</b><br />
157	The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
158	<i>Default: 25</i><br /><br />
159
160	<a name="colors"></a>
161	<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.border.color"></a>
162	<b>chart.border.color</b><br />
163	The color of the outline (including tickmarks).<br /><i>Default: black</i><br /><br />
164	<a name="chart.green.start"></a>
165	<b>chart.green.start</b><br />
166	The value that the green area should begin at. <br /><i>Default: 35% of the maximum value</i><br /><br />
167	<a name="chart.green.end"></a>
168	<b>chart.green.end</b><br />
169	The value that the green area should end at. <br /><i>Default: The maximum value</i><br /><br />
170	<a name="chart.green.color"></a>
171	<b>chart.green.color</b><br />
172	The color of the green area, (can be any color).. <br /><i>Default: #207A20</i><br /><br />
173	<a name="chart.yellow.start"></a>
174	<b>chart.yellow.start</b><br />
175	The value that the yellow area should begin at. <br /><i>Default: 10% of the maximum value</i><br /><br />
176	<a name="chart.yellow.end"></a>
177	<b>chart.yellow.end</b><br />
178	The value that the yellow area should end at. <br /><i>Default: 35% of the maximum value</i><br /><br />
179	<a name="chart.green.color"></a>
180	<b>chart.green.color</b><br />
181	The color of the yellow area, (can be any color).. <br /><i>Default: #D0AC41</i><br /><br />
182	<a name="chart.red.start"></a>
183	<b>chart.red.start</b><br />
184	The value that the red area should begin at. <br /><i>Default: The minimum value</i><br /><br />
185	<a name="chart.red.end"></a>
186	<b>chart.red.end</b><br />
187	The value that the red area should end at. <br /><i>Default: 10% of the maximum value</i><br /><br />
188	<a name="chart.red.color"></a>
189	<b>chart.red.color</b><br />
190	The color of the red area, (can be any color).. <br /><i>Default: #9E1E1E</i><br /><br />
191	<a name="labels and text"></a>
192	<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>
193	<b>chart.text.color</b><br />
194	The color of the labels. <br /><i>Default: black</i><br /><br />
195	<a name="chart.text.size"></a>
196	<b>chart.text.size</b><br />
197	The size (in points) of the labels. <br /><i>Default: 10</i><br /><br />
198
199	<a name="chart.text.font"></a>
200	<b>chart.text.font</b><br />
201	The font used to render the text.<br />
202	<i>Default: Verdana</i><br /><br />
203
204	<a name="chart.value.text"></a>
205	<b>chart.value.text</b><br />
206	This option controls whether the value of the Meter is shown in text.<br />
207	<i>Default: false</i><br /><br />
208
209	<a name="chart.value.text.decimals"></a>
210	<b>chart.value.text.decimals</b><br />
211	The amount of decimals shown in the text label.<br />
212	<i>Default: 0</i><br /><br />
213
214	<a name="chart.value.text.units.pre"></a>
215	<b>chart.value.text.units.pre</b><br />
216	The units (before the value) shown in the text label.<br />
217	<i>Default: None (an empty string)</i><br /><br />
218
219	<a name="chart.value.text.units.post"></a>
220	<b>chart.value.text.units.post</b><br />
221	The units (after the value) shown in the text label.<br />
222	<i>Default: None (an empty string)</i><br /><br />
223
224	<a name="titles"></a>
225	<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>
226	<b>chart.title</b><br />
227	The title of the chart, if any. <br /><i>Default: null</i><br /><br />
228
229	<a name="chart.title.background"></a>
230	<b>chart.title.background</b><br />
231	The background color (if any) for the title.<br />
232	<i>Default: null</i><br /><br />
233
234	<a name="chart.title.color"></a>
235	<b>chart.title.color</b><br />
236	The color of the title.<br /> <i>Default: black</i><br /><br />
237	<a name="chart.title.hpos"></a>
238	<b>chart.title.hpos</b><br />
239	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 />
240	<a name="chart.title.vpos"></a>
241	<b>chart.title.vpos</b><br />
242	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 />
243
244	<a name="scale"></a>
245	<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>
246
247	<a name="chart.units.pre"></a>
248	<b>chart.units.pre</b><br />
249	The units that the labels are measured in. This string is displayed BEFORE the actual number, allowing you to
250	specify values such as "$50".<br />
251	<i>Default: none</i><br /><br />
252
253	<a name="chart.units.post"></a>
254	<b>chart.units.post</b><br />
255	The units that the labels are measured in. This string is displayed AFTER the actual number, allowing you to specify
256	values such as "50ms".<br />
257	<i>Default: none</i><br /><br />
258
259	<a name="chart.scale.decimals"></a>
260	<b>chart.scale.decimals</b><br />
261	The number of decimal places to display for the values.<br />
262	<i>Default: 0</i><br /><br />
263
264	<a name="interactive features"></a>
265	<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>
266	<b>chart.contextmenu</b><br />
267	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 />
268
269
270	<a name="chart.resizable"></a>
271	<b>chart.resizable</b><br />
272	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 />
273	<i>Default: false</i><br /><br />
274
275
276	<a name="chart.resize.handle.background"></a>
277	<b>chart.resize.handle.background</b><br />
278	With this you can specify the background color for the resize handle. If you're adjusting the position of the
279	handle then you may need this to make the handle stand out more.<br />
280	<i>Default: null</i><br /><br />
281
282
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 color allowed for annotations.<br /><i>Default: black</i><br /><br />
289	<a name="shadow"></a>
290	<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>
291	<b>chart.shadow</b><br />
292	If true a shadow will be applied to the meter.<br /><i>Default: false</i><br /><br />
293	<a name="chart.shadow.color"></a>
294	<b>chart.shadow.color</b><br />
295	The color of the shadow. <br /><i>Default: rgba(0,0,0,0.5)</i><br /><br />
296	<a name="chart.shadow.offsetx"></a>
297	<b>chart.shadow.offsetx</b><br />
298	The X offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br />
299	<a name="chart.shadow.offsety"></a>
300	<b>chart.shadow.offsety</b><br />
301	The Y offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br />
302	<a name="chart.shadow.blur"></a>
303	<b>chart.shadow.blur</b><br />
304	The severity of the shadow blurring effect.<br /><i>Default: 3</i><br /><br />
305	<a name="zoom"></a>
306	<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>
307	<b>chart.zoom.mode</b><br />
308	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 />
309	<a name="chart.zoom.factor"></a>
310	<b>chart.zoom.factor</b><br />
311	This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
312	<a name="chart.zoom.fade.in"></a>
313	<b>chart.zoom.fade.in</b><br />
314	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 />
315	<a name="chart.zoom.fade.out"></a>
316	<b>chart.zoom.fade.out</b><br />
317	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 />
318	<a name="chart.zoom.hdir"></a>
319	<b>chart.zoom.hdir</b><br />
320	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 />
321	<a name="chart.zoom.vdir"></a>
322	<b>chart.zoom.vdir</b><br />
323	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 />
324	<a name="chart.zoom.delay"></a>
325	<b>chart.zoom.delay</b><br />
326	The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
327	<a name="chart.zoom.frames"></a>
328	<b>chart.zoom.frames</b><br />
329	The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
330	<a name="chart.zoom.shadow"></a>
331	<b>chart.zoom.shadow</b><br />
332	Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
333	<a name="chart.zoom.thumbnail.width"></a>
334	<b>chart.zoom.thumbnail.width</b><br />
335	When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
336	<a name="chart.zoom.thumbnail.height"></a>
337	<b>chart.zoom.thumbnail.height</b><br />
338	When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
339	<a name="chart.zoom.background"></a>
340	<b>chart.zoom.background</b><br />
341	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 />
342
343	<a name="miscellaneous"></a>
344	<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>
345	<a name="chart.linewidth"></a>
346	<b>chart.linewidth</b><br />
347	The width of the outline of the Meter. <br /><i>Default: 2</i><br /><br />
348
349	<a name="chart.tickmarks.small.num"></a>
350	<b>chart.tickmarks.small.num</b><br />
351	This controls the number of small tickmarks.<br />
352	<i>Default: 100</i><br /><br />
353
354	<a name="chart.tickmarks.big.num"></a>
355	<b>chart.tickmarks.big.num</b><br />
356	This controls the number of large tickmarks.<br />
357	<i>Default: 10</i><br /><br />
358
359	<a name="chart.tickmarks.small.color"></a>
360	<b>chart.tickmarks.small.color</b><br />
361	This sets the color of the small tickmarks.<br />
362	<i>Default: #bbb</i><br /><br />
363
364	<a name="chart.tickmarks.big.color"></a>
365	<b>chart.tickmarks.big.color</b><br />
366	This sets the color of the large tickmarks.<br />
367	<i>Default: black</i><br /><br />
368	</div>
369
370	<br /><br />
371	</body>
372	</html>

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

Download in other formats: