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>