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/context.html | 371 +++++++++++++++++++++++++++++++++ 1 file changed, 371 insertions(+) create mode 100644 schall/static/RGraph/docs/context.html (limited to 'schall/static/RGraph/docs/context.html') diff --git a/schall/static/RGraph/docs/context.html b/schall/static/RGraph/docs/context.html new file mode 100644 index 0000000..413b463 --- /dev/null +++ b/schall/static/RGraph/docs/context.html @@ -0,0 +1,371 @@ + + + + + + RGraph: HTML5 Javascript charts library - Context menus + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + +

RGraph: HTML5 Javascript charts library - Context menus

+ + + + + + +
+ [No canvas support]
+ (some browsers use a double left click) +
+ + + + +
 
+

What are context menus?

+ +

+ Context menus are what you see when you click your right mouse button. With RGraph, you can specify custom menus + for your charts if you wish. This way you can define custom actions to be associated with menu items. Context menus are a + very easy way to extend the functionality of your charts, allowing you to associate presentation style functionality + with them. +

+ +

+ Important: Opera does not allow you to customise the context menu, so with this browser you + should use the left mouse button on the chart, instead of the right. +

+ + +
 
+

What do they look like?

+ + An RGraph context menu + +

+ Context menus look like the image on the right. You can of course customise their look by using stylesheets. The CSS classes + you need to use are RGraph_contextmenu_background, RGraph_contextmenu and RGraph_contextmenu_item. Eg: +

+ +
+ + 
+<style type="text/css">
+    .RGraph_contextmenu {
+    }
+
+    .RGraph_contextmenu_item {
+    }
+
+    .RGraph_contextmenu_background {
+    }
+</style>
+ +

+ The "! important" is not necessary if you're not overriding a style that is set by the chart script. If you're having trouble, + it's a good idea to use it though. +

+ + +
 
+

Can I have multiple levels of menus?

+ +

+ Yes, as of 24th April 2010 you can have a dual level context menu, which can reduce "option overload" in your user interface. + This example defines a simple context menu: +

+ + 
+bar.Set('chart.contextmenu', [
+                              ['Zoom', RGraph.Zoom],
+                              ['Application', [['Login...', function () {ModalDialog.Show('modaldialog_login', 300);}]] ],
+                              null,
+                              ['Cancel', function () {}]
+                             ]);
+
+ +

+ As you can see there could easily get to be a lot of arrays, so it may help you during development to structure your code by using + indentation. +

+ + +
 
+

How do I define context menus?

+ +

+ Defining a context menu is quite a simple affair. Eg: +

+ + 
+myBar.Set('chart.contextmenu', [
+                                ['Menu item 1', Callback1],
+                                ['Menu item 2', Callback2]
+                               ]);
+ +

+ As you can see, the value is a two dimension array. The second being an array consisting of a string which is used as the name of the + menu item, and a function object (NOT the function name as a string). The function object is the function called when the menu item is selected. +

+ + +
 
+

Can I have "separators"?

+ +

+ Yes. Simply pass null instead of an array as your menu item. Eg: +

+ + 
+myBar.Set('chart.contextmenu', [
+                                ['Menu item 1', Callback1],
+                                null,
+                                ['Menu item 2', Callback2]
+                               ]);
+ + +
 
+

How do I bypass them?

+ +

+ If for any reason you wish to access the browsers own context menu, you can hold down your CTRL key on your keyboard when you + click, and the canvas context menu will be bypassed. Try it on the chart below by holding your CTRL key whilst right clicking. +

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

How do I get the underlying shape that was clicked on?

+ +

+ In some circumstances you may want to know which bar/point/segment was right-clicked on when showing the context menu (if any). + In these cases you will find the pertinent information (the same as what you get from the various .get*() methods) on the + context menu object - which is held in the registry: RGraph.Registry.Get('chart.contextmenu').__shape__. The example bar chart + shows it in action. +

+ + 
+<script>
+    function myListener (obj)
+    {
+        p(RGraph.Registry.Get('chart.contextmenu').__shape__)
+    }
+    RGraph.AddCustomEventListener(myBar, 'oncontextmenu', myListener);
+</script>
+
+ + + +
 
+

What can I use them for?

+ +

+ Since the context menu items run Javascript functions when selected, you can use them for pretty much + anything you want. For example you could make a presentation system, with the context menu controlling which + chart is shown on the canvas, like the example above. +

+ + +
 
+

Context menus, Macs, Safari, Opera and MSIE 9

+

+ Mac Safari, Mac Firefox, Windows Safari and MSIE 9 (beta 1) can have trouble displaying the context menu. So for this reason, for these browsers, + the context menu is attached to a double click of the left mouse button. Opera doesn't support customising the context menu so + this browser also uses a left mouse button double click to trigger the context menu. +

+ + +
 
+

Related events

+

+ There are two context menu related events which you can utilise: +

+ + + +

+ As their names suggest, one fires before the contextmenu is shown, and one after. Important: Because of the + fading effect, it may seem that both events fire before the contextmenu is shown, however this is just due to the nature + of Javascript timers and the fact that alert()s will block them (pause them in effect). +

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