RGraph/docs/combine.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 - combining bar and line graphs</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas graph docs combining" />
  24     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about combining charts" />
  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.common.tooltips.js" ></script>
  32     <script src="../libraries/RGraph.bar.js" ></script>
  33     <script src="../libraries/RGraph.line.js" ></script>
  34     <script src="../libraries/RGraph.pie.js" ></script>
  35     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  36
  37     <style>
  38         div.RGraph_tooltip div {
  39             display: inline-block;
  40             width: 10px;
  41             height: 10px;
  42             margin-right: 5px;
  43         }
  44
  45         div.RGraph_tooltip div#green {
  46             background-color: green;
  47         }
  48
  49         div.RGraph_tooltip div#red {
  50             background-color: red;
  51         }
  52
  53         div.RGraph_tooltip div#gray {
  54             background-color: #ccc;
  55         }
  56     </style>
  57
  58
  59     <script>
  60         function enlarge_tooltip_graph (e, title)
  61         {
  62             var bg = document.createElement('DIV');
  63                 bg.style.opacity = 0;
  64                 bg.style.position = 'fixed';
  65                 bg.style.left = 0;
  66                 bg.style.top = 0;
  67                 bg.style.width = '2000px';
  68                 bg.style.height = '2000px';
  69                 bg.style.backgroundColor = 'rgba(0,0,0,0.2)';
  70                 bg.style.zIndex = 32568;
  71                 bg.style.textAlign = 'center';
  72             document.body.appendChild(bg);
  73
  74             var div = document.createElement('DIV');
  75                 div.style.position = 'relative';
  76                 div.style.backgroundColor = 'white';
  77                 div.style.top = '200px';
  78                 div.style.width = '300px'
  79                 div.style.height = '240px';
  80                 div.style.padding = '15px';
  81                 div.style.WebkitBorderRadius = '5px';
  82                 div.style.MozBorderRadius = '5px';
  83                 div.style.borderRadius = '5px';
  84                 div.style.left = ((document.body.clientWidth / 2) - 175) + 'px';
  85
  86                 // Add standard box-shadow and -moz-box-shadow
  87                 div.style.WebkitBoxShadow = 'gray 0 0 25px';
  88                 div.style.MozBoxShadow = '0 0 25px gray';
  89                 div.style.boxShadow = '0 0 25px gray';
  90
  91                 div.style.border = '1px black solid';
  92
  93             bg.appendChild(div);
  94
  95             var canvas = document.createElement('CANVAS');
  96                 canvas.width  = 300;
  97                 canvas.height = 240;
  98                 canvas.id     = 'big_pie';
  99             div.appendChild(canvas);
 100
 101             bg.onmousedown = function (e)
 102             {
 103                 this.style.display = 'none';
 104                 document.body.removeChild(this);
 105
 106                 e.stopPropagation();
 107             }
 108
 109             div.onmousedown = function (e)
 110             {
 111                 e.stopPropagation();
 112             }
 113
 114             var data = e.target.__object__.data;
 115
 116             var pie = new RGraph.Pie('big_pie', data);
 117             pie.Set('chart.strokestyle', 'white');
 118             pie.Set('chart.linewidth', 5);
 119             pie.Set('chart.title', title + ' statistics');
 120             pie.Set('chart.align', 'left');
 121             pie.Set('chart.colors', ['red','green','#ccc']);
 122             pie.Set('chart.key', ['Jane', 'Fred', 'John']);
 123             pie.Set('chart.key.shadow', true);
 124             pie.Set('chart.key.shadow.blur', 15);
 125             pie.Set('chart.key.shadow.offsetx', 0);
 126             pie.Set('chart.key.shadow.offsety', 0);
 127             pie.Set('chart.key.shadow.color', 'gray');
 128             pie.Set('chart.key.rounded', true);
 129             pie.Draw();
 130
 131
 132             setTimeout(function () {bg.style.opacity = 0.2;}, 50);
 133             setTimeout(function () {bg.style.opacity = 0.4;}, 100);
 134             setTimeout(function () {bg.style.opacity = 0.6;}, 150);
 135             setTimeout(function () {bg.style.opacity = 0.8;}, 200);
 136             setTimeout(function () {bg.style.opacity = 1;}, 250);
 137
 138         }
 139     </script>
 140
 141 </head>
 142 <body>
 143
 144     <!-- Social networking buttons -->
 145     <script src="../libraries/RGraph.common.core.js" ></script>
 146
 147     <script>
 148         function HideTwitterDIV ()
 149         {
 150             document.getElementById("twitter_div").style.opacity = 0;
 151             document.getElementById("twitter_div").style.display = 'none';
 152         }
 153
 154
 155         function ShowTwitterDIV (e)
 156         {
 157             var e   = RGraph.FixEventObject(document.all ? event : e);
 158             var div = document.getElementById("twitter_div");
 159             var img = document.getElementById("twitter_icon");
 160
 161             div.style.display = 'block';
 162             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
 163             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
 164
 165             /**
 166             * Fade it in
 167             */
 168             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
 169             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
 170             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
 171             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
 172             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
 173
 174             e.stopPropagation();
 175
 176             return false;
 177         }
 178
 179         /**
 180         * This code installs the event handler that hides the Twitter DIV
 181         */
 182         if (RGraph.isIE8()) {
 183              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 184         } else {
 185             window.addEventListener('click', HideTwitterDIV, false);
 186         }
 187     </script>
 188
 189     <!-- The twitter DIV -->
 190     <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;">
 191         <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>
 192         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 193     </div>
 194
 195     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 196         <script>
 197             // Opera fix
 198             if (navigator.userAgent.indexOf('Opera') == -1) {
 199               document.getElementById("social_icons").style.position = 'fixed';
 200               document.getElementById("twitter_div").style.position = 'fixed';
 201
 202             }
 203         </script>
 204
 205         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 206
 207
 208             <div id="social">
 209                 <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">
 210                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 211                 </a>
 212
 213                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 214                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 215                 </a>
 216
 217
 218 <!--
 219                 <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">
 220                     <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"/>
 221                 </a>
 222
 223
 224                 <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">
 225                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 226                 </a>
 227
 228                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 229                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 230                 </a>
 231
 232                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 233                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 234                 </a>
 235 -->
 236             </div>
 237     </div>
 238     <!-- /Social networking buttons -->
 239
 240     <div id="breadcrumb">
 241         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 242         >
 243         <a href="./index.html">Documentation</a>
 244         >
 245         Combining charts
 246     </div>
 247
 248     <h1>RGraph: HTML5 canvas graph library - Combining charts</h1>
 249
 250     <script>
 251         if (RGraph.isIE8()) {
 252             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>');
 253         }
 254     </script>
 255
 256     <ul>
 257         <li><a href="#barandline">Combining bar and line charts</a></li>
 258         <li><a href="#combiningline">Combining Line charts</a></li>
 259     </ul>
 260
 261     <a name="barandline"></a>
 262     <h4>Combining bar and line charts</h4>
 263
 264     <canvas id="myCanvas" width="600" height="250" style="float: right; border: 1px dashed gray">[No canvas support]</canvas>
 265
 266     <script>
 267         var bar = new RGraph.Bar('myCanvas', [4,5,3,4,1,2,6,5,8,4,9,4]);
 268         //bar.Set('chart.gutter', 35);
 269         bar.Set('chart.title', 'A bar/line/pie combination (tooltips)');
 270         bar.Set('chart.ymax', 15);
 271         bar.Set('chart.text.angle', 45);
 272         bar.Set('chart.colors', ['#ccc']);
 273         bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
 274         bar.Set('chart.background.grid.autofit', true);
 275
 276         // Define the line first so that it can be added to the bar chart
 277         var line = new RGraph.Line('myCanvas', [1,3,4,3,2,1,4,5,2,3,8,8], [5,6,7,9,7,5,6,3,5,2,5,1]);
 278         line.Set('chart.linewidth', 2);
 279         line.Set('chart.colors', ['red', 'green', '#ccc']);
 280         line.Set('chart.key', ['Jane', 'Fred', 'John']);
 281         line.Set('chart.key.shadow', true);
 282         line.Set('chart.key.shadow.offsetx', 0);
 283         line.Set('chart.key.shadow.offsety', 0);
 284         line.Set('chart.key.shadow.blur', 10);
 285         line.Set('chart.key.shadow.color', 'rgba(128,128,128,0.5)');
 286         line.Set('chart.key.background', 'white');
 287         line.Set('chart.key.rounded', true);
 288         line.Set('chart.tickmarks', 'circle');
 289
 290         // This would all be done programmatically normally, and linked to the key, so that if you change a name in the key,
 291         // it changes in all of the tooltips too
 292         line.Set('chart.tooltips', [
 293                                     '<b>January</b><br />   <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'January\')"></canvas>   <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 4',
 294                                     '<b>February</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'February\')"></canvas>  <div id="red"></div>Jane: 6<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 5',
 295                                     '<b>March</b><br />     <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'March\')"></canvas>     <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 3',
 296                                     '<b>April</b><br />     <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'April\')"></canvas>     <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 9<br /><div id="gray"></div>John: 4',
 297                                     '<b>May</b><br />       <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'May\')"></canvas>       <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 1',
 298                                     '<b>June</b><br />      <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'June\')"></canvas>      <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 2',
 299                                     '<b>July</b><br />      <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'July\')"></canvas>      <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 6',
 300                                     '<b>Aug</b><br />       <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'August\')"></canvas>    <div id="red"></div>Jane: 5<br /><div id="green"></div>Fred: 3<br /><div id="gray"></div>John: 5',
 301                                     '<b>September</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'September\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 8',
 302                                     '<b>October</b><br />   <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'October\')"></canvas>   <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 2<br /><div id="gray"></div>John: 4',
 303                                     '<b>November</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'November\')"></canvas>  <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 9',
 304                                     '<b>December</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'December\')"></canvas>  <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 1<br /><div id="gray"></div>John: 4',
 305
 306                                     '<b>January</b><br />   <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'January\')"></canvas>   <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 4',
 307                                     '<b>February</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'February\')"></canvas>  <div id="red"></div>Jane: 6<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 5',
 308                                     '<b>March</b><br />     <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'March\')"></canvas>     <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 3',
 309                                     '<b>April</b><br />     <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'April\')"></canvas>     <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 9<br /><div id="gray"></div>John: 4',
 310                                     '<b>May</b><br />       <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'May\')"></canvas>       <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 1',
 311                                     '<b>June</b><br />      <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'June\')"></canvas>      <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 2',
 312                                     '<b>July</b><br />      <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'July\')"></canvas>      <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 6',
 313                                     '<b>August</b><br />    <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'August\')"></canvas>    <div id="red"></div>Jane: 5<br /><div id="green"></div>Fred: 3<br /><div id="gray"></div>John: 5',
 314                                     '<b>September</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'September\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 8',
 315                                     '<b>October</b><br />   <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'October\')"></canvas>   <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 2<br /><div id="gray"></div>John: 4',
 316                                     '<b>November</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'November\')"></canvas>  <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 9',
 317                                     '<b>December</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'December\')"></canvas>  <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 1<br /><div id="gray"></div>John: 4'
 318                                    ]);
 319         line.Set('chart.tooltips.highlight', false);
 320         // No need to call Draw() - the bar chart will do it
 321
 322         // Add a Line chart tooltip event that draws the tooltip Pie charts
 323         RGraph.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);
 324
 325
 326
 327         // Add the line graph to the bar chart
 328         bar.Set('chart.line', line);
 329
 330         // Draw the bar chart, which in turn draws the line graph for us
 331         bar.Draw();
 332
 333         /**
 334         * This is the function that creates the tooltip graphs
 335         */
 336         function CreateTooltipGraph (obj)
 337         {
 338             var index  = RGraph.Registry.Get('chart.tooltip').__index__;
 339             var tooltip = obj.Get('chart.tooltips')[index];
 340
 341             // Extract the data for the obj.Get('chart.tooltips')[index]ie chart froim the tooltip
 342             var jane_data = Number(tooltip.replace(/.*Jane: (\d+).*/, '$1'));
 343             var fred_data = Number(tooltip.replace(/.*Fred: (\d+).*/, '$1'));
 344             var john_data = Number(tooltip.replace(/.*John: (\d+).*/, '$1'));
 345
 346             var pie_data    = [jane_data,fred_data,john_data];
 347
 348             // This data could be dynamic
 349             var pie  = new RGraph.Pie('__tooltip_canvas__', pie_data);
 350             pie.Set('chart.gutter', 5);
 351             pie.Set('chart.colors', ['red','green','#ccc']);
 352             pie.Set('chart.strokestyle', '#ffd');
 353             pie.Set('chart.linewidth', 2);
 354             pie.Draw();
 355
 356             pie.canvas.style.cursor = 'pointer';
 357         }
 358     </script>
 359
 360     <p>
 361         This is an example of combining Bar and Line charts. It's quite straight-forward, and the code here shows you how it can be achieved.
 362     </p>
 363
 364     <p>
 365         If the values for the line and bar result in different Y scales you may need to specify the <i>chart.ymax</i> property for each graph
 366         so that the scales are the same. The line turns off Y labels so as not to overwrite the Bars labels.
 367     </p>
 368
 369     <b>Tooltips</b>
 370
 371     <p>
 372         You can have tooltips on the Line chart by setting <i>chart.tooltips.highlighting</i> to <i>false</i>, like below.
 373         The order in which you create the graphs is also important, you must define the Bar chart first, and subsequently the Line
 374         chart.
 375     </p>
 376
 377     <pre class="code">line.Set('chart.tooltips.highlighting', false);</pre>
 378
 379     <p>
 380         Because the tooltips are only triggered by the Line chart, you should put all of the information, for both the Line and the
 381         Bar chart, in the tooltips.
 382     </p>
 383
 384     <a name="combiningline"></a>
 385     <h4>Combining Line charts</h4>
 386
 387     <!-- This is the canvas that both the line graphs use -->
 388     <canvas id="myCanvas2" width="600" height="250" style="float: right">[No canvas support]</canvas>
 389     <script>
 390         line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
 391         line2.Set('chart.hmargin', 10);
 392         line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
 393         line2.Set('chart.linewidth', 3);
 394         line2.Set('chart.shadow', true);
 395         line2.Set('chart.shadow.offsetx', 2);
 396         line2.Set('chart.shadow.offsety', 2);
 397         line2.Set('chart.ymax', 65);
 398         line2.Set('chart.units.post', 'l');
 399         line2.Set('chart.gutter', 40);
 400         line2.Set('chart.noxaxis', true);
 401         line2.Set('chart.noendxtick', true);
 402         line2.Set('chart.title', 'An example of axes both sides');
 403         line2.Draw();
 404
 405         line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
 406         line3.Set('chart.hmargin', 10);
 407         line3.Set('chart.linewidth', 3);
 408         line3.Set('chart.shadow', true);
 409         line3.Set('chart.shadow.offsetx', 2);
 410         line3.Set('chart.shadow.offsety', 2);
 411         line3.Set('chart.yaxispos', 'right');
 412         line3.Set('chart.noendxtick', true);
 413         line3.Set('chart.background.grid', false);
 414         line3.Set('chart.ymax', 100);
 415         line3.Set('chart.colors', ['blue', 'red']);
 416         line3.Set('chart.units.pre', '$');
 417         line3.Set('chart.gutter', 40);
 418         line3.Set('chart.key', ['Cost', 'Volume']);
 419         line3.Set('chart.key.background', 'rgba(255,255,255,0.8)');
 420         line3.Draw();
 421     </script>
 422
 423     <p>
 424         Another type of chart you may want is a line chart with Y axes on both sides, as illustrated on the right. You should
 425         be careful with this chart type as it can easily lead to confusion.
 426     </p>
 427
 428     <p>
 429         This chart is made up from two line charts, one with the Y axis on the left and one on the right. The code that makes up
 430         this chart is below.
 431     </p>
 432
 433     <p>
 434          The only reason to combine line charts is to get Y axes on the left and right. If you simply want mutiple lines,
 435          you can do this without combining any charts. <a href="../examples/line.html">See the line chart example page</a>
 436     </p>
 437
 438     <br clear="all" />
 439
 440     <pre class="code">
 441 &lt;script&gt;
 442     window.onload = function
 443     {
 444         line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
 445         line2.Set('chart.hmargin', 10);
 446         line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
 447         line2.Set('chart.linewidth', 3);
 448         line2.Set('chart.shadow', true);
 449         line2.Set('chart.shadow.offsetx', 2);
 450         line2.Set('chart.shadow.offsety', 2);
 451         line2.Set('chart.ymax', 65);
 452         line2.Set('chart.units.post', 'l');
 453         line2.Set('chart.gutter', 35);
 454         line2.Set('chart.noxaxis', true);
 455         line2.Set('chart.noendxtick', true);
 456         line2.Set('chart.title', 'An example of axes both sides');
 457         line2.Draw();
 458
 459         line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
 460         line3.Set('chart.hmargin', 10);
 461         line3.Set('chart.linewidth', 3);
 462         line3.Set('chart.shadow', true);
 463         line3.Set('chart.shadow.offsetx', 2);
 464         line3.Set('chart.shadow.offsety', 2);
 465         line3.Set('chart.yaxispos', 'right');
 466         line3.Set('chart.noendxtick', true);
 467         line3.Set('chart.background.grid', false);
 468         line3.Set('chart.ymax', 65);
 469         line3.Set('chart.colors', ['blue', 'red']);
 470         line3.Set('chart.units.pre', '$');
 471         line3.Set('chart.gutter', 35);
 472         line3.Set('chart.key', ['Cost', 'Volume']);
 473         line3.Set('chart.key.background', 'rgba(255,255,255,0.5)');
 474         line3.Draw();
 475     }
 476 &lt;/script&gt;
 477 </pre>
 478
 479
 480 </body>
 481 </html>