source: Dev/trunk/RGraph/docs/context.html @ 77

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
File size: 15.5 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 - Context menus</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas chart docs context menus" />
24    <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about context menus" />
25   
26    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
27    <meta property="og:description" content="A chart 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.context.js" ></script>
35    <script src="../libraries/RGraph.common.zoom.js" ></script>
36    <script src="../libraries/RGraph.bar.js" ></script>
37    <script src="../libraries/RGraph.line.js" ></script>
38    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
39
40    <!-- Contextmenu CSS classes -->
41    <style>
42        .RGraph_contextmenu {
43        }
44
45        .RGraph_contextmenu_background {
46        }
47
48        .RGraph_contextmenu_item {
49        }
50    </style>
51
52
53
54    <script>
55      var _gaq = _gaq || [];
56      _gaq.push(['_setAccount', 'UA-54706-2']);
57      _gaq.push(['_trackPageview']);
58   
59      (function() {
60        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
61        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
62        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
63      })();
64    </script>
65</head>
66<body>
67
68   
69    <!-- Social networking buttons -->
70        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
71            <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>
72            <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>
73        </div>
74
75        <script>
76            // Opera fix
77            if (navigator.userAgent.indexOf('Opera') == -1) {
78              document.getElementById("social_icons").style.position = 'fixed';
79            }
80        </script>
81    <!-- Social networking buttons -->
82
83    <div id="breadcrumb">
84        <a href="../index.html">RGraph: Javascript charts and graph library</a>
85        >
86        <a href="index.html">Documentation</a>
87        >
88        Context menus
89    </div>
90
91    <h1>RGraph: <span>Javascript charts and graph library</span> - Context menus</h1>
92
93
94    <script>
95        if (RGraph.isIE8()) {
96            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>');
97        }
98    </script>
99   
100   
101   
102    <div style="text-align: center; float: right">
103        <canvas id="myCanvas" width="500" height="200">[No canvas support]</canvas><br />
104        <small>(<a href="#mac">some browsers use a double left click</a>)</small>
105    </div>
106   
107    <ul>
108        <li><a href="#what">What are context menus?</a></li>
109        <li><a href="#look">What do they look like?</a></li>
110        <li><a href="#multiple">Can I have multiple levels of menus?</a></li>
111        <li><a href="#define">How do I define context menus?</a></li>
112        <li><a href="#seperators">Can I have "separators"?</a></li>
113        <li><a href="#bypass">How do I bypass them?</a></li>
114        <li><a href="#getshape">How do I get the underlying shape that was clicked on?</a></li>
115        <li><a href="#use">What can I use them for?</a></li>
116        <li><a href="#mac">Context menus, Macs, Safari, Opera and MSIE 9</a></li>
117        <li><a href="#events">Related events</a></li>
118    </ul>
119
120    <a name="what"></a>
121    <br />&nbsp;<br />
122    <h3>What are context menus?</h3>
123
124    <p>
125        Context menus are what you see when you click your right mouse button. With RGraph, you can specify custom menus
126        for your charts if you wish. This way you can define custom actions to be associated with menu items. Context menus are a
127        very easy way to extend the functionality of your charts, allowing you to associate presentation style functionality
128        with them.
129    </p>
130   
131    <p>
132        <b>Important:</b> Opera does not allow you to customise the context menu, so with this browser you
133        should use the left mouse button on the chart, instead of the right.
134    </p>
135
136    <a name="look"></a>
137    <br />&nbsp;<br />
138    <h3>What do they look like?</h3>
139
140    <img src="../images/context.png" width="148" height="90" alt="An RGraph context menu" style="float: right; margin-right: 200px; border: 2px dashed gray; margin-right: 280px" />
141
142    <p>
143        Context menus look like the image on the right. You can of course customise their look by using stylesheets. The CSS classes
144        you need to use are <b>RGraph_contextmenu_background</b>, <b>RGraph_contextmenu</b> and <b>RGraph_contextmenu_item</b>. Eg:
145    </p>
146   
147    <br clear="all" />
148
149    <pre class="code">
150&lt;style type="text/css"&gt;
151    .RGraph_contextmenu {
152    }
153
154    .RGraph_contextmenu_item {
155    }
156
157    .RGraph_contextmenu_background {
158    }
159&lt;/style&gt;</pre>
160
161    <p>
162        The "! important" is not necessary if you're not overriding a style that is set by the chart script. If you're having trouble,
163        it's a good idea to use it though.
164    </p>
165
166    <a name="multiple"></a>
167    <br />&nbsp;<br />
168    <h3>Can I have multiple levels of menus?</h3>
169   
170    <p>
171        Yes, as of 24th April 2010 you can have a dual level context menu, which can reduce "option overload" in your user interface.
172        This example defines a simple context menu:
173    </p>
174   
175    <pre class="code">
176bar.Set('chart.contextmenu', [
177                              ['Zoom', RGraph.Zoom],
178                              ['Application', <span style="color: green">[['Login...', function () {ModalDialog.Show('modaldialog_login', 300);}]]</span> ],
179                              null,
180                              ['Cancel', function () {}]
181                             ]);
182</pre>
183   
184    <p>
185        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
186        indentation.
187    </p>
188
189    <a name="define"></a>
190    <br />&nbsp;<br />
191    <h3>How do I define context menus?</h3>
192   
193    <p>
194        Defining a context menu is quite a simple affair. Eg:
195    </p>
196   
197    <pre class="code">
198myBar.Set('chart.contextmenu', [
199                                ['Menu item 1', Callback1],
200                                ['Menu item 2', Callback2]
201                               ]);</pre>
202
203    <p>
204        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
205        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.
206    </p>
207
208    <a name="seperators"></a>
209    <br />&nbsp;<br />
210    <h3>Can I have "separators"?</h3>
211   
212    <p>
213        Yes. Simply pass null instead of an array as your menu item. Eg:
214    </p>
215
216    <pre class="code">
217myBar.Set('chart.contextmenu', [
218                                ['Menu item 1', Callback1],
219                                null,
220                                ['Menu item 2', Callback2]
221                               ]);</pre>
222
223    <a name="bypass"></a>
224    <br />&nbsp;<br />
225    <h3>How do I bypass them?</h3>
226   
227    <p>
228        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
229        click, and the canvas context menu will be bypassed. Try it on the chart below by holding your CTRL key whilst right clicking.
230    </p>
231
232
233
234
235    <a name="getshape"></a>
236    <br />&nbsp;<br />
237
238    <canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>
239
240    <h3>How do I get the underlying shape that was clicked on?</h3>
241   
242    <p>
243        In some circumstances you may want to know which bar/point/segment was right-clicked on when showing the context menu (if any).
244        In these cases you will find the pertinent information (the same as what you get from the various .get*() methods) on the
245        context menu object - which is held in the registry: <i>RGraph.Registry.Get('chart.contextmenu').__shape__</i>. The example bar chart
246        shows it in action.
247    </p>
248   
249    <pre class="code">
250&lt;script&gt;
251    function myListener (obj)
252    {
253        p(RGraph.Registry.Get('chart.contextmenu').__shape__)
254    }
255    RGraph.AddCustomEventListener(myBar, 'oncontextmenu', myListener);
256&lt;/script&gt;
257</pre>
258   
259
260    <a name="use"></a>
261    <br />&nbsp;<br />
262    <h3>What can I use them for?</h3>
263   
264    <p>
265        Since the context menu items run Javascript functions when selected, you can use them for pretty much
266        anything you want. For example you could make a presentation system, with the context menu controlling which
267        chart is shown on the canvas, like the example above.
268    </p>
269
270    <a name="mac"></a>
271    <br />&nbsp;<br />
272    <h3>Context menus, Macs, Safari, Opera and MSIE 9</h3>
273        <p>
274            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,
275            the context menu is attached to a double click of the left mouse button. Opera doesn't support customising the context menu so
276            this browser also uses a left mouse button double click to trigger the context menu.
277        </p>
278
279    <a name="events"></a>
280    <br />&nbsp;<br />
281    <h3>Related events</h3>
282        <p>
283            There are two context menu related events which you can utilise:
284        </p>
285       
286        <ul>
287            <li><i>onbeforecontextmenu</i></li>
288            <li><i>oncontextmenu</i></li>
289        </ul>
290       
291        <p>
292            As their names suggest, one fires before the contextmenu is shown, and one after. <b>Important:</b> Because of the
293            fading effect, it may seem that both events fire before the contextmenu is shown, however this is just due to the nature
294            of Javascript timers and the fact that alert()s will block them (pause them in effect).
295        </p>
296   
297    <script>
298        /**
299        * Shows the bar chart
300        */
301        function ShowGraphOne ()
302        {
303            RGraph.Clear(document.getElementById('myCanvas'));
304
305            var bar = new RGraph.Bar('myCanvas', [[45,15],[16,23],[52,12],[33,64],[34,54],[62,33],[66,23],[12,23],[12,53],[16,45],[26,43],[46,42],[41,41],[32,46]]);
306            bar.Set('chart.colors', ['#66f', '#f66']);
307            bar.Set('chart.title', 'Data represented on a bar chart (with context menu)');
308            bar.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th']);
309            bar.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom], null, ['Chart', [['Bar chart', ShowGraphOne], ['Line chart', ShowGraphTwo]]], null, ['Cancel', function () {}]]);
310            bar.Set('chart.grouping', 'grouped');
311            bar.Set('chart.zoom.hdir', 'left');
312            bar.Set('chart.zoom.vdir', 'center');
313            bar.Draw();
314        }
315
316        /**
317        * Show the line chart
318        */
319        function ShowGraphTwo()
320        {
321            RGraph.Clear(document.getElementById('myCanvas'));
322
323            var line = new RGraph.Line('myCanvas', [15,23,12,64,54,33,23,23,53,45,43,42,41,46], [45,16,52,33,34,62,66,12,12,16,26,46,41,32]);
324            line.Set('chart.title', 'Data represented on a line chart (context menu)');
325            line.Set('chart.colors', ['#f66', '#66f']);
326            line.Set('chart.background.barcolor1', 'white');
327            line.Set('chart.background.barcolor2', 'white');
328            line.Set('chart.tickmarks', null);
329            line.Set('chart.linewidth', 3);
330            line.Set('chart.hmargin', 550 / 26);
331            line.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th']);
332
333            line.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom], null, ['Chart', [['Bar chart', ShowGraphOne],['Line chart', ShowGraphTwo]]], null,['Cancel', function () {}]]);
334            line.Set('chart.zoom.hdir', 'left');
335            line.Set('chart.zoom.vdir', 'center');
336
337            line.Draw();
338        }
339       
340        /**
341        * Show the first chart
342        */
343        window.onload = function ()
344        {
345            ShowGraphOne();
346           
347            var myBar = new RGraph.Bar('cvs', [54,52,64,84,72,65]);
348            myBar.Set('chart.labels', ['Fred','Rich','Dave','John','Kev','Lou']);
349            myBar.Set('chart.title', 'A chart showing the context menu .__shape__ property (context)');
350            myBar.Set('chart.contextmenu', [['A sample context menu item', function () {}]]);
351            myBar.Draw();
352           
353            function myListener (obj)
354            {
355                p(RGraph.Registry.Get('chart.contextmenu').__shape__)
356            }
357            RGraph.AddCustomEventListener(myBar, 'oncontextmenu', myListener);
358        }
359
360    </script>
361
362</body>
363</html>
Note: See TracBrowser for help on using the repository browser.