Context Navigation

source: Dev/branches/rest-dojo-ui/Demo/RGraph/docs/hprogress.html @ 312

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

File size: 22.2 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 - horizontal progress bar documentation</title>
22	<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
23	<link rel="icon" type="image/png" href="../images/favicon.png">
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	<script>
30	var _gaq = _gaq \|\| [];
31	_gaq.push(['_setAccount', 'UA-54706-2']);
32	_gaq.push(['_trackPageview']);
33
34	(function() {
35	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
36	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
37	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
38	})();
39	</script>
40
41	</head>
42	<body>
43
44
45	<!-- Social networking buttons -->
46	<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
47	<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>
48	<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>
49	</div>
50
51	<script>
52	// Opera fix
53	if (navigator.userAgent.indexOf('Opera') == -1) {
54	document.getElementById("social_icons").style.position = 'fixed';
55	}
56	</script>
57	<!-- Social networking buttons -->
58
59	<div id="breadcrumb">
60	<a href="../index.html">RGraph: Javascript charts and graph library</a>
61	>
62	<a href="index.html">Documentation</a>
63	>
64	Horizontal Progress bar
65	</div>
66
67	<h1>RGraph: <span>Javascript charts and graph library</span> - Horizontal Progress bar documentation</h1>
68
69	<script>
70	if (RGraph.isIE8()) {
71	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>');
72	}
73	</script>
74
75	<p>
76	The example file is <a href="../examples/hprogress.html">here</a>.
77	</p>
78
79	<pre class="code">
80	<script>
81	window.onload = function ()
82	{
83	var myProgress = new RGraph.HProgess('myProgress', 78, 100);
84	myProgress.Set('chart.colors', ['red']);
85	myProgress.Draw();
86	}
87	</script>
88	</pre>
89
90	<h2>Properties</h2>
91
92	<p>
93	You can use these properties to control how the progress bar apears. You can set them by using the Set() method. Eg:
94	</p>
95
96	<p>
97	<b>myProgress.Set('name', 'value');</b>
98	</p>
99
100	<ul>
101	<li><a href="#chart configuration">Chart configuration</a></li>
102	<li><a href="#margins">Margins</a></li>
103	<li><a href="#colors">Colors</a></li>
104	<li><a href="#shadow">Shadow</a></li>
105	<li><a href="#labels and text">Labels and text</a></li>
106	<li><a href="#scale">Scale</a></li>
107	<li><a href="#titles">Titles</a></li>
108	<li><a href="#interactive features">Interactive features</a></li>
109	<li><a href="#zoom">Zoom</a></li>
110	<li><a href="#key">Key</a></li>
111	</ul>
112
113
114	<a name="chart configuration"></a>
115	<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">Chart configuration</h3>
116
117
118	<a name="chart.tickmarks"></a>
119	<b>chart.tickmarks</b><br />
120	Whether the tickmarks are drawn. <br />
121	<i>Default: true</i><br /><br />
122
123	<a name="chart.tickmarks.color"></a>
124	<b>chart.tickmarks.color</b><br />
125	The color used for tickmarks.<br /><i>Default: black</i><br /><br />
126	<a name="chart.tickmarks.inner"></a>
127	<b>chart.tickmarks.inner</b><br />
128	This controls whether the bar has inner tickmarks<br /><i>Default: false</i><br /><br />
129	<!--
130	<a name="chart.value"></a>
131	<b>chart.value</b><br />
132	The indicated value. You don't need to set this because it's one of the arguments to the constructor.<br /><br />
133
134	<a name="chart.max"></a>
135	<b>chart.max</b><br />
136	The maximum value. You don't need to set this because it's one of the arguments to the constructor.<br /><br />
137	-->
138	<a name="chart.numticks"></a>
139	<b>chart.numticks</b><br />
140	How many tick marks there are. <br /><i>Default: 10</i><br /><br />
141	<a name="chart.numticks.inner"></a>
142	<b>chart.numticks.inner</b><br />
143	How many inner tick marks there are. <br /><i>Default: 50</i><br /><br />
144	<a name="chart.arrows"></a>
145	<b>chart.arrows</b><br />
146	This stipulates that two indicator arrows are drawn. It works best if you have tickmarks off, and no title.<br><i>Default: false</i><br /><br />
147	<a name="margins"></a>
148	<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>
149
150
151
152	<a name="chart.gutter.left"></a>
153	<b>chart.gutter.left</b><br />
154	The left gutter of the chart, (the gutter is where the labels and title are)).<br />
155	<i>Default: 25</i><br /><br />
156
157	<a name="chart.gutter.right"></a>
158	<b>chart.gutter.right</b><br />
159	The right gutter of the chart, (the gutter is where the labels and title are).<br />
160	<i>Default: 25</i><br /><br />
161
162	<a name="chart.gutter.top"></a>
163	<b>chart.gutter.top</b><br />
164	The top gutter of the chart, (the gutter is where the labels and title are).<br />
165	<i>Default: 25</i><br /><br />
166
167	<a name="chart.gutter.bottom"></a>
168	<b>chart.gutter.bottom</b><br />
169	The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
170	<i>Default: 25</i><br /><br />
171
172	<a name="colors"></a>
173	<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>
174	<b>chart.colors</b><br />
175	The colors of the bar(s). This can be a solid color, or a gradient that you create. <br /><i>Default: [#0c0]</i><br /><br />
176	<a name="chart.background.color"></a>
177	<b>chart.background.color</b><br />
178	The background color. <br /><i>Default: #eee</i><br /><br />
179	<a name="shadow"></a>
180	<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>
181	<b>chart.shadow</b><br />
182	Whether the progress bar has a shadow. This uses the canvas shadow API and therefore is only supported on Chrome 2, Safari 3.1 and Firefox 3.1 (and above).<br /><i>Default: false</i><br /><br />
183	<a name="chart.shadow.offsetx"></a>
184	<b>chart.shadow.offsetx</b><br />
185	The X offset of the progress bar shadow.<br /><i>Default: 3</i><br /><br />
186	<a name="chart.shadow.offsety"></a>
187	<b>chart.shadow.offsety</b><br />
188	The Y offset of the progress bar shadow.<br /><i>Default: 3</i><br /><br />
189	<a name="chart.shadow.color"></a>
190	<b>chart.shadow.color</b><br />
191	The color of the shadow.<br /><i>Default: rgba(0,0,0,0.5)</i><br /><br />
192	<a name="chart.shadow.blur"></a>
193	<b>chart.shadow.blur</b><br />
194	The blurring effect that is applied to the shadow.<br /><i>Default: 3</i><br /><br />
195	<a name="labels and text"></a>
196	<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>
197	<b>chart.text.font</b><br />
198	The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
199	<a name="chart.text.color"></a>
200	<b>chart.text.color</b><br />
201	The color of the labels. <br /><i>Default: black</i><br /><br />
202	<a name="chart.text.size"></a>
203	<b>chart.text.size</b><br />
204	The size of the text (in points). <br /><i>Default: 10</i><br /><br />
205	<a name="chart.labels"></a>
206	<b>chart.labels</b><br />
207	Labels that are applied to the chart. <br />
208	<i>Default: An empty array</i><br /><br />
209
210	<a name="chart.labels.position"></a>
211	<b>chart.labels.position</b><br />
212	This determines whether the labels are placed on the top or the bottom of the progress bar.<br />
213	<i>Default: bottom</i><br /><br />
214
215	<a name="scale"></a>
216	<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> <a name="chart.units.pre"></a>
217	<b>chart.units.pre</b><br />
218	The units that the Y scale is measured in (these are preppend to the number). <br /><i>Default: none</i><br /><br />
219	<a name="chart.units.post"></a>
220	<b>chart.units.post</b><br />
221	The units that the Y scale is measured in (these are appended to the number). <br /><i>Default: none</i><br /><br />
222	<a name="titles"></a>
223	<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>
224	<b>chart.title</b><br />
225	The title of the progress bar. <br /><i>Default: An empty string</i><br /><br />
226
227	<a name="chart.title.background"></a>
228	<b>chart.title.background</b><br />
229	The background color (if any) for the title.<br />
230	<i>Default: null</i><br /><br />
231
232	<a name="chart.title.hpos"></a>
233	<b>chart.title.hpos</b><br />
234	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 />
235	<a name="chart.title.vpos"></a>
236	<b>chart.title.vpos</b><br />
237	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 />
238	<a name="chart.title.color"></a>
239	<b>chart.title.color</b><br />
240	The color of the title.<br /> <i>Default: black</i><br /><br />
241	<a name="interactive features"></a>
242	<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>
243	<b>chart.tooltips</b><br />
244	An array, albeit one element only. This is shown when the progress bar is clicked on. This can contain HTML.<br /><i>Default: An empty array</i><br /><br />
245	<a name="chart.tooltips.effect"></a>
246	<b>chart.tooltips.effect</b><br />
247	The animated effect used for showing the tooltip. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
248	<a name="chart.tooltips.css.class"></a>
249	<b>chart.tooltips.css.class</b><br />
250	This is the name of the CSS class the tooltips use.<br /><i>Default: RGraph_tooltip</i><br /><br />
251	<a name="chart.tooltips.override"></a>
252	<b>chart.tooltips.override</b><br />
253	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 />
254	<a name="chart.contextmenu"></a>
255	<b>chart.contextmenu</b><br />
256	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 />
257	<a name="chart.annotatable"></a>
258	<b>chart.annotatable</b><br />
259	Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
260	<a name="chart.annotate.color"></a>
261	<b>chart.annotate.color</b><br />
262	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 />
263
264
265	<a name="chart.resizable"></a>
266	<b>chart.resizable</b><br />
267	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 />
268	<i>Default: false</i><br /><br />
269
270
271	<a name="chart.resize.handle.background"></a>
272	<b>chart.resize.handle.background</b><br />
273	With this you can specify the background color for the resize handle. If you're adjusting the position of the
274	handle then you may need this to make the handle stand out more.<br />
275	<i>Default: null</i><br /><br />
276
277
278
279	<a name="chart.adjustable"></a>
280	<b>chart.adjustable</b><br />
281	Defaulting to false, this determines whether your progress bar will be adjustable (click the bar and drag it). <br /><i>Default: false</i><br /><br />
282	<a name="zoom"></a>
283	<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.factor"></a>
284	<b>chart.zoom.factor</b><br />
285	This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
286	<a name="chart.zoom.fade.in"></a>
287	<b>chart.zoom.fade.in</b><br />
288	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 />
289	<a name="chart.zoom.fade.out"></a>
290	<b>chart.zoom.fade.out</b><br />
291	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 />
292	<a name="chart.zoom.hdir"></a>
293	<b>chart.zoom.hdir</b><br />
294	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 />
295	<a name="chart.zoom.vdir"></a>
296	<b>chart.zoom.vdir</b><br />
297	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 />
298	<a name="chart.zoom.delay"></a>
299	<b>chart.zoom.delay</b><br />
300	The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
301	<a name="chart.zoom.frames"></a>
302	<b>chart.zoom.frames</b><br />
303	The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
304	<a name="chart.zoom.shadow"></a>
305	<b>chart.zoom.shadow</b><br />
306	Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
307	<a name="chart.zoom.background"></a>
308	<b>chart.zoom.background</b><br />
309	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 />
310
311	<a name="miscellaneous"></a>
312	<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>
313	<a name="chart.highlight.stroke"></a>
314	<b>chart.highlight.stroke</b><br />
315	If you use tooltips, this controls the colour of the highlight stroke.
316	<br /><i>Default: black</i><br /><br />
317
318	<a name="chart.highlight.fill"></a>
319	<b>chart.highlight.fill</b><br />
320	If you use tooltips, this controls the colour of the highlight fill.
321	<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
322
323
324	<a name="key"></a>
325	<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>
326
327	<a name="chart.key"></a>
328	<b>chart.key</b><br />
329	An array of key information. <br />
330	<i>Default: [] (An empty array)</i><br /><br />
331
332	<a name="chart.key.background"></a>
333	<b>chart.key.background</b><br />
334	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>
335	<i>Default: white</i><br /><br />
336
337	<a name="chart.key.halign"></a>
338	<b>chart.key.halign</b><br />
339	Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
340	aligned <i>left</i> or <i>right</i>.<br />
341	<i>Default: right</i><br /><br />
342
343	<a name="chart.key.position"></a>
344	<b>chart.key.position</b><br />
345	Determines the position of the key. Either <b>graph</b> or <b>gutter</b> (default).<br />
346	<i>Default: gutter</i><br /><br />
347
348	<b>chart.key.position.x</b><br />
349	This allows you to specify a specific X coordinate for the key.<br />
350	<i>Default: null</i><br /><br />
351
352	<b>chart.key.position.y</b><br />
353	This allows you to specify a specific Y coordinate for the key.<br />
354	<i>Default: null</i><br /><br />
355
356	<b>chart.key.position.gutter.boxed</b><br />
357	If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
358	<i>Default: false</i><br /><br />
359
360	<a name="chart.key.shadow"></a>
361	<b>chart.key.shadow</b><br />
362	Whether a small drop shadow is applied to the key.<br />
363	<i>Default: false</i><br /><br />
364
365	<a name="chart.key.shadow.color"></a>
366	<b>chart.key.shadow.color</b><br />
367	The color of the shadow.<br />
368	<i>Default: #666</i><br /><br />
369
370	<a name="chart.key.shadow.blur"></a>
371	<b>chart.key.shadow.blur</b><br />
372	The extent of the blurring effect used on the shadow.<br />
373	<i>Default: 3</i><br /><br />
374
375	<a name="chart.key.shadow.offsetx"></a>
376	<b>chart.key.shadow.offsetx</b><br />
377	The X offset of the shadow.<br />
378	<i>Default: 2</i><br /><br />
379
380	<a name="chart.key.shadow.offsety"></a>
381	<b>chart.key.shadow.offsety</b><br />
382	The Y offset of the shadow.<br />
383	<i>Default: 2</i><br /><br />
384
385	<b>chart.key.rounded</b><br />
386	This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
387	<i>Default: true</i><br /><br />
388
389	<b>chart.key.color.shape</b><br />
390	This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
391	<i>Default: square</i><br /><br />
392
393	<b>chart.key.linewidth</b><br />
394	The line width of the surrounding border on the key.<br />
395	<i>Default: 1</i><br /><br />
396	</div>
397	<br /><br />
398
399	</body>
400	</html>

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

Download in other formats: