source: Dev/trunk/RGraph/docs/gantt.html @ 77

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

RGraph
File size: 24.4 KB
RevLine 
[77]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 - gantt charts documentation</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas charts docs gantt charts" />
24    <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about Gantt 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   
49    <!-- Social networking buttons -->
50        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
51            <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>
52            <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>
53        </div>
54
55        <script>
56            // Opera fix
57            if (navigator.userAgent.indexOf('Opera') == -1) {
58              document.getElementById("social_icons").style.position = 'fixed';
59            }
60        </script>
61    <!-- Social networking buttons -->
62
63    <div id="breadcrumb">
64        <a href="../index.html">RGraph: Javascript charts and graph library</a>
65        >
66        <a href="index.html">Documentation</a>
67        >
68        Gantt charts
69    </div>
70
71    <h1>RGraph: <span>Javascript charts and graph library</span> - Gantt charts documentation</h1>
72
73    <script>
74        if (RGraph.isIE8()) {
75            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>');
76        }
77    </script>
78
79    <p>
80        Gantt charts can be used to easily represent schedule information, making visualising this information far more straightfoward.
81    </p>
82
83    <ul>
84        <li><a href="#events">Adding events to your Gantt charts</a></li>
85        <li><a href="#vbars">Adding vertical bars to your Gantt charts</a></li>
86    </ul>
87
88    <h2>Example</h2>
89   
90    <p>
91        The example file is <a href="../examples/gantt.html">here</a>.
92    </p>
93   
94    <pre class="code">
95&lt;script&gt;
96    window.onload = function ()
97    {
98        var gantt = new RGraph.Gantt('gantt');
99        gantt.Set('chart.xmax', 365);
100        gantt.Set('chart.gutter.left', 75);
101        gantt.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
102        gantt.Set('chart.title', 'Holiday schedule for Xyz Ltd');
103        gantt.Set('chart.defaultcolor', 'rgba(255,0,0,1)');
104        gantt.Set('chart.tooltips', ["&lt;b&gt;Richard&lt;/b&gt;&lt;br /&gt;Richard is going on holiday to Malta.&lt;br /&gt;He'll be away for 28 days.",
105                                     "&lt;b&gt;Fred&lt;/b&gt;&lt;br /&gt;Fred is also going away for 28 days",
106                                     "&lt;b&gt;Barney&lt;/b&gt;&lt;br /&gt;Barney is off work for two weeks",
107                                     "&lt;b&gt;Gloria&lt;/b&gt;&lt;br /&gt;Gloria is off for 3 weeks",
108                                     "&lt;b&gt;Paul&lt;/b&gt;&lt;br /&gt; Away for 31 days",
109                                     "&lt;b&gt;Harry&lt;/b&gt;&lt;br /&gt;Away for three weeks",
110                                     "&lt;b&gt;Shane&lt;/b&gt;&lt;br /&gt;Away for one week",
111                                     "&lt;b&gt;Barry&lt;/b&gt;&lt;br /&gt;Away for two weeks",
112                                     "&lt;b&gt;Cynthia&lt;/b&gt;&lt;br /&gt;Away for two weeks",
113                                     "&lt;b&gt;Graham&lt;/b&gt;&lt;br /&gt;Away for August and September",
114                                     "&lt;b&gt;Paul&lt;/b&gt;&lt;br /&gt;Away for 31 days"]);
115        gantt.Set('chart.events', [
116                                 [31, 28, null, 'Richard'],
117                                 [31, 28, null, 'Fred'],
118                                 [59, 14, null, 'Barney'],
119                                 [59, 21, null, 'Gloria'],
120                                 [59, 31, null, 'Paul'],
121                                 [80, 21, null, 'Harry'],
122                                 [94, 7, null, 'Shane'],
123                                 [120, 14, null, 'Barry'],
124                                 [130, 14, null, 'Cynthia'],
125                                 [211, 61, null, 'Graham'],
126                                 [334, 31, null, 'Paul']
127                                ]);
128        gantt.Set('chart.vbars', [
129                                  [0, 31, 'rgba(192,255,192,0.5)'],
130                                  [59, 31, 'rgba(192,255,192,0.5)'],
131                                  [120, 31, 'rgba(192,255,192,0.5)'],
132                                  [181, 31, 'rgba(192,255,192,0.5)'],
133                                  [243, 30, 'rgba(192,255,192,0.5)'],
134                                  [304, 30, 'rgba(192,255,192,0.5)']
135                                 ]);
136   
137        gantt.Draw();
138    }
139&lt;/script&gt;
140</pre>
141
142    <h2>Properties</h2>
143   
144    <p>
145        You can use these properties to control how the bar chart apears.
146    </p>
147
148    <ul>
149        <li><a href="#chart configuration">Chart configuration</a></li>
150        <li><a href="#background">Background</a></li>
151        <li><a href="#margins">Margins</a></li>
152        <li><a href="#labels and text">Labels and text</a></li>
153        <li><a href="#titles">Titles</a></li>
154        <li><a href="#interactive features">Interactive features</a></li>
155        <li><a href="#zoom">Zoom</a></li>
156        <li><a href="#miscellaneous">Miscellaneous</a></li>
157    </ul>
158
159
160
161    <a name="chart configuration"></a>
162        <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>
163        <a name="chart.xmax"></a>
164        <b>chart.xmax</b><br />
165        Required. This determines how many "units" wide the Gantt chart is. For example to represent a year, you would use 365, giving
166        a granularity of one day.<br />
167        <i>Default: none</i><br /><br />
168
169        <a name="chart.xmin"></a>
170        <b>chart.xmin</b><br />
171        This option can sometimes make using a Gantt chart spread over several pages easier.<br />
172        <i>Default: 0</i><br /><br />
173
174
175<a name="background"></a>
176<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>
177<b>chart.background.barcolor1</b><br />
178            Color of the background bars<br /><i>Default: white</i><br /><br />
179            <a name="chart.background.barcolor2"></a>
180<b>chart.background.barcolor2</b><br />
181            Color of the background bars<br /><i>Default: white</i><br /><br />
182            <a name="chart.background.grid"></a>
183<b>chart.background.grid</b><br />
184            Whether a grid is shown as part of the background<br /><i>Default: true</i><br /><br />
185            <a name="chart.background.grid.color"></a>
186<b>chart.background.grid.color</b><br />
187            The color of the background grid.<br /><i>Default: #eee</i><br /><br />
188            <a name="chart.background.grid.hsize"></a>
189<b>chart.background.grid.hsize</b><br />
190            The size of the horizontal grid.<br /><i>Default: 20</i><br /><br />
191            <a name="chart.background.grid.vsize"></a>
192<b>chart.background.grid.vsize</b><br />
193            The size of the vertical grid.<br /><i>Default: 20</i><br /><br />
194            <a name="chart.background.grid.width"></a>
195<b>chart.background.grid.width</b><br />
196            The line width of the background grid.<br /><i>Default: 1</i><br /><br />
197            <a name="chart.background.grid.autofit"></a>
198<b>chart.background.grid.autofit</b><br />
199            Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br /><i>Default: false</i><br /><br />
200            <a name="chart.background.grid.autofit.numhlines"></a>
201<b>chart.background.grid.autofit.numhlines</b><br />
202            When using autofit this allows you to specify how many horizontal grid lines you want. <br /><i>Default: 7</i><br /><br />
203            <a name="chart.background.grid.autofit.numvlines"></a>
204<b>chart.background.grid.autofit.numvlines</b><br />
205            When using autofit this allows you to specify how many vertical grid lines you want. <br /><i>Default: 20</i><br /><br />
206<a name="margins"></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">Margins</h3>
208
209
210
211            <a name="chart.gutter.left"></a>
212            <b>chart.gutter.left</b><br />
213            The left gutter of the chart, (the gutter is where the labels and title are)).<br />
214            <i>Default: 75</i><br /><br />
215
216            <a name="chart.gutter.right"></a>
217            <b>chart.gutter.right</b><br />
218            The right gutter of the chart, (the gutter is where the labels and title are).<br />
219            <i>Default: 25</i><br /><br />
220
221            <a name="chart.gutter.top"></a>
222            <b>chart.gutter.top</b><br />
223            The top gutter of the chart, (the gutter is where the labels and title are).<br />
224            <i>Default: 25</i><br /><br />
225
226            <a name="chart.gutter.bottom"></a>
227            <b>chart.gutter.bottom</b><br />
228            The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
229            <i>Default: 25</i><br /><br />
230
231<a name="labels and text"></a>
232<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.size"></a>
233<b>chart.text.size</b><br />
234            The size of the text (in points).<br /><i>Default: 10</i><br /><br />
235            <a name="chart.text.font"></a>
236<b>chart.text.font</b><br />
237            The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
238            <a name="chart.text.color"></a>
239<b>chart.text.color</b><br />
240            The color of the labels. <br /><i>Default: black</i><br /><br />
241            <a name="chart.labels"></a>
242<b>chart.labels</b><br />
243            An array of the labels which are applied to the chart.<br /><i>Default: [] (An empty array)</i><br /><br />
244<a name="titles"></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">Titles</h3>            <a name="chart.title"></a>
246<b>chart.title</b><br />
247            The title of the chart.<br /><i>Default: not set</i><br /><br />
248
249<a name="chart.title.background"></a>
250<b>chart.title.background</b><br />
251The background color (if any) for the title.<br />
252<i>Default: null</i><br /><br />
253
254            <a name="chart.title.color"></a>
255<b>chart.title.color</b><br />
256            The color of the title.<br /> <i>Default: black</i><br /><br />
257            <a name="chart.title.hpos"></a>
258<b>chart.title.hpos</b><br />
259            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 />
260            <a name="chart.title.vpos"></a>
261<b>chart.title.vpos</b><br />
262            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 />
263<a name="interactive features"></a>
264<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>
265<b>chart.tooltips</b><br />
266            An array of tooltips that are shown when the bars are clicked. They can contain HTML.<br /><i>Default: [] (An empty array)</i><br /><br />
267            <a name="chart.tooltips.effect"></a>
268<b>chart.tooltips.effect</b><br />
269            The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
270            <a name="chart.tooltips.css.class"></a>
271<b>chart.tooltips.css.class</b><br />
272            This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br />
273            <a name="chart.tooltips.override"></a>
274<b>chart.tooltips.override</b><br />
275            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 />
276            <a name="chart.contextmenu"></a>
277<b>chart.contextmenu</b><br />
278            An array of context menu items. Cannot be used in conjunction with tooltips.<br /><i>Default: [] (An empty array)</i><br /><br />
279            <a name="chart.annotatable"></a>
280<b>chart.annotatable</b><br />
281            Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
282            <a name="chart.annotate.color"></a>
283<b>chart.annotate.color</b><br />
284            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 />
285
286
287            <a name="chart.resizable"></a>
288            <b>chart.resizable</b><br />
289            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 />
290            <i>Default: false</i><br /><br />
291
292            <a name="chart.resize.handle.background"></a>
293            <b>chart.resize.handle.background</b><br />
294            With this you can specify the background color for the resize handle. If you're adjusting the position of the
295            handle then you may need this to make the handle stand out more.<br />
296            <i>Default: null</i><br /><br />
297
298
299<a name="zoom"></a>
300<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>
301<b>chart.zoom.mode</b><br />
302            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 />
303            <a name="chart.zoom.factor"></a>
304<b>chart.zoom.factor</b><br />
305            This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
306            <a name="chart.zoom.fade.in"></a>
307<b>chart.zoom.fade.in</b><br />
308            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 />
309            <a name="chart.zoom.fade.out"></a>
310<b>chart.zoom.fade.out</b><br />
311            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 />
312            <a name="chart.zoom.hdir"></a>
313<b>chart.zoom.hdir</b><br />
314            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 />
315            <a name="chart.zoom.vdir"></a>
316<b>chart.zoom.vdir</b><br />
317            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 />
318            <a name="chart.zoom.delay"></a>
319<b>chart.zoom.delay</b><br />
320            The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
321            <a name="chart.zoom.frames"></a>
322<b>chart.zoom.frames</b><br />
323            The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
324            <a name="chart.zoom.shadow"></a>
325<b>chart.zoom.shadow</b><br />
326            Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
327            <a name="chart.zoom.thumbnail.width"></a>
328<b>chart.zoom.thumbnail.width</b><br />
329            When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
330            <a name="chart.zoom.thumbnail.height"></a>
331<b>chart.zoom.thumbnail.height</b><br />
332            When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
333            <a name="chart.zoom.background"></a>
334<b>chart.zoom.background</b><br />
335            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 />
336
337    <a name="miscellaneous"></a>
338    <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>
339
340        <a name="chart.highlight.stroke"></a>
341        <b>chart.highlight.stroke</b><br />
342        If you use tooltips, this controls the colour of the highlight stroke.
343        <br /><i>Default: black</i><br /><br />
344
345        <a name="chart.highlight.fill"></a>
346        <b>chart.highlight.fill</b><br />
347        If you use tooltips, this controls the colour of the highlight fill.
348        <br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
349
350<a name="chart.borders"></a>
351<b>chart.borders</b><br />
352            Whether a border is shown on the event bars<br /><i>Default: true</i><br /><br />
353            <a name="chart.defaultcolor"></a>
354<b>chart.defaultcolor</b><br />
355            The default color of bars. If you don't specify a color for the event, this will be used.<br /><i>Default: white</i><br /><br />
356            <a name="chart.events"></a>
357<b>chart.events</b><br />
358            An array of event information that is displayed on the gantt. See below for further information.<br /><i>Default: [] (An empty array)</i><br /><br />
359            <a name="chart.vbars"></a>
360<b>chart.vbars</b><br />
361            Vertical bars used for decorative purposes, or for marking something on the chart (an event for example). See below for further information.<br /><i>Default: [] (An empty array)</i><br /><br />
362</div><!-- /DOCS --><br /><br />
363
364    <a name="events"></a>
365    <h2>Adding events to your Gantt chart</h2>
366   
367    <p>
368        To add events, you specify them using the <i>chart.events</i> property. You could use the following to set some events on your gantt chart:
369    </p>
370   
371    <pre class="code">gantt.Set('chart.events', [
372                       [31, 28, 75, 'Richard'],
373                       [12, 28, 67, 'Fred'],
374                       [59, 14, 0, 'Barney'],
375                       [59, 21, 5, 'Gloria'],
376                       [46, 31, 94, 'Paul'],
377                       [80, 21, 46, 'Harry'],
378                       [94, 17, 84, 'Shane'],
379                       [34, 14, 32, 'Barry'],
380                       [64, 14, 28, 'Cynthia', 'red', 'yellow'],
381                       [13, 61, 74, 'Graham'],
382                       [84, 31, 16, 'Paul']
383                      ]);
384</pre>
385
386    <p>
387        The first value is the (zero indexed) start number relative to your <i>chart.xmax</i>. So if you have set your <i>chart.xmax</i> to 62, (to represent
388        two months), and this value is 31, the start will be the start of the second month. In this case you could give two labels -
389        <i>['July', 'August']</i>.
390    </p>
391   
392    <p>
393        The second value is the duration. So using the previous example, if you set this to 7, you would have an event lasting a week.
394    </p>
395   
396    <p>
397        The third value is the "percentage complete" indicator. This is shown to the right of the event, and is optional - you can
398        specify <i>null</i> if you wish.
399    </p>
400   
401    <p>
402        The fourth value is the label that is used on the left hand side.
403    </p>
404   
405    <p>
406        The optional fifth value stipulates the background colour that the bar is. Default is white.
407    </p>
408   
409    <p>
410        The optional sixth value is the foreground color of the bar. Defaulting to #0c0.
411    </p>
412   
413    <p>
414        The optional seventh value is the border color, defaulting to black
415    </p>
416   
417    <p>
418        And the optional eigth value is the numerical linewidth of the border. The default is 1.
419    </p>
420   
421    <a name="vbars"></a>
422    <h2>Adding vertical bars to your Gantt chart</h2>
423   
424    <p>
425        You can add decorative vertical bars like so:
426    </p>
427   
428    <pre class="code">gantt.Set('chart.vbars', [
429                    [0, 31, 'rgba(192,255,192,0.5)'],
430                    [59, 31, 'rgba(192,255,192,0.5)'],
431                    [120, 31, 'rgba(192,255,192,0.5)'],
432                    [181, 31, 'rgba(192,255,192,0.5)'],
433                    [243, 30, 'rgba(192,255,192,0.5)'],
434                    [304, 30, 'rgba(192,255,192,0.5)'],
435                   ]);
436</pre>
437
438    <p>
439        You can use these for decorative purposes, or to mark events/limits. The first value is the start index, as above.
440        The second value is the unit length, again as above. The third value is the color of the vertical bar.
441    </p>
442
443</body>
444</html>
Note: See TracBrowser for help on using the repository browser.