1 <?php ob_start('ob_gzhandler') ?>
5 <meta http-equiv="X-UA-Compatible" content="chrome=1">
8 * o------------------------------------------------------------------------------o
9 * | This file is part of the RGraph package - you can learn more at: |
11 * | http://www.rgraph.net |
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: |
17 * | http://www.rgraph.net/LICENSE.txt |
18 * o------------------------------------------------------------------------------o
21 <title>RGraph: HTML5 canvas graph library - Context menus</title>
23 <meta name="keywords" content="rgraph html5 canvas graph docs context menus" />
24 <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about context menus" />
26 <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
27 <link rel="icon" type="image/png" href="../images/favicon.png">
29 <script src="../libraries/RGraph.common.core.js" ></script>
30 <script src="../libraries/RGraph.common.context.js" ></script>
31 <script src="../libraries/RGraph.bar.js" ></script>
32 <script src="../libraries/RGraph.line.js" ></script>
33 <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
35 <!-- Contextmenu CSS classes -->
40 .RGraph_contextmenu_background {
43 .RGraph_contextmenu_item {
50 <!-- Social networking buttons -->
51 <script src="../libraries/RGraph.common.core.js" ></script>
54 function HideTwitterDIV ()
56 document.getElementById("twitter_div").style.opacity = 0;
57 document.getElementById("twitter_div").style.display = 'none';
61 function ShowTwitterDIV (e)
63 var e = RGraph.FixEventObject(document.all ? event : e);
64 var div = document.getElementById("twitter_div");
65 var img = document.getElementById("twitter_icon");
67 div.style.display = 'block';
68 div.style.left = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
69 div.style.top = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
74 setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
75 setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
76 setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
77 setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
78 setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
86 * This code installs the event handler that hides the Twitter DIV
89 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
91 window.addEventListener('click', HideTwitterDIV, false);
95 <!-- The twitter DIV -->
96 <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;">
97 <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 about RGraph</a><br>
98 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
101 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
104 if (navigator.userAgent.indexOf('Opera') == -1) {
105 document.getElementById("social_icons").style.position = 'fixed';
106 document.getElementById("twitter_div").style.position = 'fixed';
111 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
115 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=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">
116 <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
119 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
120 <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
125 <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">
126 <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"/>
130 <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">
131 <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
134 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
135 <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
138 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
139 <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
144 <!-- /Social networking buttons -->
146 <div id="breadcrumb">
147 <a href="../index.html">RGraph: HTML5 canvas graph library</a>
149 <a href="index.html">Documentation</a>
154 <h1>RGraph: HTML5 canvas graph library - Context menus</h1>
158 if (RGraph.isIE8()) {
159 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>');
164 <li><a href="#what">What are context menus?</a></li>
165 <li><a href="#look">What do they look like?</a></li>
166 <li><a href="#multiple">Can I have multiple levels of menus?</a></li>
167 <li><a href="#define">How do I define context menus?</a></li>
168 <li><a href="#seperators">Can I have "separators"?</a></li>
169 <li><a href="#bypass">How do I bypass them?</a></li>
170 <li><a href="#use">What can I use them for?</a></li>
171 <li><a href="#example">Is there an example file that uses the CSS classes?</a></li>
172 <li><a href="#mac">Context menus, Macs, Safari and Opera</a></li>
177 <h3>What are context menus?</h3>
180 Context menus are what you see when you click your right mouse button. With RGraph, you can specify custom menus
181 for your graphs if you wish. This way you can define custom actions to be associated with menu items. Context menus are a
182 very easy way to extend the functionality of your graphs, allowing you to associate presentation style functionality
187 <b>Important:</b> Opera does not allow you to customise the context menu, so with this browser you
188 should use the left mouse button on the graph, instead of the right.
193 <h3>What do they look like?</h3>
195 <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" />
198 Context menus look like the image on the right. You can of course customise their look by using stylesheets. The CSS classes
199 you need to use are <b>RGraph_contextmenu_background</b>, <b>RGraph_contextmenu</b> and <b>RGraph_contextmenu_item</b>. Eg:
205 <style type="text/css">
206 .RGraph_contextmenu {
209 .RGraph_contextmenu_item {
212 .RGraph_contextmenu_background {
217 The "! important" is not necessary if you're not overriding a style that is set by the graph script. If you're having trouble,
218 it's a good idea to use it though.
221 <a name="multiple"></a>
223 <h3>Can I have multiple levels of menus?</h3>
226 Yes, as of 24th April 2010 you can have a dual level context menu, which can reduce "option overload" in your user interface.
227 This example defines a simple context menu:
231 bar.Set('chart.contextmenu', [
232 ['Zoom', RGraph.Zoom],
233 ['Application', <span style="color: green">[['Login...', function () {ModalDialog.Show('modaldialog_login', 300);}]]</span> ],
235 ['Cancel', function () {}]
240 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
244 <a name="define"></a>
246 <h3>How do I define context menus?</h3>
249 Defining a context menu is quite a simple affair. Eg:
253 myBar.Set('chart.contextmenu', [
254 ['Menu item 1', Callback1],
255 ['Menu item 2', Callback2]
259 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
260 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.
263 <a name="seperators"></a>
265 <h3>Can I have "separators"?</h3>
268 Yes. Simply pass null instead of an array as your menu item. Eg:
272 myBar.Set('chart.contextmenu', [
273 ['Menu item 1', Callback1],
275 ['Menu item 2', Callback2]
278 <a name="bypass"></a>
280 <h3>How do I bypass them?</h3>
283 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
284 click, and the canvas context menu will be bypassed. Try it on the graph below by holding your CTRL key whilst right clicking.
289 <h3>What can I use them for?</h3>
292 Since the context menu items run Javascript functions when selected, you can use them for pretty much
293 anything you want. For example you could make a presentation system, with the context menu controlling which
294 graph is shown on the canvas. For example:
297 <div style="text-align: center">
298 <canvas id="myCanvas" width="600" height="200">[No canvas support]</canvas>
301 <a name="example"></a>
302 <h3>Is there an example file that uses the CSS classes?</h3>
305 You can take a look at the bottom of the <a href="../css/website.css" >CSS file for this website</a>.
310 <h3>Context menus, Macs, Safari, Opera and MSIE 9</h3>
313 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,
314 the context menu is attached to a double click of the left mouse button. Opera doesn't support customising the context menu so
315 this browser also uses a left mouse button double click to trigger the context menu.
320 * Shows the bar chart
322 function ShowGraphOne ()
324 RGraph.Clear(document.getElementById('myCanvas'));
326 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]]);
327 bar.Set('chart.colors', ['#66f', '#f66']);
328 bar.Set('chart.gutter', 25);
329 bar.Set('chart.title', 'Data represented on a bar chart (with context menu)');
330 bar.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th']);
331 bar.Set('chart.contextmenu', [['Graph', [['Bar chart', ShowGraphOne], ['Line graph', ShowGraphTwo]]], null, ['Cancel', function () {}]]);
332 bar.Set('chart.grouping', 'grouped');
337 * Show the line chart
339 function ShowGraphTwo()
341 RGraph.Clear(document.getElementById('myCanvas'));
343 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]);
344 line.Set('chart.title', 'Same data, but represented on a line chart (with context menu)');
345 line.Set('chart.colors', ['#f66', '#66f']);
346 line.Set('chart.background.barcolor1', '#fff');
347 line.Set('chart.background.barcolor2', '#fff');
348 line.Set('chart.tickmarks', null);
349 line.Set('chart.linewidth', 3);
350 line.Set('chart.gutter', 25);
351 line.Set('chart.hmargin', 550 / 26);
352 line.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th']);
353 line.Set('chart.contextmenu', [['Graph', [['Bar chart', ShowGraphOne], ['Line graph', ShowGraphTwo]]], null, ['Cancel', function () {}]]);
358 * Show the first graph
360 window.onload = function ()