updated removed
[home-automation.git] / RGraph / docs / events.html
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: HTML5 canvas graph library - Custom RGraph events</title>
22     
23     <meta name="keywords" content="rgraph html5 canvas graph docs custom events" />
24     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about the custom RGraph events" />
25
26     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
27     <link rel="stylesheet" href="../css/ModalDialog.css" type="text/css" media="screen" />
28     <link rel="icon" type="image/png" href="../images/favicon.png">
29
30 </head>
31 <body>
32
33     <!-- Social networking buttons -->
34     <script src="../libraries/RGraph.common.core.js" ></script>
35     
36     <script>
37         function HideTwitterDIV ()
38         {
39             document.getElementById("twitter_div").style.opacity = 0;
40             document.getElementById("twitter_div").style.display = 'none';
41         }
42
43
44         function ShowTwitterDIV (e)
45         {
46             var e   = RGraph.FixEventObject(document.all ? event : e);
47             var div = document.getElementById("twitter_div");
48             var img = document.getElementById("twitter_icon");
49
50             div.style.display = 'block';
51             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
52             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
53
54             /**
55             * Fade it in
56             */
57             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
58             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
59             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
60             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
61             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
62
63             e.stopPropagation();
64
65             return false;
66         }
67
68         /**
69         * This code installs the event handler that hides the Twitter DIV
70         */
71         if (RGraph.isIE8()) {
72              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
73         } else {
74             window.addEventListener('click', HideTwitterDIV, false);
75         }
76     </script>
77
78     <!-- The twitter DIV --> 
79     <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;"> 
80         <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet&nbsp;about&nbsp;RGraph</a><br>
81         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a> 
82     </div>
83
84     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
85         <script>
86             // Opera fix
87             if (navigator.userAgent.indexOf('Opera') == -1) {
88               document.getElementById("social_icons").style.position = 'fixed';
89               document.getElementById("twitter_div").style.position = 'fixed';
90     
91             }
92         </script>
93     
94         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
95     
96     
97             <div id="social">
98                 <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%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
99                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /> 
100                 </a> 
101      
102                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
103                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
104                 </a>
105     
106     
107 <!--
108                 <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
109                     <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
110                 </a>
111     
112     
113                 <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
114                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
115                 </a>
116     
117                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed"> 
118                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" /> 
119                 </a>
120     
121                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
122                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" /> 
123                 </a>
124 -->
125             </div>
126     </div>
127     <!-- /Social networking buttons -->
128
129     <div id="breadcrumb">
130         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
131         >
132         <a href="index.html">Documentation</a>
133         >
134         Custom RGraph events
135     </div>
136
137     <h1>RGraph: HTML5 canvas graph library - Custom RGraph events</h1>
138
139     <script>
140         if (RGraph.isIE8()) {
141             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 graphs, 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://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
142         }
143     </script>
144     
145     <ul>
146         <li><a href="#introduction">Introduction</a></li>
147         <li>
148             <a href="#available.events">Available events</a>
149             <ul>
150                 <li><a href="#event.ontooltip">ontooltip</a></li>
151                 <li><a href="#event.oncontextmenu">oncontextmenu</a></li>
152                 <li><a href="#event.onbeforedraw">onbeforedraw</a></li>
153                 <li><a href="#event.ondraw">ondraw</a></li>
154                 <li><a href="#event.onzoom">onzoom</a></li>
155                 <li><a href="#event.onmodaldialog">onmodaldialog</a></li>
156                 <li><a href="#event.onresize">onresize</a></li>
157                 <li><a href="#event.onadjust">onadjust</a></li>
158                 <li><a href="#event.onannotatestart">onannotatestart</a></li>
159                 <li><a href="#event.onannotate">onannotate</a></li>
160                 <li><a href="#event.onannotateend">onannotateend</a></li>
161             </ul>
162         </li>
163     </ul>
164     
165     <a name="introduction"></a>
166     <h4>Introduction</h4>
167     
168     <p>
169         Custom events allow you to easily interact with and extend RGraph for your own purposes. The list of available events is below,
170         as is an example of how to make use of them with the <i>RGraph.AddCustomEventListener()</i> function. Event handler functions (ie your
171         functions) are passed a single parameter - the graph object. With this you can get references to the canvas and context. There's
172         an example of this below.
173     </p>
174
175 <pre class="code">&lt;script&gt;
176     window.onload = function ()
177     {
178         var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56]);
179         line.Set('chart.tooltips', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']);
180         line.Set('chart.labels', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']);
181         line.Set('chart.hmargin', 5);
182         line.Set('chart.tickmarks', 'dot');
183         line.Draw();
184
185         <span style="color: green">/**
186         * This is the call to the RGraph function that registers the event listener
187         * 
188         *      line: The graph object
189         * ontooltip: The name of the event
190         *    myFunc: The function that handles the event
191         */</span>
192         RGraph.AddCustomEventListener(line, 'ontooltip', myFunc);
193     }
194
195     <span style="color: green">/**
196     * The function that is called when the ontooltip event fires. It is  passed a single parameter - the graph object.
197     * With this you can get the ID and references to the canvas and context:
198     *  o obj.id
199     *  o obj.canvas
200     *  o obj.context
201     */</span>
202     function myFunc(obj)
203     {
204         var id      = obj.id;
205         var canvas  = obj.canvas;
206         var context = obj.context;
207
208         alert('This alert was triggered by the custom ontooltip event');
209     }
210 &lt;/script&gt;
211 </pre>
212     
213     <a name="available.events"></a>
214     <h4>Available events</h4>
215
216     <p>
217         <a name="event.ontooltip"></a>
218         <b>ontooltip</b><br />
219         This event fires immediately after a tooltip has been created. This event allows you to easily show graphs in your tooltips (tooltip
220         effects that involve moving the tooltip, eg. <i>contract</i>, <i>expand</i> &amp; <i>snap</i>, will not function). You
221         can find the tooltip object in the RGraph registry - <i>RGraph.Registry.Get('chart.tooltip')</i>. Note that if you're testing and
222         using a function that pauses execution (eg alert()), this will also pause any timers (for animation effects etc). If you want to
223         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
224         <i>cl()</i> shortcut in RGraph).
225     </p>
226
227     <p>
228         <a name="event.oncontextmenu"></a>
229         <b>oncontextmenu</b><br />
230         This event fires immediately after the RGraph context menu is shown. If you want it, you can get at the context menu in the
231         RGraph registry: <i>RGraph.Registry.Get('chart.contextmenu')</i> Like the <i>ontooltip</i> event, using <i>alert()</i> can
232         pause the fade in timers, so you should consider using the Firebug/Webkit <i>console.log</i> functions instead.
233     </p>
234
235     <p>
236         <a name="event.onbeforedraw"></a>
237         <b>onbeforedraw</b><br />
238         Much like the ondraw event, however this fires at the start of the .Draw() method, in effect "before" the method.
239     </p>
240
241     <p>
242         <a name="event.ondraw"></a>
243         <b>ondraw</b><br />
244         The ondraw event fires <i>after</i> the .Draw() method has run. Note that the interactive features of RGraph may call the .Draw()
245         method multiple times - the zoom in area mode is a prime example.
246         A graph with tooltips is also an example. In this case it would demonstrate that the .Draw() method is called twice (and
247         hence the ondraw event), whereas the ontooltip event only fires once.
248         
249         <br /><br />
250
251         <b>Note:</b> The <i>ondraw</i> event is not only fired by its own graph,
252         but (if you're using tooltips for example), can also be fired by other graphs on the page.
253     </p>
254
255     <p>
256         <a name="event.onzoom"></a>
257         <b>onzoom</b><br />
258         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,
259         but when in <i>thumbnail</i> mode this event is like the onmousemove event in that it fires whenever the mouse is moved.
260     </p>
261
262     <p>
263         <a name="event.onmodaldialog"></a>
264         <b>onmodaldialog</b><br />
265         The onmodaldialog event fires when the ModalDialog is shown. This event is easily replicated yourself, though using this event
266         may help you to keep your code tidy. This event is utilised slightly differently to the other events:
267         
268         <pre class="code">ModalDialog.AddCustomEventListener('onmodaldialog', function () {alert('Hello world!');});</pre>
269     </p>
270
271     <p>
272         <a name="event.onresize"></a>
273         <b>onresize</b><br />
274         The onresize event fires when a canvas is resized. It also fires when the canvas is reset to the original size.
275     </p>
276
277     <p>
278         <a name="event.onadjust"></a>
279         <b>onadjust</b><br />
280         The onadjust event fires whenever one of the supported graph types is adjusted. It usually fires in conjunction with the
281         onmousemove event, and can be blocked by alert(). You therefore may need to use a different function (eg console.log())
282         whilst debugging.
283     </p>
284
285     <p>
286         <a name="event.onannotatestart"></a>
287         <b>onannotatestart</b><br />
288         The onannotatestart event fires at the beginning of the annotating procedure (ie in a similar vein to the onmousedown event).
289     </p>
290
291     <p>
292         <a name="event.onannotate"></a>
293         <b>onannotate</b><br />
294         The onannotate event fires when the graph has been annotated. It fires during the annotate procedure.
295     </p>
296
297     <p>
298         <a name="event.onannotateend"></a>
299         <b>onannotateend</b><br />
300         The onannotateend event fires at the end of the annotating procedure (ie in a similar vein to the onmouseup event).
301     </p>
302 </body>
303 </html>