RGraph/docs/misc.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         * |                                                                              |
  18         * |                      http://www.rgraph.net/LICENSE.txt                       |
  19         * o------------------------------------------------------------------------------o
  20         */
  21     -->
  22     <title>RGraph: HTML5 canvas graph library - Miscellaneous</title>
  23
  24     <meta name="keywords" content="rgraph html5 canvas misc docs" />
  25     <meta name="description" content="RGraph: HTML5 canvas graph software - Miscellaneous documentation" />
  26
  27     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  28     <link rel="icon" type="image/png" href="/favicon.png">
  29
  30     <script src="../libraries/RGraph.common.core.js" ></script>
  31     <script src="../libraries/RGraph.common.tooltips.js" ></script>
  32     <script src="../libraries/RGraph.line.js" ></script>
  33
  34     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  35 </head>
  36 <body>
  37
  38     <!-- Social networking buttons -->
  39     <script src="../libraries/RGraph.common.core.js" ></script>
  40
  41     <script>
  42         function HideTwitterDIV ()
  43         {
  44             document.getElementById("twitter_div").style.opacity = 0;
  45             document.getElementById("twitter_div").style.display = 'none';
  46         }
  47
  48
  49         function ShowTwitterDIV (e)
  50         {
  51             var e   = RGraph.FixEventObject(document.all ? event : e);
  52             var div = document.getElementById("twitter_div");
  53             var img = document.getElementById("twitter_icon");
  54
  55             div.style.display = 'block';
  56             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  57             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  58
  59             /**
  60             * Fade it in
  61             */
  62             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  63             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  64             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  65             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  66             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  67
  68             e.stopPropagation();
  69
  70             return false;
  71         }
  72
  73         /**
  74         * This code installs the event handler that hides the Twitter DIV
  75         */
  76         if (RGraph.isIE8()) {
  77              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  78         } else {
  79             window.addEventListener('click', HideTwitterDIV, false);
  80         }
  81     </script>
  82
  83     <!-- The twitter DIV -->
  84     <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;">
  85         <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>
  86         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  87     </div>
  88
  89     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
  90         <script>
  91             // Opera fix
  92             if (navigator.userAgent.indexOf('Opera') == -1) {
  93               document.getElementById("social_icons").style.position = 'fixed';
  94               document.getElementById("twitter_div").style.position = 'fixed';
  95
  96             }
  97         </script>
  98
  99         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 100
 101
 102             <div id="social">
 103                 <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">
 104                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 105                 </a>
 106
 107                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 108                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 109                 </a>
 110
 111
 112
 113
 114 <!--
 115                 <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">
 116                     <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"/>
 117                 </a>
 118
 119
 120                 <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">
 121                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 122                 </a>
 123
 124                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 125                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 126                 </a>
 127
 128                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 129                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 130                 </a>
 131 -->
 132             </div>
 133     </div>
 134     <!-- /Social networking buttons -->
 135
 136     <div id="breadcrumb">
 137         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 138         >
 139         <a href="index.html">Documentation</a>
 140         >
 141         Miscellaneous documentation
 142     </div>
 143
 144     <h1>RGraph: HTML5 canvas graph library - Miscellaneous documentation</h1>
 145
 146     <script>
 147         if (RGraph.isIE8()) {
 148             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>');
 149         }
 150     </script>
 151
 152     <ul>
 153         <li><a href="#fallback.content">Canvas fallback content and visually impaired users</a></li>
 154         <li><a href="#limits">Upper and lower limits for horizontal bars</a></li>
 155         <li><a href="#canvas.width.height">Setting the canvas width and height</a></li>
 156         <li><a href="#older.browsers">RGraph and older browsers</a></li>
 157         <li><a href="#msie">RGraph and Microsoft Internet Explorer</a></li>
 158         <li><a href="#debugging">Debugging tips</a></li>
 159         <li><a href="#inspecting">Inspecting an RGraph graph</a></li>
 160         <li><a href="#context.menus">Double click context menus</a></li>
 161         <li><a href="#event.handlers">Adding your own event handlers</a></li>
 162         <li><a href="#crlf">Carriage returns and newlines in labels</a></li>
 163         <li><a href="#tradar">Why is the Traditional Radar chart so called?</a></li>
 164         <li><a href="#character.set">Character set issues</a></li>
 165         <li><a href="#rgraph.identify">How to identify an RGraph object</a></li>
 166         <li><a href="#static.y.axis">Static Y axis</a></li>
 167         <li><a href="#reducing.white.space">Reducing white space</a></li>
 168         <li><a href="#in.graph">In-graph labels</a></li>
 169         <li><a href="#shorthand.ingraph.labels">Shorthand for in-graph labels</a></li>
 170         <li><a href="#dom2.events">DOM2 Event handlers</a></li>
 171         <li><a href="#gutter.suggest">Gutter suggestion function</a></li>
 172         <li><a href="#data.types">Data types</a></li>
 173         <li><a href="#create.your.own">Creating your own Graph type</a></li>
 174         <li><a href="#known.issues">Known issues</a></li>
 175     </ul>
 176
 177     <a name="fallback.content"></a>
 178     <br />&nbsp;<br />&nbsp;<br />
 179     <h4>Canvas fallback content and visually impaired users</h4>
 180
 181     <p>
 182         When using the canvas element you should be aware of the accessibility of your graphs, for example where vision limited users are
 183         concerned. Screen readers, for example, may not be able to convert a graph into something that is reasonable, so you should
 184         consider
 185         doing this yourself, possibly using the canvas fallback content (ie the content in between the canvas tags). A possible example
 186         would be to put a table of data inside the canvas tag that the graph on the canvas represents. Doing this goes a long way
 187         towards making the data available to everyone. You might also wish to consider using the <a href="zoom.html">full canvas
 188         zoom</a> or the <a href="resizing.html">resizing feature</a> to enable people to enlarge the graph.
 189     </p>
 190
 191     <a name="limits"></a>
 192     <br />&nbsp;<br />&nbsp;<br />
 193     <h4>Upper and lower limits for horizontal bars</h4>
 194
 195     <p>
 196         If you don't wish to specify an upper or lower limit for horizontal bars, and you just want them to extend to the upper or lower
 197         limits of the graph, whatever they may be, you can specify null for the value determining how far they extend. For cases where
 198         the X axis is in the middle and you're specifying a negative start value, or you want the bar to extend all the way to the
 199         bottom, you can simply specify an arbitrary length (eg -999999). Eg:
 200     </p>
 201
 202     <pre class="code">myBar.Set('chart.background.hbars', [[0, null, 'green'], [0,-999999,'red']]);</pre>
 203
 204     <a name="canvas.width.height"></a>
 205     <br />&nbsp;<br />&nbsp;<br />
 206     <h4>Setting the canvas width and height</h4>
 207
 208     <p>
 209         To set the canvas width and height you must use the HTML width/height attributes and NOT CSS. If you do use CSS, the canvas
 210         will be scaled, and not enlarged, to fit the new width/height. Eg:
 211     </p>
 212
 213     <pre class="code">&lt;canvas id="myCanvas" width="200" height="100"&gt;[No canvas support]&lt;canvas&gt;</pre>
 214
 215     <p />
 216
 217     <a name="older.browsers"></a>
 218     <br />&nbsp;<br />&nbsp;<br />
 219     <h4>RGraph and older browsers</h4>
 220
 221     <p>
 222         Older versions of browsers are supported (assuming they have canvas support), however, if they don't support the canvas text
 223         or shadow APIs these will naturally be unavailable. The graphs will still be drawn, though without shadows or text.
 224     </p>
 225
 226     <a name="msie"></a>
 227     <br />&nbsp;<br />&nbsp;<br />
 228     <h4>RGraph and Microsoft Internet Explorer</h4>
 229
 230     <p>
 231         You can now use RGraph with Internet Explorer 8 in conjunction with ExCanvas, (which brings a degree of &lt;canvas&gt; support to MSIE).
 232         Bear in mind though that shadows are not available and thus are simulated. Microsoft Internet Explorer 9 has native &lt;canvas&gt;
 233         support. You can see some screenshots of it <a href="http://groups.google.com/group/rgraph/browse_thread/thread/3cce2cd655918b0c#" target="_blank">here</a>.
 234     </p>
 235
 236     <a name="debugging"></a>
 237     <br />&nbsp;<br />&nbsp;<br />
 238     <h4>Debugging tips</h4>
 239
 240     <p>
 241         If you're having a hard time debugging your graph, try these:
 242     </p>
 243
 244     <ul>
 245         <li>Ensure you have only one graph on the page</li>
 246         <li>Make sure you have disabled your web browsers cache (the Firefox <a href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer toolbar</a> can do this for Firefox)</li>
 247         <li>Try using <a href="http://www.getfirebug.com" target="_blank">Firebug</a> (for Firefox) or the Webkit developer tools (for Google Chrome and Safari)</li>
 248         <li>Reduce the page to the bare minimum.</li>
 249         <li>Start with a very basic graph and build it up slowly.</li>
 250     </ul>
 251
 252
 253
 254     <a name="inspecting"></a>
 255     <br />&nbsp;<br />&nbsp;<br />
 256     <h4>Inspecting an RGraph graph</h4>
 257
 258     <p>
 259         To help when debugging your RGraph graphs and canvas elements, you can use you browsers built in debugging tools.
 260         An example is the WebKit developer tools which are available in Google Chrome and Apple Safari. There is a screenshot
 261         of these tools (in docked mode) <a href="../images/introspection.png" target="_blank"><b>here</b></a>. To view these
 262         tools in Google Chrome press CTRL+SHIFT+J. Inspect the canvas, and then the associated object can be found via
 263         the <i>__object__</i> property.
 264     </p>
 265
 266
 267     <a name="context.menus"></a>
 268     <br />&nbsp;<br />&nbsp;<br />
 269     <h4>Double click context menus</h4>
 270
 271     <p>
 272         Windows Opera, Windows Safari, Mac Safari and Mac Firefox all attach the context menu to the double click event (left mouse button),
 273         not the right, in order to make it more reliable.
 274     </p>
 275
 276
 277     <a name="event.handlers"></a>
 278     <br />&nbsp;<br />&nbsp;<br />
 279     <h4>Adding your own event handlers</h4>
 280
 281     <p>
 282         Because each RGraph object exposes the canvas element (the same as what you get from <i>document.getElementById()</i>),
 283         you can use normal procedures to add your own event handlers. Eg If you wanted to add your own onclick handler you could
 284         do this:
 285     </p>
 286
 287     <pre class="code">
 288 &lt;script&gt;
 289     var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]);
 290     myBar.Draw();
 291
 292     myBar.canvas.onclick = function ()
 293     {
 294     }
 295 &lt;/script&gt;
 296 </pre>
 297     <p>
 298         But what if, for example, you're using an RGraph feature which
 299         uses the event handler that you need? In this case you can use the standard DOM method <i>addEventListener()</i>. This will add
 300         your new event handler without replacing any existing one (ie the one installed by RGraph). For example:
 301     </p>
 302
 303     <pre class="code">
 304 &lt;script&gt;
 305     var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]);
 306     myBar.Draw();
 307
 308     function myFunc ()
 309     {
 310     }
 311
 312     myBar.canvas.addEventListener('click', myFunc, false)
 313 &lt;/script&gt;
 314 </pre>
 315
 316
 317     <a name="crlf"></a>
 318     <br />&nbsp;<br />&nbsp;<br />
 319     <h4>Carriage returns and newlines in labels</h4>
 320
 321     <p>
 322         You can put carriage returns in your labels by using the string <i>\r\n</i>. This means your labels will span multiple lines.
 323         Like so:
 324     </p>
 325
 326     <pre class="code">myBar.Set('chart.labels', 'John\r\n(Winner!)', ...)</pre>
 327
 328
 329     <a name="tradar"></a>
 330     <br />&nbsp;<br />&nbsp;<br />
 331     <h4>Why is the Traditional Radar chart so called?</h4>
 332
 333     <p>
 334         Historical reasons. There used to be two Radar charts in RGraph - the TRadar and an older one called the Pseudo radar chart.
 335         The Pseudo Radar chart was converted into the Rose chart. Renaming the TRadar will only cause problems and there's no pressing
 336         reason to do so, so for the moment it remains the TRadar chart.
 337     </p>
 338
 339
 340     <a name="character.set"></a>
 341     <br />&nbsp;<br />&nbsp;<br />
 342     <h4>Character set issues</h4>
 343
 344     <p>
 345         If you're seeing strange, unrecognised characters in your text labels or titles, you may need to specify the correct
 346         character set that the browser should use. In PHP you can do this with the <i>header()</i> function (which, as the
 347         name suggests, sends a HTTP header):
 348     </p>
 349
 350     <pre class="code">&lt;?php
 351     header("Content-Type: text/html; charset=ISO-8859-1");
 352 ?&gt;</pre>
 353
 354     <p>
 355         If you use Apache, you could use the <i>header</i> directive, though this may be overridden by other directives,
 356         eg <i>AddDefaultCharset</i>.
 357     </p>
 358
 359     <a name="rgraph.identify"></a>
 360     <br />&nbsp;<br />&nbsp;<br />
 361     <h4>How to identify an RGraph object</h4>
 362
 363     <p>
 364         Because identity can sometimes be a tricky affair, there are a few RGraph properties that you can use to check whether an object
 365         is an RGraph object:
 366     </p>
 367
 368     <ul>
 369         <li><i>obj.isRGraph</i> - This is a boolean that you can use to clearly identify an RGraph object.</li>
 370         <li><i>obj.type</i> - This identifies the type of an RGraph object. It is a string which contains a one word description of the objects graph type, eg bar/line/pie.</li>
 371     </ul>
 372
 373
 374     <!------------------------------------------------------------------------------------------------------------->
 375
 376
 377     <!--
 378         The HTML and script necessary for a graph with a static Y axis. The libraries are included at the top of the page
 379         in the <HEAD>
 380     -->
 381     <div style="position: relative; float: right; margin-right: 10px; margin-top: 10px">
 382         <!-- The width here is set further down the page in script -->
 383         <canvas id="axes" width="0" height="200" style="position: absolute; top: 0; left: 0; z-index: 100"></canvas>
 384         <div style="width: 600px; overflow: auto">
 385             <canvas id="cvs" width="1000" height="200"></canvas>
 386         </div>
 387     </div>
 388
 389
 390
 391     <a name="static.y.axis"></a>
 392     <br />&nbsp;<br />&nbsp;<br />
 393     <h4>Static Y axis</h4>
 394
 395
 396     <script>
 397         ShowGraphOne = function ()
 398         {
 399             /**
 400             * This is the script that draws the graph
 401             */
 402             line = new RGraph.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]);
 403             line.Set('chart.noaxes', true); // We draw the Y axis ourselves further down the page
 404             line.Set('chart.gutter', 27);
 405             line.Set('chart.hmargin', 5);
 406             line.Set('chart.linewidth', 3);
 407             line.Set('chart.shadow', true);
 408             line.Set('chart.shadow.offsetx', 0);
 409             line.Set('chart.shadow.offsety', 0);
 410             line.Set('chart.shadow.blur', 15);
 411             line.Set('chart.shadow.color', 'red');
 412             line.Set('chart.text.angle', 15);
 413             line.Set('chart.tooltips', [
 414                                         'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
 415                                         'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
 416                                        ]);
 417             line.Set('chart.labels', [
 418                                       '','Feb 09', 'Mar 09','Apr 09','May 09','Jun 09','Jul 09','Aug 09','Sep 09','Oct 09','Nov 09', 'Dec 09',
 419                                       'Jan 10', 'Feb 10', 'Mar 10','Apr 10','May 10','Jun 10','Jul 10','Aug 10','Sep 10','Oct 10','Nov 10', 'Dec 10'
 420                                      ]);
 421             line.Draw();
 422
 423
 424
 425             /**
 426             * And this is the script that draws the left axis, on the other canvas (that doesn't move)
 427             */
 428             ca = document.getElementById("axes")
 429             co = ca.getContext('2d');
 430
 431
 432             /**
 433             * This sets the smaller canvas to cover the whole of the graphs left gutter
 434             */
 435             ca.width = line.Get('chart.gutter') + 1;
 436
 437
 438             RGraph.Clear(ca, 'white');
 439
 440
 441             /**
 442             * This draws the static axis
 443             */
 444             co.beginPath();
 445                 co.moveTo(line.Get('chart.gutter'), line.Get('chart.gutter'));
 446                 co.lineTo(line.Get('chart.gutter'), line.canvas.height - line.Get('chart.gutter'));
 447
 448                 // Draw the tickmarks on the axis
 449                 var numTicks = 10;
 450                 for (var i=0; i<=numTicks; ++i) {
 451                     co.moveTo(line.Get('chart.gutter'), line.Get('chart.gutter') + (((ca.height - (2 * line.Get('chart.gutter'))) / numTicks) * i));
 452                     co.lineTo(line.Get('chart.gutter') - 3, line.Get('chart.gutter') + (((ca.height - (2 * line.Get('chart.gutter'))) / numTicks) * i));
 453                 }
 454
 455             co.stroke();
 456
 457
 458
 459             /**
 460             * This draws the labels for the static axis
 461             */
 462             co.beginPath();
 463                 var color = 'black';
 464                 var size = 10;
 465
 466                 for (var i=0; i<5; ++i) {
 467                     co.fillStyle = color;
 468                     co.textAlign = 'right';
 469                     co.textBaseline = 'middle';
 470                     var h = line.canvas.height - (2 * line.Get('chart.gutter'));
 471
 472                     RGraph.Text(co, 'Verdana', size, line.Get('chart.gutter') - 4, line.Get('chart.gutter') + (h * (i/5)), line.max - (line.max * (i/5)));
 473                 }
 474             co.fill();
 475         }
 476     </script>
 477
 478     A static Y axis is useful if you have a wide chart but limited space. Whilst not part of the RGraph libraries itself, it can be
 479     achieved with a little HTML, like the graph shown. The HTML and the script to achieve this is documented in the source
 480     of this page. It involves placing an extra canvas above the graph with the Y axis drawn on it. This canvas doesn't
 481     move when the main canvas scrolls left and right.
 482
 483     <p />
 484
 485     <b>Note:</b> Because Firefox doesn't support the event.offsetX and event.offsetY properties, and they have to be simulated,
 486     scrolling and tooltips in this case and this browser doesn't work.
 487
 488
 489     <!------------------------------------------------------------------------------------------------------------->
 490
 491
 492     <br clear="all" />
 493     <br clear="all" />
 494
 495
 496     <!-- This graph is an example of how you can eliminate the gutter white space by translating before you draw the graph. -->
 497
 498     <a name="reducing.white.space"></a>
 499     <br />&nbsp;<br />&nbsp;<br />
 500     <h4>Reducing white space</h4>
 501
 502     <canvas id="myc" width="600" height="250" style="float: right; border: dashed  1px gray; margin-right: 10px"></canvas>
 503
 504     <script>
 505         ShowGraphTwo = function ()
 506         {
 507             // First translate to eliminate the top and gutters
 508             document.getElementById("myc").getContext('2d').translate(15, -30);
 509
 510
 511             var arg1 = [73, 65, 76, 75, 69, 73, 54, 61, 89, 77];
 512             var arg2 = [264, 240, 240, 256, 200, 208, 240, 216, 248, 240]
 513
 514             var line1 = new RGraph.Line('myc', arg1 , arg2);
 515             line1.Set('chart.colors', ['red', 'silver']);
 516             line1.Set('chart.background.barcolor1', 'white');
 517             line1.Set('chart.background.barcolor2', 'white');
 518             line1.Set('chart.labels', ['Jan 2000',
 519                                        'Feb 2001',
 520                                        'Mar 2002',
 521                                        'Apr 2003',
 522                                        'May 2004',
 523                                        'Jun 2005',
 524                                        'Jul 2006',
 525                                        'Aug 2007',
 526                                        'Sep 2008',
 527                                        'Oct 2009'])
 528             line1.Set('chart.filled', true);
 529             line1.Set('chart.fillstyle', ['#fcc', '#cfc']);
 530             line1.Set('chart.gutter', 45);
 531             line1.Set('chart.background.grid', true);
 532             line1.Set('chart.ymax', 365)
 533             line1.Set('chart.yaxispos', 'right');
 534             line1.Set('chart.title.xaxis', 'Month');
 535             line1.Set('chart.title.yaxis', 'Temperature');
 536             line1.Set('chart.title.xaxis.pos', -0.3);
 537             line1.Set('chart.title.yaxis.pos', 0.3);
 538             line1.Set('chart.text.angle', 30);
 539             line1.Set('chart.tooltips', [
 540                                          'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009',
 541                                          'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009'
 542                                         ]);
 543             line1.Set('chart.tooltips.coords.adjust', [15,-30]);
 544             line1.Draw();
 545         }
 546
 547         window.onload = function ()
 548         {
 549             ShowGraphOne();
 550             ShowGraphTwo();
 551         }
 552     </script>
 553
 554     <p>
 555         If the labels that you have require a large gutter you can reduce the amount of wasted space by using the standard 2D
 556         context method <i>translate()</i>. This effectively moves the coordinate system so that (0,0) is no longer in the top
 557         left corner, but whereever you put it. For example if you translate by (15,-15), the origin will then  be 15 pixels right and
 558         15 pixels up compared to where it was.
 559     </p>
 560
 561     <p>
 562         Because the coordinate system is being changed things that rely on coordinates, eg tooltips, will be affected. For this reason
 563         there is the property <i>chart.tooltips.coords.adjust</i> which you can use to tell RGraph that you've translated and the
 564         tooltip coordinates will be adjusted appropriately.
 565     </p>
 566
 567     <pre class="code">
 568 // This moves the graph to the right by 15px, and up by 15px. Do this before the call to .Draw()
 569 myObject.context.translate(15,-15);
 570 </pre>
 571
 572
 573
 574     <br clear="all" />
 575
 576
 577     <a name="in.graph"></a>
 578     <br />&nbsp;<br />&nbsp;<br />
 579     <h4>In-graph labels</h4>
 580
 581         <p>
 582             As well as an array of strings, like this:
 583         </p>
 584
 585         <pre class="code">obj.Set('chart.labels.ingraph', ['First label','Second label']);</pre>
 586
 587         <p>
 588             The string can also be an array, consisting of color and placement information, like this:
 589         </p>
 590
 591         <pre class="code">obj.Set('chart.labels.ingraph', ['First label',<span style="color: green">['Second label', 'red', 'yellow', -1, 50]</span> ]);</pre>
 592
 593
 594         <p>
 595             You can read more information about this <a href="ingraph.html">here</a>.
 596         </p>
 597
 598     <a name="shorthand.ingraph.labels"></a>
 599     <br />&nbsp;<br />&nbsp;<br />
 600     <h4>Shorthand for in-graph labels</h4>
 601             <p>
 602                 Instead of providing a full array of <i>null</i> elements for in-graph labels which may get a little unwieldy,
 603                 you can instead  specify an integer that specifies how many elements to skip. Like this:
 604             </p>
 605
 606             <pre class="code">line.Set('chart.labels.ingraph', [6, 'July', 3, 'November']);</pre>
 607
 608         <br clear="all" />
 609         <br clear="all" />
 610
 611     <a name="dom2.events"></a>
 612     <br />&nbsp;<br />&nbsp;<br />
 613     <h4>DOM2 Event handlers</h4>
 614             <p>
 615                 All the graphs have now (1st October 2010) been converted to DOM2 for tooltips event registration. This allows them to
 616                 be far more co-operative if you're using events. Tooltips will not be compatible with MSIE8 - the graphs will still be
 617                 drawn, albeit without tooltips.
 618             </p>
 619
 620
 621
 622         <br clear="all" />
 623
 624     <a name="gutter.suggest"></a>
 625     <br />&nbsp;<br />&nbsp;<br />
 626     <h4>Gutter suggestion function</h4>
 627             <p>
 628                 RGraph now contains a function (<i>RGraph.getGutterSuggest()</i>) that will provide a simple suggestion for the gutter setting. This function is based on the
 629                 left gutter  and labels and should be considered an approximate value.
 630             </p>
 631
 632         <br clear="all" />
 633
 634
 635
 636     <a name="data.types"></a>
 637     <br />&nbsp;<br />&nbsp;<br />
 638     <h4>Data types</h4>
 639         <p>
 640             If your data values aren't the correct type - ie numbers - it can cause problems. Pay particular attention to this
 641             when you're getting your data from data sources which may be classed as strings, such as JSON or AJAX requests.
 642         </p>
 643
 644
 645
 646
 647     <a name="create.your.own"></a>
 648     <br />&nbsp;<br />&nbsp;<br />
 649     <h4>Creating your own Graph type</h4>
 650         <p>
 651             If you wish to create your own graph type, there is a skeleton file
 652             <a href="../libraries/RGraph.skeleton.js" target="_blank"><b>here</b></a> that you can use as a starting point.
 653             This file contains the bare bones of an RGraph object, such as the .Get() and .Set() methods, as well as examples
 654             of common properties.
 655         </p>
 656
 657     <a name="known.issues"></a>
 658     <br />&nbsp;<br />&nbsp;<br />
 659     <h4>Known issues</h4>
 660
 661     <p>
 662         There's a few known issues documented <a href="issues.html">here</a>
 663     </p>
 664
 665
 666     <p />
 667 </body>
 668 </html>