source: Dev/trunk/RGraph/docs/vprogress.html @ 139

Last change on this file since 139 was 77, checked in by fpvanagthoven, 14 years ago

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