1 <?php ob_start('ob_gzhandler') ?>
5 <meta http-equiv="X-UA-Compatible" content="chrome=1">
8 * o------------------------------------------------------------------------------o
9 * | This file is part of the RGraph package - you can learn more at: |
11 * | http://www.rgraph.net |
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: |
17 * | http://www.rgraph.net/LICENSE.txt |
18 * o------------------------------------------------------------------------------o
21 <title>RGraph: HTML5 canvas graph library - combining bar and line graphs</title>
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" />
26 <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
27 <link rel="icon" type="image/png" href="../images/favicon.png">
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]-->
38 div.RGraph_tooltip div {
39 display: inline-block;
45 div.RGraph_tooltip div#green {
46 background-color: green;
49 div.RGraph_tooltip div#red {
50 background-color: red;
53 div.RGraph_tooltip div#gray {
54 background-color: #ccc;
60 function enlarge_tooltip_graph (e, title)
62 var bg = document.createElement('DIV');
64 bg.style.position = 'fixed';
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);
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';
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';
91 div.style.border = '1px black solid';
95 var canvas = document.createElement('CANVAS');
98 canvas.id = 'big_pie';
99 div.appendChild(canvas);
101 bg.onmousedown = function (e)
103 this.style.display = 'none';
104 document.body.removeChild(this);
109 div.onmousedown = function (e)
114 var data = e.target.__object__.data;
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);
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);
144 <!-- Social networking buttons -->
145 <script src="../libraries/RGraph.common.core.js" ></script>
148 function HideTwitterDIV ()
150 document.getElementById("twitter_div").style.opacity = 0;
151 document.getElementById("twitter_div").style.display = 'none';
155 function ShowTwitterDIV (e)
157 var e = RGraph.FixEventObject(document.all ? event : e);
158 var div = document.getElementById("twitter_div");
159 var img = document.getElementById("twitter_icon");
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';
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);
180 * This code installs the event handler that hides the Twitter DIV
182 if (RGraph.isIE8()) {
183 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
185 window.addEventListener('click', HideTwitterDIV, false);
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 about RGraph</a><br>
192 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
195 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
198 if (navigator.userAgent.indexOf('Opera') == -1) {
199 document.getElementById("social_icons").style.position = 'fixed';
200 document.getElementById("twitter_div").style.position = 'fixed';
205 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
209 <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">
210 <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
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" />
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"/>
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"/>
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" />
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" />
238 <!-- /Social networking buttons -->
240 <div id="breadcrumb">
241 <a href="../index.html">RGraph: HTML5 canvas graph library</a>
243 <a href="./index.html">Documentation</a>
248 <h1>RGraph: HTML5 canvas graph library - Combining charts</h1>
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>');
257 <li><a href="#barandline">Combining bar and line charts</a></li>
258 <li><a href="#combiningline">Combining Line charts</a></li>
261 <a name="barandline"></a>
262 <h4>Combining bar and line charts</h4>
264 <canvas id="myCanvas" width="600" height="250" style="float: right; border: 1px dashed gray">[No canvas support]</canvas>
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);
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');
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',
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'
319 line.Set('chart.tooltips.highlight', false);
320 // No need to call Draw() - the bar chart will do it
322 // Add a Line chart tooltip event that draws the tooltip Pie charts
323 RGraph.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);
327 // Add the line graph to the bar chart
328 bar.Set('chart.line', line);
330 // Draw the bar chart, which in turn draws the line graph for us
334 * This is the function that creates the tooltip graphs
336 function CreateTooltipGraph (obj)
338 var index = RGraph.Registry.Get('chart.tooltip').__index__;
339 var tooltip = obj.Get('chart.tooltips')[index];
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'));
346 var pie_data = [jane_data,fred_data,john_data];
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);
356 pie.canvas.style.cursor = 'pointer';
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.
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.
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
377 <pre class="code">line.Set('chart.tooltips.highlighting', false);</pre>
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.
384 <a name="combiningline"></a>
385 <h4>Combining Line charts</h4>
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>
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');
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)');
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.
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
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>
442 window.onload = function
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');
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)');