From 770ba5201f5c60b2bb36602ff9d359f641e33125 Mon Sep 17 00:00:00 2001 From: Yves Fischer Date: Sun, 23 Oct 2011 21:14:40 +0200 Subject: Charting with flask, rgraph and custom "timeseries database" --- schall/static/RGraph/docs/events.html | 589 ++++++++++++++++++++++++++++++++++ 1 file changed, 589 insertions(+) create mode 100644 schall/static/RGraph/docs/events.html (limited to 'schall/static/RGraph/docs/events.html') diff --git a/schall/static/RGraph/docs/events.html b/schall/static/RGraph/docs/events.html new file mode 100644 index 0000000..6f65363 --- /dev/null +++ b/schall/static/RGraph/docs/events.html @@ -0,0 +1,589 @@ + + + + + + RGraph: HTML5 Javascript charts library - Custom RGraph events + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + +

RGraph: HTML5 Javascript charts library - Custom RGraph events

+ + + + + + +

Introduction

+ +

+ 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 RGraph.AddCustomEventListener() 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. +

+ +
<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();
+
+        /**
+        * 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
+        */
+        RGraph.AddCustomEventListener(line, 'ontooltip', myFunc);
+    }
+
+    /**
+    * 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
+    */
+    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>
+
+ + +

Available events

+ +

+ + [No canvas support] + ontooltip
+ 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. contract, expand & snap, will not function). You + can find the tooltip object in the RGraph registry - RGraph.Registry.Get('chart.tooltip'). 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, console.log() (you can use the + cl() shortcut in RGraph). +

+ +
+ +

+ + [No canvas support] + onbeforecontextmenu
+ The onbeforecontextmenu event fires before the context menu is shown. +

+ +
+ +

+ + [No canvas support] + oncontextmenu
+ 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: RGraph.Registry.Get('chart.contextmenu') + +

+ + Important: Like the ontooltip event, using alert() can + pause the fade in timers, so you might consider using the Firebug/Webkit console.log functions instead. +

+ +
+ +

+ +

+ [No canvas support]
+ +
+ + onbeforedraw
+ 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. +

+ +
+ +

+ +

+ [No canvas support]
+ +
+ ondraw
+ The ondraw event fires after 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. + +

+ + Note: The ondraw 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. +

+ +
+ +

+ + [No canvas support] + onzoom
+ The onzoom event fires whenever the canvas is zoomed. When the zoom is in area and canvas modes this fires once, + but when in thumbnail mode this event is like the onmousemove event in that it fires whenever the mouse is moved. +

+ +
+ +

+ + [No canvas support] + onmodaldialog
+ 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: + +
+ + 

ModalDialog.AddCustomEventListener('onmodaldialog', function () {alert('Hello world!');});
+

+ +
+ +

+ + [No canvas support] + onresizebeforedraw
+ 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. +

+ +
+ +

+ Note: + The annotation events send notifications to the console because using alert() would cause them to lock the window. +

+ +

+ + [No canvas support] + onresizebegin
+ The onresizebegin event fires when a canvas is starting to be resized. It also fires when the canvas is reset to the original + size.

+ + onresize
+ The onresize event fires when a canvas is resized. It also fires when the canvas is reset to the original size.

+ + onresizeend
+ The onresizeend event fires when a canvas is ended resizing. It also fires when the canvas is reset to the original size. +

+ +
+ +

+ Note: + The adjusting events send notifications to the console because using alert() would cause them to lock the window. +

+ +

+ + [No canvas support] + onadjustbegin
+ 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. +

+ +
+ +

+ + onadjust
+ 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. +

+ +
+ +

+ + onadjustend
+ 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. +

+ +
+ +

+ Note: + The annotation events send notifications to the console because using alert() would cause them to lock the window. +

+ +

+ + [No canvas support] + onannotatebegin
+ The onannotatebegin event fires at the beginning of the annotating procedure (ie in a similar vein to the onmousedown event). +

+ +

+ + onannotate
+ The onannotate event fires when the chart has been annotated. It fires during the annotate procedure. +

+ +

+ + onannotateend
+ The onannotateend event fires at the end of the annotating procedure (ie in a similar vein to the onmouseup event). +

+ +

+ + onannotatecolor
+ The onannotatecolor event fires when the annotation color has been changed using the RGraph palette. +

+ +

+ + onannotateclear
+ The onannotateclear event fires when the RGraph annotation data has been cleared using the RGraph.ClearAnnotations() API + function. +

+ +

+ + onclear
+ The onclear event fires when the function RGraph.Clear() is called. If you use the .Clear()function inside the onclear event + handler, it will create a loop. Instead, you could use this function: +

+ + +
+ [No canvas support] + +
+ +

+ + oncrosshairs
+ 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. +

+ +
+ + 
+/**
+* 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();
+}
+
+ + + +

Removing events

+

+ In the case that you need to remove RGraph event listeners, there are a few ways that you can do it. The API function + RGraph.RemoveCustomEventListener(obj, id) can be used to remove a single event listener. This function + takes the chart object and the numerical ID (returned by RGraph.AddCustomEventListener()) as its arguments. + +

+ + There's + also the RGraph.RemoveAllCustomEventListeners(), 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. +

+ + + + + + \ No newline at end of file -- cgit v1.2.1