RGraph/docs/line.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 - line chart documentation</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas graph docs line chart" />
  24     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about the Line chart" />
  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 </head>
  29 <body>
  30
  31     <!-- Social networking buttons -->
  32     <script src="../libraries/RGraph.common.core.js" ></script>
  33
  34     <script>
  35         function HideTwitterDIV ()
  36         {
  37             document.getElementById("twitter_div").style.opacity = 0;
  38             document.getElementById("twitter_div").style.display = 'none';
  39         }
  40
  41
  42         function ShowTwitterDIV (e)
  43         {
  44             var e   = RGraph.FixEventObject(document.all ? event : e);
  45             var div = document.getElementById("twitter_div");
  46             var img = document.getElementById("twitter_icon");
  47
  48             div.style.display = 'block';
  49             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  50             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  51
  52             /**
  53             * Fade it in
  54             */
  55             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  56             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  57             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  58             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  59             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  60
  61             e.stopPropagation();
  62
  63             return false;
  64         }
  65
  66         /**
  67         * This code installs the event handler that hides the Twitter DIV
  68         */
  69         if (RGraph.isIE8()) {
  70              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  71         } else {
  72             window.addEventListener('click', HideTwitterDIV, false);
  73         }
  74     </script>
  75
  76     <!-- The twitter DIV -->
  77     <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;">
  78         <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>
  79         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  80     </div>
  81
  82     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
  83         <script>
  84             // Opera fix
  85             if (navigator.userAgent.indexOf('Opera') == -1) {
  86               document.getElementById("social_icons").style.position = 'fixed';
  87               document.getElementById("twitter_div").style.position = 'fixed';
  88
  89             }
  90         </script>
  91
  92         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
  93
  94
  95             <div id="social">
  96                 <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">
  97                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
  98                 </a>
  99
 100                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 101                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 102                 </a>
 103
 104
 105 <!--
 106                 <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">
 107                     <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"/>
 108                 </a>
 109
 110
 111                 <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">
 112                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 113                 </a>
 114
 115                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 116                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 117                 </a>
 118
 119                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 120                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 121                 </a>
 122 -->
 123             </div>
 124     </div>
 125     <!-- /Social networking buttons -->
 126
 127     <div id="breadcrumb">
 128         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 129         >
 130         <a href="index.html">Documentation</a>
 131         >
 132         Line chart
 133     </div>
 134
 135     <h1>RGraph: HTML5 canvas graph library - Line chart documentation</h1>
 136
 137     <script>
 138         if (RGraph.isIE8()) {
 139             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>');
 140         }
 141     </script>
 142
 143     <p>
 144         The line chart, along with the bar chart, is probably the most configurable of all the charts available.
 145     </p>
 146
 147     <p>
 148         The example file is <a href="../examples/line.html">here</a>.
 149     </p>
 150
 151     <ul>
 152         <li><a href="#available.properties">Properties</a></li>
 153         <li><a href="#available.methods">Methods</a></li>
 154         <li><a href="#combining.line.bar">Combining  the Line and Bar charts</a></li>
 155         <li><a href="#alternative.colors">Alternative colors</a></li>
 156         <li><a href="#custom.tickmarks">Custom tickmarks</a></li>
 157     </ul>
 158
 159     <pre class="code">
 160 &lt;script&gt;
 161     window.onload = function ()
 162     {
 163         var data = [10,4,17,50,25,19,20,25,30,29,30,29];
 164
 165         var line = new RGraph.Line("myLine", data);
 166         line.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
 167         line.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
 168         line.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
 169         line.Set('chart.colors', ['rgba(255,0,0,1)']);
 170         line.Set('chart.linewidth', 2);
 171         line.Set('chart.filled', true);
 172         line.Set('chart.hmargin', 5);
 173         line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
 174         line.Set('chart.gutter', 40);
 175         line.Draw();
 176     }
 177 &lt;/script&gt;
 178 </pre>
 179
 180     <a name="available.properties"></a>
 181     <h2>Properties</h2>
 182
 183     <p>
 184         You can use these properties to control how the bar graph apears. You can set them by using the Set() method. Eg:
 185     </p>
 186
 187     <p>
 188         <b>myLine.Set('name', 'value');</b>
 189     </p>
 190
 191     <ul>
 192         <li><a href="#background">Background</a></li>
 193         <li><a href="#labels and text">Labels and text</a></li>
 194         <li><a href="#margins">Margins</a></li><li><a href="#colors">Colors</a></li>
 195         <li><a href="#shadow">Shadow</a></li>
 196         <li><a href="#interactive features">Interactive features</a></li>
 197         <li><a href="#titles">Titles</a></li><li><a href="#key">Key</a></li>
 198         <li><a href="#scale">Scale</a></li>
 199         <li><a href="#axis properties">Axis properties</a></li>
 200         <li><a href="#zoom">Zoom</a></li><li><a href="#miscellaneous">Miscellaneous</a>
 201         </li>
 202     </ul>
 203
 204
 205 <a name="background"></a>
 206 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3>            <a name="chart.background.barcolor1"></a>
 207 <b>chart.background.barcolor1</b><br />
 208             The color of the background bars (1 of 2).<br /><i>Default: rgba(0,0,0,0)</i><br /><br />
 209             <a name="chart.background.barcolor2"></a>
 210 <b>chart.background.barcolor2</b><br />
 211             The color of the background bars (2 of 2).<br /><i>Default: rgba(0,0,0,0)</i><br /><br />
 212             <a name="chart.background.grid"></a>
 213 <b>chart.background.grid</b><br />
 214             Whether to show the background grid or not.<br /><i>Default: true</i><br /><br />
 215             <a name="chart.background.grid.color"></a>
 216 <b>chart.background.grid.color</b><br />
 217             The color of the background grid.<br /><i>Default: #eee</i><br /><br />
 218             <a name="chart.background.hbars"></a>
 219 <b>chart.background.hbars</b><br />
 220             An array of information stipulating horizontal colored bars. You can use these to indicate limits. Eg: <i>myLine.Set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]);</i> This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.<br /><i>Default: null</i><br /><br />
 221             <a name="chart.background.grid.hsize"></a>
 222 <b>chart.background.grid.hsize</b><br />
 223             The horizontal size of the grid.<br /><i>Default: 25</i><br /><br />
 224             <a name="chart.background.grid.vsize"></a>
 225 <b>chart.background.grid.vsize</b><br />
 226             The vertical size of the grid.<br /><i>Default: 25</i><br /><br />
 227             <a name="chart.background.grid.width"></a>
 228 <b>chart.background.grid.width</b><br />
 229             The width of the background grid.<br /><i>Default: 1</i><br /><br />
 230             <a name="chart.background.grid.border"></a>
 231 <b>chart.background.grid.border</b><br />
 232             Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br />
 233             <a name="chart.background.grid.hlines"></a>
 234 <b>chart.background.grid.hlines</b><br />
 235             Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br />
 236             <a name="chart.background.grid.vlines"></a>
 237 <b>chart.background.grid.vlines</b><br />
 238             Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br />
 239             <a name="chart.background.grid.autofit"></a>
 240 <b>chart.background.grid.autofit</b><br />
 241             Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br /><i>Default: false</i><br /><br />
 242             <a name="chart.background.grid.autofit.numhlines"></a>
 243 <b>chart.background.grid.autofit.numhlines</b><br />
 244             When using autofit this allows you to specify how many horizontal grid lines you want. <br /><i>Default: 7</i><br /><br />
 245             <a name="chart.background.grid.autofit.numvlines"></a>
 246 <b>chart.background.grid.autofit.numvlines</b><br />
 247             When using autofit this allows you to specify how many vertical grid lines you want. <br /><i>Default: 20</i><br /><br />
 248             <a name="chart.backdrop"></a>
 249 <b>chart.backdrop</b><br />
 250             When enabled this specifies that the line(s) will have a backdrop effect. You can control the transparency with the other backdrop settings).<br /><i>Default: false</i><br /><br />
 251             <a name="chart.backdrop.size"></a>
 252 <b>chart.backdrop.size</b><br />
 253             This controls the size/extent of the backdrop effect.<br /><i>Default: 30</i><br /><br />
 254             <a name="chart.backdrop.alpha"></a>
 255 <b>chart.backdrop.alpha</b><br />
 256             This controls how much transparency the backdrop effect has. It can go from 0 - 1.<br /><i>Default: 0.2</i><br /><br />
 257 <a name="labels and text"></a>
 258 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3>
 259
 260             <a name="chart.labels.above"></a>
 261             <b>chart.labels.above</b><br />
 262             Whether the values are shown in labels drawn above the line.<br />
 263             <i>Default: false</i><br /><br />
 264
 265             <a name="chart.labels.above.size"></a>
 266             <b>chart.labels.above.size</b><br />
 267             The size of the labels which are drawn above the line.<br />
 268             <i>Default: 8</i><br /><br />
 269
 270             <a name="chart.labels"></a>
 271             <b>chart.labels</b><br />
 272             An array of the X labels for the graph. <br />
 273             <i>Default: [] (An empty array)</i><br /><br />
 274
 275             <a name="chart.labels.ingraph"></a>
 276 <b>chart.labels.ingraph</b><br />
 277             An array of labels for the graph which are drawn "inside" the graph.  If you have 5 data points then this should have a corresponding number of elements, though there is a <a href="misc.html#shorthand.ingraph.labels">shorthand available</a>.<br /><i>Default: null</i><br /><br />
 278             <a name="chart.ylabels"></a>
 279 <b>chart.ylabels</b><br />
 280             Can be <i>true</i> or <i>false</i> and determines whether the chart has Y axis labels.<br /><i>Default: true</i><br /><br />
 281             <a name="chart.ylabels.invert"></a>
 282 <b>chart.ylabels.invert</b><br />
 283             Reverses the Y axis so that 0 is at the top, instead of the bottom.<br /><i>Default: false</i><br /><br />
 284             <a name="chart.ylabels.count"></a>
 285 <b>chart.ylabels.count</b><br />
 286             A value (<i>1, 3 or 5</i>) that controls how many Y labels there are. <br /><i>Default: 5</i><br /><br />
 287             <a name="chart.ylabels.inside"></a>
 288 <b>chart.ylabels.inside</b><br />
 289             This controls whether the Y labels are drawn inside the Y axis or not. If your labels are large, this may help.<br /><i>Default: false</i><br /><br />
 290             <a name="chart.ylabels.inside.color"></a>
 291 <b>chart.ylabels.inside.color</b><br />
 292             If the Y labels are to be drawn inside the Y axis, this is used as the background color.<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
 293             <a name="chart.xlabels.inside"></a>
 294 <b>chart.xlabels.inside</b><br />
 295             This controls whether the X labels are drawn inside the X axis or not. By using this you can significantly reduce the size of the gutter needed. <br /><i>Default: false</i><br /><br />
 296             <a name="chart.xlabels.inside.color"></a>
 297 <b>chart.xlabels.inside.color</b><br />
 298             If the X labels are to be drawn inside the X axis, this is used as the background color.<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
 299             <a name="chart.text.size"></a>
 300 <b>chart.text.size</b><br />
 301             The size of the text (in points).<br /><i>Default: 10</i><br /><br />
 302             <a name="chart.text.angle"></a>
 303 <b>chart.text.angle</b><br />
 304             The angle of the horizontal text labels (at the bottom of the graph). Previously this could be 0, 45 or 90, but now (31st July 2010) this can be any angle.<br /><i>Default: 0 (Horizontal)</i><br /><br />
 305             <a name="chart.text.font"></a>
 306 <b>chart.text.font</b><br />
 307             The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
 308             <a name="chart.text.color"></a>
 309 <b>chart.text.color</b><br />
 310             The color of the labels. <br /><i>Default: black</i><br /><br />
 311 <a name="margins"></a>
 312 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>            <a name="chart.gutter"></a>
 313 <b>chart.gutter</b><br />
 314             The gutter of the graph. This is the bit of the graph that the labels are in.<br /><i>Default: 25</i><br /><br />
 315             <a name="chart.hmargin"></a>
 316 <b>chart.hmargin</b><br />
 317             The size of the horizontal margin. This is on the inside of the axes.<br /><i>Default: 0</i><br /><br />
 318 <a name="colors"></a>
 319 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>            <a name="chart.colors"></a>
 320 <b>chart.colors</b><br />
 321             An array of line colors.<br /><i>Default: ['#f00', '#0f0', '', '#00f', '#f0f', '#ff0', '#0ff'] 9</i><br /><br />
 322             <a name="chart.colors.alternate"></a>
 323 <b>chart.colors.alternate</b><br />
 324             Set this to true if you want your line color(s) to be alternated. <a href="#note.colors">See note</a><br /><i>Default: false</i><br /><br />
 325             <a name="chart.fillstyle"></a>
 326 <b>chart.fillstyle</b><br />
 327             A single color or an array of colors that filled line charts will use.<br /><br /><b>Important:</b> This used to be a string, and still can be, but can now also be an array.<br /><i>Default: null</i><br /><br />
 328             <a name="chart.filled"></a>
 329 <b>chart.filled</b><br />
 330             Whether the area under the graph is filled or not. This looks best when there is no horizontal margin.<br /><i>Default: false</i><br /><br />
 331             <a name="chart.filled.range"></a>
 332 <b>chart.filled.range</b><br />
 333             This is useful for indicating a range. Exactly two datasets are required, with the space between them filled. This is useful for indicating a range.The <a href="../examples/line.html">line chart examples</a> page demonstrates this in action.<br /><i>Default: false</i><br /><br />
 334 <a name="shadow"></a>
 335 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3>            <a name="chart.shadow"></a>
 336 <b>chart.shadow</b><br />
 337             If true a shadow will be applied to the line.<br /><i>Default: false</i><br /><br />
 338             <a name="chart.shadow.color"></a>
 339 <b>chart.shadow.color</b><br />
 340             The color of the shadow. As well as a single color definition, this can also be an array of colors. This means that if you have multiple lines on your chart, each can have a different shadow color. <br /><i>Default: rgba(0,0,0,0.5)</i><br /><br />
 341             <a name="chart.shadow.offsetx"></a>
 342 <b>chart.shadow.offsetx</b><br />
 343             The X offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br />
 344             <a name="chart.shadow.offsety"></a>
 345 <b>chart.shadow.offsety</b><br />
 346             The Y offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br />
 347             <a name="chart.shadow.blur"></a>
 348 <b>chart.shadow.blur</b><br />
 349             The severity of the shadow blurring effect.<br /><i>Default: 3</i><br /><br />
 350 <a name="interactive features"></a>
 351 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>            <a name="chart.tooltips"></a>
 352 <b>chart.tooltips</b><br />
 353             These are tooltips for the line(s). It should be an array of tooltips. If you have multiple lines, simply pass multiple arrays to the Set() method. <br /><i>Default: [] (An empty array)</i><br /><br />
 354             <a name="chart.tooltips.effect"></a>
 355 <b>chart.tooltips.effect</b><br />
 356             The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
 357             <a name="chart.tooltips.coords.adjust"></a>
 358 <b>chart.tooltips.coords.adjust</b><br />
 359             If you translate() before drawing your graph to reduce wasted space, the coords used for tooltips may need adjusting by how much you translate() by. This setting is how to do it. It should be an array of the X/Y adjustments. There's an example of this on the <a href="misc.html#reducing.white.space">misc documentation</a> page.<br /><i>Default: [0,0]</i><br /><br />
 360             <a name="chart.tooltips.css.class"></a>
 361 <b>chart.tooltips.css.class</b><br />
 362             This is the name of the CSS class the graph uses.<br /><i>Default: RGraph_tooltip</i><br /><br />
 363             <a name="chart.tooltips.override"></a>
 364 <b>chart.tooltips.override</b><br />
 365             If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br />
 366             <a name="chart.tooltips.highlight"></a>
 367 <b>chart.tooltips.highlight</b><br />
 368             If you don't want/need the graph to be highlighted and thus avoid redrawing, (eg When <a href="combine.html">combining charts</a>), then set this to false.<br /><i>Default: true</i><br /><br />
 369             <a name="chart.crosshairs"></a>
 370 <b>chart.crosshairs</b><br />
 371             If true, you will get a crosshair centering on the current mouse position.<br /><i>Default: false</i><br /><br />
 372             <a name="chart.crosshairs.linewidth"></a>
 373 <b>chart.crosshairs.linewidth</b><br />
 374             This controls the linewidth of the crosshairs.<br /><i>Default: 1</i><br /><br />
 375             <a name="chart.crosshairs.color"></a>
 376 <b>chart.crosshairs.color</b><br />
 377             The color of the crosshairs.<br /><i>Default: #333</i><br /><br />
 378             <a name="chart.contextmenu"></a>
 379 <b>chart.contextmenu</b><br />
 380             An array of context menu items. Unlike the bar chart, you CAN have context menus at the same time as tooltips. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br />
 381             <a name="chart.annotatable"></a>
 382 <b>chart.annotatable</b><br />
 383             Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
 384             <a name="chart.annotate.color"></a>
 385 <b>chart.annotate.color</b><br />
 386             If you do not allow the use of the palette, then this will be the only color allowed for annotations.<br /><i>Default: black</i><br /><br />
 387             <a name="chart.resizable"></a>
 388 <b>chart.resizable</b><br />
 389             Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /><i>Default: false</i><br /><br />
 390             <a name="chart.adjustable"></a>
 391 <b>chart.adjustable</b><br />
 392             Defaulting to false, this determines whether your graph will be adjustable (click a point and drag it). <br /><i>Default: false</i><br /><br />
 393 <a name="titles"></a>
 394 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>            <a name="chart.title"></a>
 395 <b>chart.title</b><br />
 396             The title of the chart.<br /><i>Default: none</i><br /><br />
 397
 398 <a name="chart.title.background"></a>
 399 <b>chart.title.background</b><br />
 400 The background color (if any) for the title.<br />
 401 <i>Default: null</i><br /><br />
 402
 403             <a name="chart.title.vpos"></a>
 404 <b>chart.title.vpos</b><br />
 405             This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
 406             <a name="chart.title.color"></a>
 407 <b>chart.title.color</b><br />
 408             The color of the title.<br /> <i>Default: black</i><br /><br />
 409             <a name="chart.title.xaxis"></a>
 410 <b>chart.title.xaxis</b><br />
 411             This allows to specify a title for the X axis.<br /><i>Default: none</i><br /><br />
 412             <a name="chart.title.yaxis"></a>
 413 <b>chart.title.yaxis</b><br />
 414             This allows to specify a title for the Y axis.<br /><i>Default: none</i><br /><br />
 415             <a name="chart.title.xaxis.pos"></a>
 416 <b>chart.title.xaxis.pos</b><br />
 417             This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br />
 418             <a name="chart.title.yaxis.pos"></a>
 419 <b>chart.title.yaxis.pos</b><br />
 420             This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.25</i><br /><br />
 421
 422
 423
 424             <a name="key"></a>
 425             <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3>
 426
 427             <a name="chart.key"></a>
 428             <b>chart.key</b><br />
 429             An array of key information. <br />
 430             <i>Default: [] (An empty array)</i><br /><br />
 431
 432             <a name="chart.key.background"></a>
 433             <b>chart.key.background</b><br />
 434             The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br>
 435             <i>Default: white</i><br /><br />
 436
 437             <a name="chart.key.position"></a>
 438             <b>chart.key.position</b><br />
 439             Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
 440             <i>Default: graph</i><br /><br />
 441
 442             <b>chart.key.position.x</b><br />
 443             This allows you to specify a specific X coordinate for the key.<br />
 444             <i>Default: null</i><br /><br />
 445
 446             <b>chart.key.position.y</b><br />
 447             This allows you to specify a specific Y coordinate for the key.<br />
 448             <i>Default: null</i><br /><br />
 449
 450             <b>chart.key.position.gutter.boxed</b><br />
 451             If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
 452             <i>Default: true</i><br /><br />
 453
 454             <a name="chart.key.shadow"></a>
 455             <b>chart.key.shadow</b><br />
 456             Whether a small drop shadow is applied to the key.<br />
 457             <i>Default: false</i><br /><br />
 458
 459             <a name="chart.key.shadow.color"></a>
 460             <b>chart.key.shadow.color</b><br />
 461             The color of the shadow.<br />
 462             <i>Default: #666</i><br /><br />
 463
 464             <a name="chart.key.shadow.blur"></a>
 465             <b>chart.key.shadow.blur</b><br />
 466             The extent of the blurring effect used on the shadow.<br />
 467             <i>Default: 3</i><br /><br />
 468
 469             <a name="chart.key.shadow.offsetx"></a>
 470             <b>chart.key.shadow.offsetx</b><br />
 471             The X offset of the shadow.<br />
 472             <i>Default: 2</i><br /><br />
 473
 474             <a name="chart.key.shadow.offsety"></a>
 475             <b>chart.key.shadow.offsety</b><br />
 476             The Y offset of the shadow.<br />
 477             <i>Default: 2</i><br /><br />
 478
 479             <b>chart.key.rounded</b><br />
 480             This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
 481             <i>Default: false</i><br /><br />
 482
 483             <b>chart.key.color.shape</b><br />
 484             This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
 485             <i>Default: square</i><br /><br />
 486
 487 <a name="scale"></a>
 488 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3>            <a name="chart.units.post"></a>
 489 <b>chart.units.post</b><br />
 490             The units (if any) that the Y axis is measured in (gets appended to the number)<br /><i>Default: none</i><br /><br />
 491             <a name="chart.units.pre"></a>
 492 <b>chart.units.pre</b><br />
 493             The units (if any) that the Y axis is measured in (gets preppended to the number)<br /><i>Default: none</i><br /><br />
 494             <a name="chart.scale.decimals"></a>
 495 <b>chart.scale.decimals</b><br />
 496             Determines the precision of the numbers used as the scale.<br /><i>Default: 0</i><br /><br />
 497             <a name="chart.scale.point"></a>
 498 <b>chart.scale.point</b><br />
 499             The character used as the decimal point.<br /><i>Default: .</i><br /><br />
 500
 501             <a name="chart.scale.thousand"></a>
 502             <b>chart.scale.thousand</b><br />
 503             The character used as the thousand separator<br /><i>Default: ,</i><br /><br />
 504
 505             <a name="chart.scale.round"></a>
 506             <b>chart.scale.round</b><br />
 507             Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br />
 508             <i>Default: null</i><br /><br />
 509
 510             <a name="chart.ymin"></a>
 511 <b>chart.ymin</b><br />
 512             The optional minimum Y scale value. If not specified then it will be zero.<br /><i>Default: null</i><br /><br />
 513             <a name="chart.ymax"></a>
 514
 515             <b>chart.ymax</b><br />
 516             The optional maximum Y scale value. If not specified then it will be calculated.<br />
 517             <i>Default: null (It's calculated)</i><br /><br />
 518
 519             <b>chart.outofbounds</b><br />
 520             Normally, out-of-bounds values are not drawn. By setting this to <i>true</i> you can change this behaviour.<br />
 521             <i>Default: false</i><br /><br />
 522
 523 <a name="axis properties"></a>
 524 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Axis properties</h3>            <a name="chart.xticks"></a>
 525 <b>chart.xticks</b><br />
 526             The number of X tickmarks.<br /><i>Default: null (linked to number of datapoints)</i><br /><br />
 527             <a name="chart.ticksize"></a>
 528 <b>chart.ticksize</b><br />
 529             The size of the tick marks. This only affects certain styles of tickmarks.<br /><i>Default: 3</i><br /><br />
 530             <a name="chart.tickdirection"></a>
 531 <b>chart.tickdirection</b><br />
 532             Whether the ticks are above or below the axis.<br /><i>Default: -1 (-1 is below, 1 is above)</i><br /><br />
 533             <a name="chart.axis.color"></a>
 534 <b>chart.axis.color</b><br />
 535             The color of the axes.<br /><i>Default: black</i><br /><br />
 536             <a name="chart.xaxispos"></a>
 537 <b>chart.xaxispos</b><br />
 538             The position of the X axis. It can be either <i>bottom</i> or <i>center</i>.<br /><i>Default: bottom</i><br /><br />
 539             <a name="chart.yaxispos"></a>
 540 <b>chart.yaxispos</b><br />
 541             Specifies the Y axis position. Can be <i>left</i> or <i>right</i>.<br /><i>Default: left</i><br /><br />
 542             <a name="chart.axesontop"></a>
 543 <b>chart.axesontop</b><br />
 544             A minor option, this sets the axes to be redrawn after the graph has been drawn. This is only useful in a certain set of circumstances - the graph is filled and the line width is small.<br /><i>Default: false</i><br /><br />
 545             <a name="chart.noaxes"></a>
 546 <b>chart.noaxes</b><br />
 547             Whether the axes are drawn<br /><i>Default: false (the axes ARE drawn)</i><br /><br />
 548 <a name="zoom"></a>
 549 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3>            <a name="chart.zoom.mode"></a>
 550 <b>chart.zoom.mode</b><br />
 551             Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
 552             <a name="chart.zoom.factor"></a>
 553 <b>chart.zoom.factor</b><br />
 554             This is the factor that the graph will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
 555             <a name="chart.zoom.fade.in"></a>
 556 <b>chart.zoom.fade.in</b><br />
 557             Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
 558             <a name="chart.zoom.fade.out"></a>
 559 <b>chart.zoom.fade.out</b><br />
 560             Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
 561             <a name="chart.zoom.hdir"></a>
 562 <b>chart.zoom.hdir</b><br />
 563             The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
 564             <a name="chart.zoom.vdir"></a>
 565 <b>chart.zoom.vdir</b><br />
 566             The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
 567             <a name="chart.zoom.delay"></a>
 568 <b>chart.zoom.delay</b><br />
 569             The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
 570             <a name="chart.zoom.frames"></a>
 571 <b>chart.zoom.frames</b><br />
 572             The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
 573             <a name="chart.zoom.shadow"></a>
 574 <b>chart.zoom.shadow</b><br />
 575             Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
 576             <a name="chart.zoom.thumbnail.width"></a>
 577 <b>chart.zoom.thumbnail.width</b><br />
 578             When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
 579             <a name="chart.zoom.thumbnail.height"></a>
 580 <b>chart.zoom.thumbnail.height</b><br />
 581             When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
 582             <a name="chart.zoom.background"></a>
 583 <b>chart.zoom.background</b><br />
 584             Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
 585 <a name="miscellaneous"></a>
 586 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>            <a name="chart.tickmarks"></a>
 587 <b>chart.tickmarks</b><br />
 588             What kind of tickmarks to use on the graph. This can be:<ul><li>dot</li><li>circle</li><li>filledcircle</li><li>endcircle</li><li>square</li><li>endsquare</li><li>filledsquare</li><li>filledendsquare</li><li>tick</li><li>halftick</li><li>endtick</li><li>cross</li><li>borderedcircle (same as dot)</li><li>arrow</li><li>filledarrow</li></ul><p>Note that "arrow" and "filledarrow" look better with a thinner (1 or 2) linewidth setting. Also note that now (10th August 2010) as well as a string, this can be an array of different tickmark styles.<br /><i>Default: null</i><br /><br />
 589             <a name="chart.tickmarks.dot.color"></a>
 590 <b>chart.tickmarks.dot.color</b><br />
 591             This is the color of the BORDER around the dot/borderedcircle style tickmarks. <br /><i>Default: #fff</i><br /><br />
 592             <a name="chart.stepped"></a>
 593 <b>chart.stepped</b><br />
 594             Draws the line as stepped. Useful for showing stock performance for example.<br /><i>Default: false</i><br /><br />
 595             <a name="chart.linewidth"></a>
 596 <b>chart.linewidth</b><br />
 597             The width of the line (ie the actual line on the line graph). Note: If your line is stepped and filled, and you don't want a trailing line indicating the last value, you can set this to zero.<br /><i>Default: 1</i><br /><br />
 598             <a name="chart.variant"></a>
 599 <b>chart.variant</b><br />
 600             At present this can only be <i>3d</i>, and gives a small 3D effect.<br /><i>Default: null</i><br /><br />
 601 </div><!-- /DOCS --><br /><br />
 602
 603             <b>chart.chromefix</b><br />
 604             Since version 6, Chrome has had a shadow bug, which becomes apparent when you use shadow blurring. This value defaults
 605             to true and means that RGraph will skirt the bug with a small fix.<br /><i>Default: true</i><br /><br />
 606
 607         </div><!-- /DOCS --><br /><br />
 608
 609
 610     <a name="available.methods"></a>
 611     <h2>Methods</h2>
 612
 613     <a href="getPoint"></a>
 614         <b>obj.getPoint()</b><br /><br />
 615         This method makes it easier to get hold of which point on the Line chart has been hovered over. It returns an array of:
 616
 617         <ul>
 618             <li>The graph object</li>
 619             <li>The X coordinate</li>
 620             <li>The Y coordinate</li>
 621             <li>The numerical index of the point. This corresponds (for example) to the tooltips array, and the coordinates array</li>
 622         </ul>
 623
 624         An example usage is:
 625
 626         <pre class="code">
 627 &lt;canvas id="cvs" width="600" height="300"&gt;[No canvas support]&lt;/canvas&gt;
 628
 629 &lt;script src="RGraph.common.core.js"&gt;&lt;/script&gt;
 630 &lt;script src="RGraph.line.js"&gt;&lt;/script&gt;
 631
 632 &lt;script&gt;
 633     myGraph = new RGraph.Line('cvs', [10,4,2,4,1]);
 634     myGraph.Set('chart.hmargin', 10);
 635     myGraph.Set('chart.tickmarks', 'endcircle');
 636     myGraph.Set('chart.labels', ['Fred','John','Kev','Lou','Pete']);
 637     myGraph.Draw();
 638
 639
 640     RGraph.Register(myGraph);
 641
 642     myGraph.canvas.onmousemove = function (e)
 643     {
 644         RGraph.FixEventObject(e);
 645
 646         var canvas  = e.target;
 647         var context = canvas.getContext('2d');
 648         var obj     = e.target.__object__;
 649
 650         // This is the new method which simplifies getting coordinates
 651         var point = obj.getPoint(e);
 652
 653
 654         if (point) {
 655
 656             canvas.style.cursor = 'pointer';
 657
 658             // Is this the same tooltip as the one (if any) that's already being shown
 659             if (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ == point[3]) {
 660                 return;
 661             }
 662
 663             // Start afresh
 664             RGraph.Redraw();
 665
 666             // Show the tooltip
 667             RGraph.Tooltip(canvas, obj.Get('chart.labels')[point[3]], e.pageX, e.pageY, point[3]);
 668
 669             // Highlight the point
 670             context.strokeStyle = 'gray';
 671             context.fillStyle = 'white';
 672             context.beginPath();
 673             context.moveTo(point[1], point[2]);
 674             context.arc(point[1], point[2], 2, 0, 6.26, 0);
 675             context.stroke();
 676             context.fill();
 677
 678             return;
 679         }
 680
 681         canvas.style.cursor = 'default';
 682     }
 683
 684     window.onclick = function ()
 685     {
 686         RGraph.Redraw();
 687     }
 688 &lt;/script&gt;
 689 </pre>
 690
 691     <a name="combining.line.bar"></a>
 692         <h2>Combining the Line and Bar charts</h2>
 693
 694         <p>
 695             You can combine the Bar and Line charts with a bit of magic. It's actually quite easy to do. <a href="combine.html">Find out more here</a>.
 696             In the same vein, you can have Y axes on both the left and right.
 697         </p>
 698
 699
 700     <a name="alternative.colors"></a>
 701         <h2>Alternative colors</h2>
 702
 703         <p>
 704             Instead of a string stipulating the color, each element of the colors array can itself be a two element array,
 705             stipulating the up color, and the down color. To use alternating colors you must also stipulate the alternate property:
 706         </p>
 707
 708
 709         <pre class="code">
 710 myLine.Set('chart.colors.alternate', true);
 711 myLine.Set('chart.colors', ['red', ['blue', 'yellow'], 'green]);
 712 </pre>
 713
 714     <a name="custom.tickmarks"></a>
 715         <h2>Custom tickmarks</h2>
 716         <p>
 717             If none of the available tickmark styles are suitable, you can instead specify a function object that draws the tickmark,
 718             enabling you to draw the tickmark yourself. For example:
 719         </p>
 720
 721         <pre class="code">
 722 &lt;script&gt;
 723     line.Set('chart.tickmarks', myTick);
 724
 725     /**
 726     * The function that is called once per tickmark, to draw it
 727     *
 728     * @param object obj   The graph object
 729     * @param array  data  The entire line data
 730     * @param number value The individual points value
 731     * @param number index The current index, in the data array
 732     * @param number x     The X coordinate
 733     * @param number y     The Y coordinate
 734     * @param string color The color of the line
 735     * @param number prevX The previous X coordinate
 736     * @param number prevY The previous Y coordinate
 737     */
 738     function myTick (obj, data, value, index, x, y, color, prevX, prevY)
 739     {
 740         // Draw your custom tick here
 741     }
 742 &lt;/script&gt;
 743 </pre>
 744 </body>
 745 </html>