RGraph/docs/context.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 - Context menus</title>
  22
  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" />
  25
  26     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  27     <link rel="icon" type="image/png" href="../images/favicon.png">
  28
  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]-->
  34
  35     <!-- Contextmenu CSS classes -->
  36     <style>
  37         .RGraph_contextmenu {
  38         }
  39
  40         .RGraph_contextmenu_background {
  41         }
  42
  43         .RGraph_contextmenu_item {
  44         }
  45     </style>
  46
  47 </head>
  48 <body>
  49
  50     <!-- Social networking buttons -->
  51     <script src="../libraries/RGraph.common.core.js" ></script>
  52
  53     <script>
  54         function HideTwitterDIV ()
  55         {
  56             document.getElementById("twitter_div").style.opacity = 0;
  57             document.getElementById("twitter_div").style.display = 'none';
  58         }
  59
  60
  61         function ShowTwitterDIV (e)
  62         {
  63             var e   = RGraph.FixEventObject(document.all ? event : e);
  64             var div = document.getElementById("twitter_div");
  65             var img = document.getElementById("twitter_icon");
  66
  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';
  70
  71             /**
  72             * Fade it in
  73             */
  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);
  79
  80             e.stopPropagation();
  81
  82             return false;
  83         }
  84
  85         /**
  86         * This code installs the event handler that hides the Twitter DIV
  87         */
  88         if (RGraph.isIE8()) {
  89              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  90         } else {
  91             window.addEventListener('click', HideTwitterDIV, false);
  92         }
  93     </script>
  94
  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&nbsp;about&nbsp;RGraph</a><br>
  98         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  99     </div>
 100
 101     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 102         <script>
 103             // Opera fix
 104             if (navigator.userAgent.indexOf('Opera') == -1) {
 105               document.getElementById("social_icons").style.position = 'fixed';
 106               document.getElementById("twitter_div").style.position = 'fixed';
 107
 108             }
 109         </script>
 110
 111         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 112
 113
 114             <div id="social">
 115                 <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">
 116                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 117                 </a>
 118
 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" />
 121                 </a>
 122
 123
 124 <!--
 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"/>
 127                 </a>
 128
 129
 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"/>
 132                 </a>
 133
 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" />
 136                 </a>
 137
 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" />
 140                 </a>
 141 -->
 142             </div>
 143     </div>
 144     <!-- /Social networking buttons -->
 145
 146     <div id="breadcrumb">
 147         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 148         >
 149         <a href="index.html">Documentation</a>
 150         >
 151         Context menus
 152     </div>
 153
 154     <h1>RGraph: HTML5 canvas graph library - Context menus</h1>
 155
 156
 157     <script>
 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>');
 160         }
 161     </script>
 162
 163     <ul>
 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>
 173     </ul>
 174
 175     <a name="what"></a>
 176     <br />&nbsp;<br />
 177     <h3>What are context menus?</h3>
 178
 179     <p>
 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
 183         with them.
 184     </p>
 185
 186     <p>
 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.
 189     </p>
 190
 191     <a name="look"></a>
 192     <br />&nbsp;<br />
 193     <h3>What do they look like?</h3>
 194
 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" />
 196
 197     <p>
 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:
 200     </p>
 201
 202     <br clear="all" />
 203
 204     <pre class="code">
 205 &lt;style type="text/css"&gt;
 206     .RGraph_contextmenu {
 207     }
 208
 209     .RGraph_contextmenu_item {
 210     }
 211
 212     .RGraph_contextmenu_background {
 213     }
 214 &lt;/style&gt;</pre>
 215
 216     <p>
 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.
 219     </p>
 220
 221     <a name="multiple"></a>
 222     <br />&nbsp;<br />
 223     <h3>Can I have multiple levels of menus?</h3>
 224
 225     <p>
 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:
 228     </p>
 229
 230     <pre class="code">
 231 bar.Set('chart.contextmenu', [
 232                               ['Zoom', RGraph.Zoom],
 233                               ['Application', <span style="color: green">[['Login...', function () {ModalDialog.Show('modaldialog_login', 300);}]]</span> ],
 234                               null,
 235                               ['Cancel', function () {}]
 236                              ]);
 237 </pre>
 238
 239     <p>
 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
 241         indentation.
 242     </p>
 243
 244     <a name="define"></a>
 245     <br />&nbsp;<br />
 246     <h3>How do I define context menus?</h3>
 247
 248     <p>
 249         Defining a context menu is quite a simple affair. Eg:
 250     </p>
 251
 252     <pre class="code">
 253 myBar.Set('chart.contextmenu', [
 254                                 ['Menu item 1', Callback1],
 255                                 ['Menu item 2', Callback2]
 256                                ]);</pre>
 257
 258     <p>
 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.
 261     </p>
 262
 263     <a name="seperators"></a>
 264     <br />&nbsp;<br />
 265     <h3>Can I have "separators"?</h3>
 266
 267     <p>
 268         Yes. Simply pass null instead of an array as your menu item. Eg:
 269     </p>
 270
 271     <pre class="code">
 272 myBar.Set('chart.contextmenu', [
 273                                 ['Menu item 1', Callback1],
 274                                 null,
 275                                 ['Menu item 2', Callback2]
 276                                ]);</pre>
 277
 278     <a name="bypass"></a>
 279     <br />&nbsp;<br />
 280     <h3>How do I bypass them?</h3>
 281
 282     <p>
 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.
 285     </p>
 286
 287     <a name="use"></a>
 288     <br />&nbsp;<br />
 289     <h3>What can I use them for?</h3>
 290
 291     <p>
 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:
 295     </p>
 296
 297     <div style="text-align: center">
 298         <canvas id="myCanvas" width="600" height="200">[No canvas support]</canvas>
 299     </div>
 300
 301     <a name="example"></a>
 302     <h3>Is there an example file that uses the CSS classes?</h3>
 303
 304     <p>
 305         You can take a look at the bottom of the <a href="../css/website.css" >CSS file for this website</a>.
 306     </p>
 307
 308     <a name="mac"></a>
 309     <br />&nbsp;<br />
 310     <h3>Context menus, Macs, Safari, Opera and MSIE 9</h3>
 311
 312     <p>
 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.
 316     </p>
 317
 318     <script>
 319         /**
 320         * Shows the bar chart
 321         */
 322         function ShowGraphOne ()
 323         {
 324             RGraph.Clear(document.getElementById('myCanvas'));
 325
 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');
 333             bar.Draw();
 334         }
 335
 336         /**
 337         * Show the line chart
 338         */
 339         function ShowGraphTwo()
 340         {
 341             RGraph.Clear(document.getElementById('myCanvas'));
 342
 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 () {}]]);
 354             line.Draw();
 355         }
 356
 357         /**
 358         * Show the first graph
 359         */
 360         window.onload = function ()
 361         {
 362             ShowGraphOne();
 363         }
 364
 365     </script>
 366
 367 </body>
 368 </html>