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

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

RGraph
File size: 26.3 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 - Custom RGraph events</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas chart docs custom events" />
24    <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about the custom RGraph events" />
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.png"/>
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 src="../libraries/RGraph.common.core.js" ></script>
34    <script src="../libraries/RGraph.common.adjusting.js" ></script>
35    <script src="../libraries/RGraph.common.annotate.js" ></script>
36    <script src="../libraries/RGraph.common.context.js" ></script>
37    <script src="../libraries/RGraph.common.resizing.js" ></script>
38    <script src="../libraries/RGraph.common.tooltips.js" ></script>
39    <script src="../libraries/RGraph.common.zoom.js" ></script>
40    <script src="../libraries/RGraph.modaldialog.js" ></script>
41    <script src="../libraries/RGraph.bar.js" ></script>
42   
43    <script>
44        window.onload = function (e)
45        {
46            var bar1 = new RGraph.Bar('bar1', [1,2,3,5,9,7,8]);
47            bar1.Set('chart.labels', ['January','February','March','April','May','June','July']);
48            bar1.Set('chart.tooltips', ['January','February','March','April','May','June','July']);
49            bar1.Set('chart.title', 'An example of the ontooltip event');
50            bar1.Draw();
51            RGraph.AddCustomEventListener(bar1, 'ontooltip', function (obj) {alert('ontooltip event, showing tooltip with index: ' + RGraph.Registry.Get('chart.tooltip').__index__);});
52
53
54            var bar2 = new RGraph.Bar('bar2', [1,2,3,5,9,7,8]);
55            bar2.Set('chart.labels', ['January','February','March','April','May','June','July']);
56            bar2.Set('chart.contextmenu', [['Cancel', function () {}]]);
57            bar2.Set('chart.title', 'An example of the oncontextmenu event');
58            bar2.Draw();
59            RGraph.AddCustomEventListener(bar2, 'oncontextmenu', function (obj) {alert('oncontextmenu event fired');});
60
61
62            // Intentionally a global
63            bar3 = new RGraph.Bar('bar3', [1,2,3,5,9,7,8]);
64            bar3.Set('chart.labels', ['January','February','March','April','May','June','July']);
65            bar3.Set('chart.title', 'An example of the onbeforedraw event');
66            // Drawn when the button is clicked           
67            RGraph.AddCustomEventListener(bar3, 'onbeforedraw', function (obj) {alert('onbeforedraw event fired');});
68
69
70            // Intentionally a global
71            bar4 = new RGraph.Bar('bar4', [1,2,3,5,9,7,8]);
72            bar4.Set('chart.labels', ['January','February','March','April','May','June','July']);
73            bar4.Set('chart.title', 'An example of the ondraw event');
74            // Drawn when the button is clicked
75            RGraph.AddCustomEventListener(bar4, 'ondraw', function (obj) {alert('ondraw event fired');});
76
77
78            var bar5 = new RGraph.Bar('bar5', [1,2,3,5,9,7,8]);
79            bar5.Set('chart.labels', ['January','February','March','April','May','June','July']);
80            bar5.Set('chart.title', 'An example of the onzoom event');
81            bar5.Set('chart.contextmenu', [['Zoom', RGraph.Zoom]]);
82            bar5.Set('chart.zoom.vdir', 'center');
83            bar5.Draw();
84            RGraph.AddCustomEventListener(bar5, 'onzoom', function (obj) {alert('onzoom event fired');});
85
86
87            var bar6 = new RGraph.Bar('bar6', [1,2,3,5,9,7,8]);
88            bar6.Set('chart.labels', ['January','February','March','April','May','June','July']);
89            bar6.Set('chart.title', 'An example of the onmodaldialog event');
90            bar6.Set('chart.contextmenu', [['Show dialog', function () {ModalDialog.Show('modaldialog_login', 300);}]]);
91            bar6.Draw();
92            ModalDialog.AddCustomEventListener('onmodaldialog', function (obj) {alert('onmodaldialog event fired');});
93
94
95            var bar7 = new RGraph.Bar('bar7', [1,2,3,5,9,7,8]);
96            bar7.Set('chart.labels', ['January','February','March','April','May','June','July']);
97            bar7.Set('chart.title', 'The onresizebeforedraw event');
98            bar7.Set('chart.text.angle', 45);
99            bar7.Set('chart.resizable', true);
100            bar7.Set('chart.gutter.bottom', 60);
101            bar7.Draw();
102            RGraph.AddCustomEventListener(bar7, 'onresizebeforedraw', function (obj)
103            {
104                alert('onresizebeforedraw event fired');
105            });
106
107
108            var bar8 = new RGraph.Bar('bar8', [1,2,3,5,9,7,8]);
109            bar8.Set('chart.labels', ['January','February','March','April','May','June','July']);
110            bar8.Set('chart.title', 'An example of the onresize event');
111            bar8.Set('chart.resizable', true);
112            bar8.Draw();
113           
114            RGraph.AddCustomEventListener(bar8, 'onresizebegin', function (obj){cl('onresizebegin event fired');});
115            RGraph.AddCustomEventListener(bar8, 'onresize', function (obj){cl('onresize event fired');});
116            RGraph.AddCustomEventListener(bar8, 'onresizeend', function (obj){cl('onresizeend event fired');});
117
118
119            var bar9 = new RGraph.Bar('bar9', [1,2,3,5,9,7,8]);
120            bar9.Set('chart.labels', ['January','February','March','April','May','June','July']);
121            bar9.Set('chart.title', 'An example of the onadjust event');
122            bar9.Set('chart.adjustable', true);
123            bar9.Draw();
124           
125            RGraph.AddCustomEventListener(bar9, 'onadjustbegin', function (obj){cl('The onadjuststart event fired');});
126            RGraph.AddCustomEventListener(bar9, 'onadjust', function (obj){cl('The onadjust event fired');});
127            RGraph.AddCustomEventListener(bar9, 'onadjustend', function (obj){cl('The onadjustend event fired');});
128
129
130            // Global on purpose
131            bar10 = new RGraph.Bar('bar10', [1,2,3,5,9,7,8]);
132            bar10.Set('chart.labels', ['January','February','March','April','May','June','July']);
133            bar10.Set('chart.title', 'An example of the onannotate event');
134            bar10.Set('chart.annotatable', true);
135            bar10.Set('chart.contextmenu', [['ShowPalette', RGraph.Showpalette], ['Clear', function () {RGraph.Clear(bar10.canvas); bar10.Draw();}]]);
136            bar10.Draw();
137           
138            RGraph.AddCustomEventListener(bar10, 'onannotatebegin', function (obj){cl('onannotatebegin event fired');});
139            RGraph.AddCustomEventListener(bar10, 'onannotate', function (obj){cl('onannotate event fired');});
140            RGraph.AddCustomEventListener(bar10, 'onannotateend', function (obj){cl('onannotateend event fired');});
141            RGraph.AddCustomEventListener(bar10, 'onannotatecolor', function (obj) {cl('Changed annotate color: ' + obj.Get('chart.annotate.color'));});
142            RGraph.AddCustomEventListener(bar10, 'onannotateclear', function (obj) {cl('Fired the annotation clear event');});
143
144
145            // Global on purpose
146            var bar11 = new RGraph.Bar('bar11', [1,2,3,5,9,7,8]);
147            bar11.Set('chart.labels', ['January','February','March','April','May','June','July']);
148            bar11.Set('chart.title', 'The onbeforecontextmenu event');
149            bar11.Set('chart.contextmenu', [['A sample context menu item', null]]);
150            bar11.Draw();
151           
152            RGraph.AddCustomEventListener(bar11, 'onbeforecontextmenu', function (obj) {p('Fired the onbeforecontextmenu event)');});
153        }
154    </script>
155
156    <script>
157      var _gaq = _gaq || [];
158      _gaq.push(['_setAccount', 'UA-54706-2']);
159      _gaq.push(['_trackPageview']);
160   
161      (function() {
162        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
163        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
164        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
165      })();
166    </script>
167</head>
168<body>
169
170   
171    <!-- Social networking buttons -->
172        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
173            <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>
174            <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>
175        </div>
176
177        <script>
178            // Opera fix
179            if (navigator.userAgent.indexOf('Opera') == -1) {
180              document.getElementById("social_icons").style.position = 'fixed';
181            }
182        </script>
183    <!-- Social networking buttons -->
184
185    <div id="breadcrumb">
186        <a href="../index.html">RGraph: Javascript charts and graph library</a>
187        >
188        <a href="index.html">Documentation</a>
189        >
190        Custom RGraph events
191    </div>
192
193    <h1>RGraph: <span>Javascript charts and graph library</span> - Custom RGraph events</h1>
194
195    <script>
196        if (RGraph.isIE8()) {
197            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>');
198        }
199    </script>
200   
201    <ul>
202        <li><a href="#introduction">Introduction</a></li>
203        <li>
204            <a href="#available.events">Available events</a>
205            <ul>
206                <li><a href="#event.ontooltip">ontooltip</a></li>
207                <li><a href="#event.onbeforecontextmenu">oncontextmenu</a></li>
208                <li><a href="#event.oncontextmenu">oncontextmenu</a></li>
209                <li><a href="#event.onbeforedraw">onbeforedraw</a></li>
210                <li><a href="#event.ondraw">ondraw</a></li>
211                <li><a href="#event.onzoom">onzoom</a></li>
212                <li><a href="#event.onmodaldialog">onmodaldialog</a></li>
213                <li><a href="#event.onresizebeforedraw">onresizebeforedraw</a></li>
214                <li><a href="#event.onresize">onresizebegin</a></li>
215                <li><a href="#event.onresize">onresize</a></li>
216                <li><a href="#event.onresize">onresizeend</a></li>
217                <li><a href="#event.onadjustbegin">onadjustbegin</a></li>
218                <li><a href="#event.onadjustbegin">onadjust</a></li>
219                <li><a href="#event.onadjustbegin">onadjustend</a></li>
220                <li><a href="#event.onannotatebegin">onannotatebegin</a></li>
221                <li><a href="#event.onannotatebegin">onannotate</a></li>
222                <li><a href="#event.onannotatebegin">onannotateend</a></li>
223                <li><a href="#event.onannotatebegin">onannotatecolor</a></li>
224                <li><a href="#event.onannotatebegin">onannotateclear</a></li>
225                <li><a href="#event.onclear">onclear</a></li>
226            </ul>
227        </li>
228        <li><a href="#removing.events">Removing events</a></li>
229    </ul>
230   
231    <a name="introduction"></a>
232    <h4>Introduction</h4>
233   
234    <p>
235        Custom events allow you to easily interact with and extend RGraph for your own purposes. The list of available events is below,
236        as is an example of how to make use of them with the <i>RGraph.AddCustomEventListener()</i> function. Event handler functions (ie your
237        functions) are passed a single parameter - the chart object. With this you can get references to the canvas and context. There's
238        an example of this below.
239    </p>
240
241<pre class="code">&lt;script&gt;
242    window.onload = function ()
243    {
244        var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56]);
245        line.Set('chart.tooltips', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']);
246        line.Set('chart.labels', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']);
247        line.Set('chart.hmargin', 5);
248        line.Set('chart.tickmarks', 'dot');
249        line.Draw();
250
251        <span style="color: green">/**
252        * This is the call to the RGraph function that registers the event listener
253        *
254        *      line: The chart object
255        * ontooltip: The name of the event
256        *    myFunc: The function that handles the event
257        */</span>
258        RGraph.AddCustomEventListener(line, 'ontooltip', myFunc);
259    }
260
261    <span style="color: green">/**
262    * The function that is called when the ontooltip event fires. It is  passed a single parameter - the chart object.
263    * With this you can get the ID and references to the canvas and context:
264    *  o obj.id
265    *  o obj.canvas
266    *  o obj.context
267    */</span>
268    function myFunc(obj)
269    {
270        var id      = obj.id;
271        var canvas  = obj.canvas;
272        var context = obj.context;
273
274        alert('This alert was triggered by the custom ontooltip event');
275    }
276&lt;/script&gt;
277</pre>
278   
279    <a name="available.events"></a>
280    <h4>Available events</h4>
281
282    <p>
283        <a name="event.ontooltip"></a>
284        <canvas id="bar1" width="400" height="150" style="float: left">[No canvas support]</canvas>
285        <b>ontooltip</b><br />
286        This event fires immediately after a tooltip has been created. This event allows you to easily show charts in your tooltips (tooltip
287        effects that involve moving the tooltip, eg. <i>contract</i>, <i>expand</i> &amp; <i>snap</i>, will not function). You
288        can find the tooltip object in the RGraph registry - <i>RGraph.Registry.Get('chart.tooltip')</i>. Note that if you're testing and
289        using a function that pauses execution (eg alert()), this will also pause any timers (for animation effects etc). If you want to
290        avoid this you should use a function that doesn't block execution, eg the Firebug/WebKit function, <i>console.log()</i> (you can use the
291        <i>cl()</i> shortcut in RGraph).
292    </p>
293   
294    <br clear="all" />
295   
296    <p>
297        <a name="event.onbeforecontextmenu"></a>
298        <canvas id="bar11" width="400" height="200" style="float: left">[No canvas support]</canvas>
299        <b>onbeforecontextmenu</b><br />
300        The onbeforecontextmenu event fires before the context menu is shown.
301    </p>
302
303    <br clear="all" />
304
305    <p>
306        <a name="event.oncontextmenu"></a>
307        <canvas id="bar2" width="400" height="150" style="float: left">[No canvas support]</canvas>
308        <b>oncontextmenu</b><br />
309        This event fires immediately after the RGraph context menu is shown. If you want it, you can get at the context menu in the
310        RGraph registry: <i>RGraph.Registry.Get('chart.contextmenu')</i>
311
312        <br /><br />
313
314        <b>Important:</b> Like the <i>ontooltip</i> event, using <i>alert()</i> can
315        pause the fade in timers, so you might consider using the Firebug/Webkit <i>console.log</i> functions instead.
316    </p>
317
318    <br clear="all" />
319
320    <p>
321        <a name="event.onbeforedraw"></a>
322        <div style="float: left">
323            <canvas id="bar3" width="400" height="150" style="left">[No canvas support]</canvas><br />
324            <button onmousedown="bar3.Draw()" style="width: 400px">Draw chart</button>
325        </div>
326       
327        <b>onbeforedraw</b><br />
328        Much like the ondraw event, however this fires at the start of the .Draw() method, in effect "before" the method. Keep in mind
329        that since other charts may trigger the .Draw() method, this event can also be triggered by other charts.
330    </p>
331
332    <br clear="all" />
333
334    <p>
335        <a name="event.ondraw"></a>
336        <div style="float: left">
337            <canvas id="bar4" width="400" height="150" style="left">[No canvas support]</canvas><br />
338            <button onmousedown="bar4.Draw()" style="width: 400px">Draw chart</button>
339        </div>
340        <b>ondraw</b><br />
341        The ondraw event fires <i>after</i> the .Draw() method has run. Note that the interactive features of RGraph may call the .Draw()
342        method multiple times - the zoom in area mode is a prime example.
343        A chart with tooltips is also an example. In this case it would demonstrate that the .Draw() method is called twice (and
344        hence the ondraw event), whereas the ontooltip event only fires once.
345       
346        <br /><br />
347
348        <b>Note:</b> The <i>ondraw</i> event is not only fired by its own chart,
349        but (if you're using tooltips for example), can also be fired by other charts on the page.
350    </p>
351   
352    <br clear="all" />
353
354    <p>
355        <a name="event.onzoom"></a>
356        <canvas id="bar5" width="400" height="150" style="float: left">[No canvas support]</canvas>
357        <b>onzoom</b><br />
358        The onzoom event fires whenever the canvas is zoomed. When the zoom is in <i>area</i> and <i>canvas</i> modes this fires once,
359        but when in <i>thumbnail</i> mode this event is like the onmousemove event in that it fires whenever the mouse is moved.
360    </p>
361
362    <br clear="all" />
363
364    <p>
365        <a name="event.onmodaldialog"></a>
366        <canvas id="bar6" width="400" height="150" style="float: left">[No canvas support]</canvas>
367        <b>onmodaldialog</b><br />
368        The onmodaldialog event fires when the ModalDialog is shown. This event is easily replicated yourself, though using this event
369        may help you to keep your code tidy. This event is utilised slightly differently to the other events:
370       
371        <br clear="all" />
372
373        <pre class="code">ModalDialog.AddCustomEventListener('onmodaldialog', function () {alert('Hello world!');});</pre>
374    </p>
375   
376    <br clear="all" />
377
378    <p>
379        <a name="event.onresizebeforedraw"></a>
380        <canvas id="bar7" width="400" height="200" style="float: left">[No canvas support]</canvas>
381        <b>onresizebeforedraw</b><br />
382        The onresizebeforedraw event was added when translating was necessary to reclaim wasted space, before the introduction
383        of independent gutters. This event is now no longer necessary to reposition the resize handle. It will still have an
384        effect though, so if you choose to upgrade then you should remove this from your configuration. The event isn't
385        planned to be removed, so if you wish to use it, you can.
386    </p>
387   
388    <br clear="all" />
389   
390    <p style="background-color: #ffa; border: 2px dashed #990; padding: 4px">
391        <b>Note:</b>
392        The annotation events send notifications to the console because using alert() would cause them to lock the window.
393    </p>
394
395    <p>
396        <a name="event.onresize"></a>
397        <canvas id="bar8" width="400" height="150" style="float: left">[No canvas support]</canvas>
398        <b>onresizebegin</b><br />
399        The onresizebegin event fires when a canvas is starting to be resized. It also fires when the canvas is reset to the original
400        size.<br /><br />
401       
402        <b>onresize</b><br />
403        The onresize event fires when a canvas is resized. It also fires when the canvas is reset to the original size.<br /><br />
404       
405        <b>onresizeend</b><br />
406        The onresizeend event fires when a canvas is ended resizing. It also fires when the canvas is reset to the original size.
407    </p>
408   
409    <br clear="all" />
410
411    <p style="background-color: #ffa; border: 2px dashed #990; padding: 4px">
412        <b>Note:</b>
413        The adjusting events send notifications to the console because using alert() would cause them to lock the window.
414    </p>
415   
416    <p>
417        <a name="event.onadjustbegin"></a>
418        <canvas id="bar9" width="400" height="200" style="float: left">[No canvas support]</canvas>
419        <b>onadjustbegin</b><br />
420        The onadjustbegin event fires once at the start of an adjusting process. It can be thought of as similar to
421        the onmousedown event as that's when it usually fires.
422    </p>
423   
424    <br />
425
426    <p>
427        <a name="event.onadjust"></a>
428        <b>onadjust</b><br />
429        The onadjust event fires whenever one of the supported chart types is adjusted. It usually fires in conjunction with the
430        onmousemove event, and can be blocked by alert(). You therefore may need to use a different function (eg console.log())
431        whilst debugging.
432    </p>
433   
434    <br />
435   
436    <p>
437        <a name="event.onadjustend"></a>
438        <b>onadjustend</b><br />
439        The onadjustend event fires once at the end of an adjusting process. It can be thought of as similar to
440        the onmouseup event as that's when it usually fires.
441    </p>
442
443    <br clear="all" />
444   
445    <p style="background-color: #ffa; border: 2px dashed #990; padding: 4px">
446        <b>Note:</b>
447        The annotation events send notifications to the console because using alert() would cause them to lock the window.
448    </p>
449
450    <p>
451        <a name="event.onannotatebegin"></a>
452        <canvas id="bar10" width="400" height="350" style="float: left">[No canvas support]</canvas>
453        <b>onannotatebegin</b><br />
454        The onannotatebegin event fires at the beginning of the annotating procedure (ie in a similar vein to the onmousedown event).
455    </p>
456
457    <p>
458        <a name="event.onannotate"></a>
459        <b>onannotate</b><br />
460        The onannotate event fires when the chart has been annotated. It fires during the annotate procedure.
461    </p>
462
463    <p>
464        <a name="event.onannotateend"></a>
465        <b>onannotateend</b><br />
466        The onannotateend event fires at the end of the annotating procedure (ie in a similar vein to the onmouseup event).
467    </p>
468
469    <p>
470        <a name="event.onannotatecolor"></a>
471        <b>onannotatecolor</b><br />
472        The onannotatecolor event fires when the annotation color has been changed using the RGraph palette.
473    </p>
474
475    <p>
476        <a name="event.onannotateclear"></a>
477        <b>onannotateclear</b><br />
478        The onannotateclear event fires when the RGraph annotation data has been cleared using the RGraph.ClearAnnotations() API
479        function.
480    </p>
481
482    <p>
483        <a name="event.onclear"></a>
484        <b>onclear</b><br />
485        The onclear event fires when the function <i>RGraph.Clear()</i> is called. If you use the <i>.Clear()</i>function inside the onclear event
486        handler, it will create a loop. Instead, you could use this function:
487    </p>
488   
489    <pre class="code">
490/**
491* This function clears the canvas
492*
493* @param object obj The chart object
494*/
495function myClear(obj)
496{
497    obj.context.beginPath();
498    obj.context.fillStyle = 'white';
499    obj.context.fillRect(-10,-10,obj.canvas.width + 20, obj.canvas.height + 20);
500    obj.context.fill();
501}
502</pre>
503   
504   
505    <a name="removing.events"></a>
506    <h4>Removing events</h4>
507        <p>
508            In the case that you need to remove RGraph event listeners, there are a few ways that you can do it. The API function
509            <i>RGraph.RemoveCustomEventListener(obj, id)</i> can be used to remove a single event listener. This function
510            takes the chart object and the numerical ID (returned by <i>RGraph.AddCustomEventListener()</i>) as its arguments.
511           
512            <p />
513
514            There's
515            also the <i>RGraph.RemoveAllCustomEventListeners()</i>, for easily removing all of the pertinent event listeners. This
516            function can either take no arguments at all, in which case ALL event listeners for ALL objects are removed. Or it can
517            also take an objects ID (the same id that you pass to the constructor), in which case the removal will be limited to
518            that object.
519        </p>
520
521    <!-- Login dialog -->
522    <div style="display: none" class="ModalDialog" id="modaldialog_login">
523       
524        <b>Login to admin area</b><br /><br />
525
526        <table border="0">
527            <tr>
528                <td align="right">Email:</td>
529                <td><input type="text" name="email" /></td>
530            </tr>
531            <tr>
532                <td align="right">Password:</td>
533                <td><input type="password" name="password" /></td>
534            </tr>
535           
536            <tr>
537                <td>&nbsp;</td>
538                <td align="right"><input type="submit" value="Login &raquo;" /></td>
539            </tr>
540        </table>
541
542        <div style="font-size: 8pt; float: right"><a href="" onclick="ModalDialog.Hide(); return false">Dismiss</a></div>
543    </div>
544
545</body>
546</html>
Note: See TracBrowser for help on using the repository browser.