Context Navigation

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

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 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"><script>
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	</script>
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> & <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	*/
495	function 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> </td>
538	<td align="right"><input type="submit" value="Login »" /></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.

Download in other formats: