1 <?php ob_start('ob_gzhandler') ?>
5 <meta http-equiv="X-UA-Compatible" content="chrome=1">
9 * o------------------------------------------------------------------------------o
10 * | This file is part of the RGraph package - you can learn more at: |
12 * | http://www.rgraph.net |
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: |
18 * | http://www.rgraph.net/LICENSE.txt |
19 * o------------------------------------------------------------------------------o
22 <title>RGraph: HTML5 canvas graph library - line chart</title>
24 <meta name="keywords" content="rgraph html5 canvas example line chart" />
25 <meta name="description" content="RGraph: Line chart example" />
27 <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
28 <link rel="icon" type="image/png" href="../images/favicon.png">
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]-->
40 window.onload = function ()
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');
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');
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);
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);
95 if (!RGraph.isIE8()) {
96 line4.Set('chart.zoom.mode', 'thumbnail');
98 line4.Set('chart.key.shadow.offsetx', 2);
99 line4.Set('chart.key.shadow.offsety', 2);
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);
116 * Create the 9th graphs data
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);
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
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);
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);
183 <!-- Social networking buttons -->
186 function HideTwitterDIV ()
188 document.getElementById("twitter_div").style.opacity = 0;
189 document.getElementById("twitter_div").style.display = 'none';
193 function ShowTwitterDIV (e)
195 var e = RGraph.FixEventObject(document.all ? event : e);
196 var div = document.getElementById("twitter_div");
197 var img = document.getElementById("twitter_icon");
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';
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);
218 * This code installs the event handler that hides the Twitter DIV
220 if (RGraph.isIE8()) {
221 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
223 window.addEventListener('click', HideTwitterDIV, false);
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 about RGraph</a><br>
230 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
233 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
236 if (navigator.userAgent.indexOf('Opera') == -1) {
237 document.getElementById("social_icons").style.position = 'fixed';
238 document.getElementById("twitter_div").style.position = 'fixed';
243 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
247 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=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" />
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" />
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"/>
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"/>
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" />
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" />
276 <!-- /Social networking buttons -->
279 <div id="breadcrumb">
280 <a href="../index.html">RGraph: HTML5 canvas graph library</a>
282 <a href="./index.html">Examples</a>
287 <h1>RGraph: HTML5 canvas graph library - Line chart</h1>
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>');
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.
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.
312 <li><a href="../docs/line.html">Line chart API documentation</a></li>
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>
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>