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