RGraph/examples/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         /**
   9         * o------------------------------------------------------------------------------o
  10         * | This file is part of the RGraph package - you can learn more at:             |
  11         * |                                                                              |
  12         * |                          http://www.rgraph.net                               |
  13         * |                                                                              |
  14         * | This package is licensed under the RGraph license. For all kinds of business |
  15         * | purposes there is a small one-time licensing fee to pay and for non          |
  16         * | commercial  purposes it is free to use. You can read the full license here:  |
  17         * |                                                                              |
  18         * |                      http://www.rgraph.net/LICENSE.txt                       |
  19         * o------------------------------------------------------------------------------o
  20         */
  21     -->
  22     <title>RGraph: HTML5 canvas graph library - line chart</title>
  23
  24     <meta name="keywords" content="rgraph html5 canvas example line chart" />
  25     <meta name="description" content="RGraph: Line chart example" />
  26
  27     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  28     <link rel="icon" type="image/png" href="../images/favicon.png">
  29
  30     <script src="../libraries/RGraph.common.core.js" ></script>
  31     <script src="../libraries/RGraph.common.context.js" ></script>
  32     <script src="../libraries/RGraph.common.annotate.js" ></script>
  33     <script src="../libraries/RGraph.common.tooltips.js" ></script>
  34     <script src="../libraries/RGraph.common.zoom.js" ></script>
  35     <script src="../libraries/RGraph.common.resizing.js" ></script>
  36     <script src="../libraries/RGraph.line.js" ></script>
  37     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  38
  39     <script>
  40         window.onload = function ()
  41         {
  42             var line1 = new RGraph.Line('line1', [20,25,13,14,16,18,21,32,12,15], [23,25,26,28,29,21,22,25,26,28]);
  43             line1.Set('chart.title', 'A line chart (tooltips, labels, context, no axes, zoom)');
  44             line1.Set('chart.colors', ['red', 'green']);
  45             line1.Set('chart.tickmarks', ['circle', 'square']);
  46             line1.Set('chart.linewidth', 1);
  47             line1.Set('chart.background.barcolor1', 'white');
  48             line1.Set('chart.background.barcolor2', 'white');
  49             line1.Set('chart.background.grid.autofit', true);
  50             line1.Set('chart.filled', 'true');
  51             line1.Set('chart.fillstyle', ['#fcc', '#cfc']);
  52             line1.Set('chart.tooltips', ['id:tooltip_china',      'id:tooltip_la',         'id:tooltip_plymouth',
  53                                          'id:tooltip_meadowhall', 'id:tooltip_sydney',     'id:tooltip_toronto',
  54                                          'id:tooltip_france',     'id:tooltip_norway',     'id:tooltip_sweden',
  55                                          'id:tooltip_spain',      'id:tooltip_deli',       'id:tooltip_congo',
  56                                          'id:tooltip_brazil',     'id:tooltip_california', 'id:tooltip_newyork',
  57                                          'id:tooltip_paris',      'id:tooltip_uk',         'id:tooltip_antartica',
  58                                          'id:tooltip_sahara', 'id:tooltip_zagreb']);
  59             line1.Set('chart.tooltips.effect', 'contract');
  60
  61             if (!RGraph.isIE8()) {
  62                 line1.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom], ['Cancel', function () {}]]);
  63                 line1.Set('chart.zoom.delay', 10);
  64                 line1.Set('chart.zoom.frames', 25);
  65                 line1.Set('chart.zoom.vdir', 'center');
  66             }
  67
  68             line1.Set('chart.text.angle', 45);
  69             line1.Set('chart.gutter', 45);
  70             line1.Set('chart.units.post', '%');
  71             line1.Set('chart.labels.ingraph', [3,'Meadowhall (48)']);
  72             line1.Set('chart.noaxes', true);
  73             line1.Set('chart.background.grid', true);
  74             line1.Set('chart.yaxispos', 'right');
  75             line1.Set('chart.ymax', 100);
  76             line1.Set('chart.title.xaxis', 'Location');
  77             line1.Set('chart.title.yaxis', 'Percentage');
  78             line1.Set('chart.title.xaxis.pos', 0.5);
  79             line1.Set('chart.title.yaxis.pos', 0.5);
  80             line1.Draw();
  81
  82             var line4 = new RGraph.Line('line4', [0,300,500,600,100,200,400,500,700,800,400,100],
  83                                       [500,400,500,700,300,300,500,600,700,800,600,300],
  84                                       [400,200,400,500,300,300,400,500,400,100,400,300]);
  85             line4.Set('chart.key', ['2008', '2007', '2006']);
  86             line4.Set('chart.key.background', 'white');
  87             line4.Set('chart.key.shadow', true);
  88             line4.Set('chart.key.shadow.offsetx', 0);
  89             line4.Set('chart.key.shadow.offsety', 0);
  90             line4.Set('chart.key.shadow.blur', 15);
  91             line4.Set('chart.key.shadow.color', '#ccc');
  92             line4.Set('chart.key.rounded', true);
  93             line4.Set('chart.gutter', 45);
  94
  95             if (!RGraph.isIE8()) {
  96                 line4.Set('chart.zoom.mode', 'thumbnail');
  97             } else {
  98                 line4.Set('chart.key.shadow.offsetx', 2);
  99                 line4.Set('chart.key.shadow.offsety', 2);
 100             }
 101
 102             line4.Set('chart.filled', true);
 103             line4.Set('chart.tickmarks', null);
 104             line4.Set('chart.background.barcolor1', 'white');
 105             line4.Set('chart.background.barcolor2', 'white');
 106             line4.Set('chart.background.grid.autofit', true);
 107             line4.Set('chart.title', 'A line chart (zoom, Y axis on the right)');
 108             line4.Set('chart.colors', ['rgba(169, 222, 244, 0.7)', 'red', '#ff0']);
 109             line4.Set('chart.fillstyle', ['#daf1fa', '#faa', '#ffa']);
 110             line4.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
 111             line4.Set('chart.yaxispos', 'right');
 112             line4.Set('chart.linewidth', 5);
 113             line4.Draw();
 114
 115             /**
 116             * Create the 9th graphs data
 117             */
 118             var data1 = [];
 119             var data2 = [];
 120             var data3 = [];
 121
 122
 123             var line9 = new RGraph.Line('line9', [56,45,43,52,56,65,21,23,34,15,21,-12,-13,-31,-25]);
 124             line9.Set('chart.background.barcolor1', 'white');
 125             line9.Set('chart.background.barcolor2', 'white');
 126             line9.Set('chart.background.grid', true);
 127             line9.Set('chart.linewidth', 5);
 128             line9.Set('chart.gutter', 35);
 129             line9.Set('chart.hmargin', 5);
 130             line9.Set('chart.shadow', true);
 131             line9.Set('chart.tickmarks', null);
 132             line9.Set('chart.units.post', 'k');
 133             line9.Set('chart.xticks', 8);
 134             line9.Set('chart.colors', ['red', 'green', 'blue']);
 135             line9.Set('chart.key', ['Sales (not good)']);
 136             line9.Set('chart.key.shadow', true);
 137             line9.Set('chart.key.rounded', true);
 138             line9.Set('chart.key.position', 'gutter');
 139             line9.Set('chart.xaxispos', 'center');
 140             line9.Set('chart.background.grid.autofit', true);
 141             line9.Set('chart.background.grid.autofit.numhlines', 16);
 142
 143             // Define a context menu that allows you to toggle the background grid. The two options simply:
 144             //  1. Set the appropriate setting on the object
 145             //  2. Clear the canvas
 146             //  3. Draw the graph again
 147             line9.Draw();
 148
 149             var line13 = new RGraph.Line('line13', [6,5,4,5,6,4,1,2,3], [7,8,9,9,8,7,8,7,6]);
 150             line13.Set('chart.labels', ['13th','14th','15th','16th','15th','16th','17th','18th','19th']);
 151             line13.Set('chart.title', 'A range chart');
 152             line13.Set('chart.gutter', 25);
 153             line13.Set('chart.background.barcolor1', 'white');
 154             line13.Set('chart.background.barcolor2', 'white');
 155             line13.Set('chart.filled', true);
 156             line13.Set('chart.filled.range', true);
 157             line13.Set('chart.fillstyle', 'rgba(128,255,128,0.5)');
 158             line13.Set('chart.linewidth', 2);
 159             line13.Set('chart.colors', ['green']);
 160             line13.Set('chart.hmargin', 5);
 161             line13.Draw();
 162
 163             var line14 = new RGraph.Line('line13', [1,1.5,1.8,1.1,1.2,1.3,1.5,1,0.7], [3.4,3.1,3,4.1,3.9,3.3,4.1,2.9,3]);
 164             line14.Set('chart.background.grid', false);
 165             line14.Set('chart.filled', true);
 166             line14.Set('chart.filled.range', true);
 167             line14.Set('chart.background.barcolor1', 'rgba(0,0,0,0)');
 168             line14.Set('chart.background.barcolor2', 'rgba(0,0,0,0)');
 169             line14.Set('chart.noaxes', true);
 170             line14.Set('chart.ylabels', false);
 171             line14.Set('chart.ymax', 10);
 172             line14.Set('chart.colors', ['red']);
 173             line14.Set('chart.fillstyle', 'rgba(255,0,0,0.5)');
 174             line14.Set('chart.linewidth', 2);
 175             line14.Set('chart.hmargin', 5);
 176             line14.Draw();
 177         }
 178     </script>
 179
 180 </head>
 181 <body>
 182
 183     <!-- Social networking buttons -->
 184
 185     <script>
 186         function HideTwitterDIV ()
 187         {
 188             document.getElementById("twitter_div").style.opacity = 0;
 189             document.getElementById("twitter_div").style.display = 'none';
 190         }
 191
 192
 193         function ShowTwitterDIV (e)
 194         {
 195             var e   = RGraph.FixEventObject(document.all ? event : e);
 196             var div = document.getElementById("twitter_div");
 197             var img = document.getElementById("twitter_icon");
 198
 199             div.style.display = 'block';
 200             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
 201             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
 202
 203             /**
 204             * Fade it in
 205             */
 206             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
 207             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
 208             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
 209             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
 210             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
 211
 212             e.stopPropagation();
 213
 214             return false;
 215         }
 216
 217         /**
 218         * This code installs the event handler that hides the Twitter DIV
 219         */
 220         if (RGraph.isIE8()) {
 221              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 222         } else {
 223             window.addEventListener('click', HideTwitterDIV, false);
 224         }
 225     </script>
 226
 227     <!-- The twitter DIV -->
 228     <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;">
 229         <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>
 230         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 231     </div>
 232
 233     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 234         <script>
 235             // Opera fix
 236             if (navigator.userAgent.indexOf('Opera') == -1) {
 237               document.getElementById("social_icons").style.position = 'fixed';
 238               document.getElementById("twitter_div").style.position = 'fixed';
 239
 240             }
 241         </script>
 242
 243         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 244
 245
 246             <div id="social">
 247                 <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">
 248                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 249                 </a>
 250
 251                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 252                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 253                 </a>
 254
 255
 256 <!--
 257                 <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">
 258                     <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"/>
 259                 </a>
 260
 261
 262                 <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">
 263                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 264                 </a>
 265
 266                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 267                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 268                 </a>
 269
 270                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 271                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 272                 </a>
 273 -->
 274             </div>
 275     </div>
 276     <!-- /Social networking buttons -->
 277
 278
 279 <div id="breadcrumb">
 280     <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 281     >
 282     <a href="./index.html">Examples</a>
 283     >
 284     Line chart
 285 </div>
 286
 287 <h1>RGraph: HTML5 canvas graph library - Line chart</h1>
 288
 289     <script>
 290         if (RGraph.isIE8()) {
 291             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>');
 292         }
 293     </script>
 294
 295     <div>
 296         <p>
 297             Like the Bar chart, the line chart is one of the most versatile chart types. It is similar, but can indicate chronological
 298             data better. The line chart is good if, for example, you want to illustrate sales figures over a year (or any period of
 299             time). You'll then be able to easily see whether sales are going up, down or are stagnant. It will also become apparent
 300             which months are busier than others. By using a multiple line chart you can add multiple sets of data (eg two or more years
 301             of figures) to your chart. You can customise the line chart by stipulating it as being filled, having drop shadows, keys,
 302             having the X axis in the centre, different colors, different tickmark styles and tooltips etc.
 303         </p>
 304
 305         <p>
 306             The first graph uses external DIVs for the tooltip contents. The DIVs are at the bottom of this page (they're set not to
 307             be visible). Using external DIVs for tooltips can make maintenance easier.
 308         </p>
 309
 310         <div>
 311             <ul>
 312                 <li><a href="../docs/line.html">Line chart API documentation</a></li>
 313             </ul>
 314         </div>
 315
 316         <div>
 317             <canvas id="line1" width="475" height="250">[Please wait...]</canvas>
 318             <canvas id="line4" width="475" height="250">[Please wait...]</canvas>
 319             <canvas id="line9" width="475" height="350">[Please wait...]</canvas>
 320             <canvas id="line13" width="475" height="350">[Please wait...]</canvas>
 321         </div>
 322     </div>
 323
 324     <!-- These are the tooltips for the first graph. -->
 325     <div style="display: none">
 326         <div id="tooltip_china"><b>China</b><br /><a href="http://www.google.com/#q=china">A populous country</a></div>
 327         <div id="tooltip_la"><b>Los Angeles</b><br />Home of sexy time!</div>
 328         <div id="tooltip_plymouth"><b>Plymouth</b><br />Plenty of surfers dude</div>
 329         <div id="tooltip_meadowhall"><b>Meadowhall</b><br />Shopping heaven (or hell...) here</div>
 330         <div id="tooltip_sydney"><b>Sydney</b><br />Home of kangeroos</div>
 331         <div id="tooltip_toronto"><b>Toronto</b><br />Brrrr, chilly</div>
 332         <div id="tooltip_france"><b>France</b><br />Ever had frogs legs?</div>
 333         <div id="tooltip_norway"><b>Norway</b><br />Skiing here</div>
 334         <div id="tooltip_sweden"><b>Sweden</b><br />Skiing here too</div>
 335         <div id="tooltip_spain"><b>Spain</b><br />Hola!</div>
 336         <div id="tooltip_deli"><b>Deli</b><br />Hot and humid here</div>
 337         <div id="tooltip_congo"><b>Congo</b><br />Not exactly a holiday resort</div>
 338         <div id="tooltip_plymouth"><b>Plymouth</b><br />Plenty of surfers here</div>
 339         <div id="tooltip_brazil"><b>Brazil</b><br />Fooseball</div>
 340         <div id="tooltip_california"><b>Califonia</b><br />"I'll be back..." And he was</div>
 341         <div id="tooltip_newyork"><b>New York</b><br />Home of the Friends comedy show</div>
 342         <div id="tooltip_paris"><b>Paris</b><br />Ever eaten frogs legs?</div>
 343         <div id="tooltip_uk"><b>UK</b><br />Not a place for getting sun-tans</div>
 344         <div id="tooltip_antartica"><b>Antartica</b><br />Surprisingly, incorporates the driest place in the world</div>
 345         <div id="tooltip_sahara"><b>Sahara</b><br />A questionable film, and a rather hot place</div>
 346         <div id="tooltip_zagreb"><b>Zagreb</b><br />Anyone know where this is...?</div>
 347     </div>
 348
 349 </body>
 350 </html>