source: Dev/trunk/RGraph/docs/combine.html @ 91

Last change on this file since 91 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
File size: 24.3 KB
RevLine 
[77]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: Javascript charts and graph library - combining bar and line charts</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas chart docs combining" />
24    <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about combining charts" />
25   
26    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
27    <meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
28    <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
29
30    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
31    <link rel="icon" type="image/png" href="../images/favicon.png">
32
33    <script src="../libraries/RGraph.common.core.js" ></script>
34    <script src="../libraries/RGraph.common.context.js" ></script>
35    <script src="../libraries/RGraph.common.tooltips.js" ></script>
36    <script src="../libraries/RGraph.bar.js" ></script>
37    <script src="../libraries/RGraph.line.js" ></script>
38    <script src="../libraries/RGraph.pie.js" ></script>
39    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
40   
41    <style>
42        div.RGraph_tooltip div {
43            display: inline-block;
44            width: 10px;
45            height: 10px;
46            margin-right: 5px;
47        }
48
49        div.RGraph_tooltip div#green {
50            background-color: green;
51        }
52
53        div.RGraph_tooltip div#red {
54            background-color: red;
55        }
56
57        div.RGraph_tooltip div#gray {
58            background-color: #ccc;
59        }
60    </style>
61
62
63    <script>
64        function enlarge_tooltip_graph (e, title)
65        {
66            var bg = document.createElement('DIV');
67                bg.style.opacity = 0;
68                bg.style.position = 'fixed';
69                bg.style.left = 0;
70                bg.style.top = 0;
71                bg.style.width = '2000px';
72                bg.style.height = '2000px';
73                bg.style.backgroundColor = 'rgba(0,0,0,0.2)';
74                bg.style.zIndex = 32568;
75                bg.style.textAlign = 'center';
76            document.body.appendChild(bg);
77           
78            var div = document.createElement('DIV');
79                div.style.position = 'relative';
80                div.style.backgroundColor = 'white';
81                div.style.top = '200px';
82                div.style.width = '300px'
83                div.style.height = '240px';
84                div.style.padding = '15px';
85                div.style.WebkitBorderRadius = '5px';
86                div.style.MozBorderRadius = '5px';
87                div.style.borderRadius = '5px';
88                div.style.left = ((document.body.clientWidth / 2) - 175) + 'px';
89               
90                // Add standard box-shadow and -moz-box-shadow               
91                div.style.WebkitBoxShadow = 'gray 0 0 25px';
92                div.style.MozBoxShadow = '0 0 25px gray';
93                div.style.boxShadow = '0 0 25px gray';
94
95                div.style.border = '1px black solid';
96
97            bg.appendChild(div);
98
99            var canvas = document.createElement('CANVAS');
100                canvas.width  = 300;
101                canvas.height = 240;
102                canvas.id     = 'big_pie';
103            div.appendChild(canvas);
104           
105            bg.onmousedown = function (e)
106            {
107                this.style.display = 'none';
108                document.body.removeChild(this);
109               
110                e.stopPropagation();
111            }
112           
113            div.onmousedown = function (e)
114            {
115                e.stopPropagation();
116            }
117           
118            var data = e.target.__object__.data;
119           
120            var pie = new RGraph.Pie('big_pie', data);
121            pie.Set('chart.strokestyle', 'white');
122            pie.Set('chart.linewidth', 5);
123            pie.Set('chart.align', 'left');
124            pie.Set('chart.colors', ['red','green','#ccc']);
125            pie.Set('chart.key', ['Jane', 'Fred', 'John']);
126            pie.Set('chart.key.shadow', true);
127            pie.Set('chart.key.shadow.blur', 15);
128            pie.Set('chart.key.shadow.offsetx', 0);
129            pie.Set('chart.key.shadow.offsety', 0);
130            pie.Set('chart.key.shadow.color', 'gray');
131            pie.Set('chart.key.rounded', true);
132            pie.Set('chart.gutter.top', 2);
133            pie.Set('chart.gutter.bottom', 2);
134            pie.Set('chart.gutter.left', 2);
135            pie.Set('chart.gutter.right', 2);
136            pie.Draw();
137
138           
139            setTimeout(function () {bg.style.opacity = 0.2;}, 50);
140            setTimeout(function () {bg.style.opacity = 0.4;}, 100);
141            setTimeout(function () {bg.style.opacity = 0.6;}, 150);
142            setTimeout(function () {bg.style.opacity = 0.8;}, 200);
143            setTimeout(function () {bg.style.opacity = 1;}, 250);
144        }
145    </script>
146
147
148
149    <script>
150      var _gaq = _gaq || [];
151      _gaq.push(['_setAccount', 'UA-54706-2']);
152      _gaq.push(['_trackPageview']);
153   
154      (function() {
155        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
156        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
157        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
158      })();
159    </script>
160</head>
161<body>
162
163   
164    <!-- Social networking buttons -->
165        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
166            <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%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20charts%20types&title=RGraph:Javascript%20charts%20and%20graphs%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /></a>
167            <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+and+graph+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank"><img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" /></a>
168        </div>
169
170        <script>
171            // Opera fix
172            if (navigator.userAgent.indexOf('Opera') == -1) {
173              document.getElementById("social_icons").style.position = 'fixed';
174            }
175        </script>
176    <!-- Social networking buttons -->
177
178    <div id="breadcrumb">
179        <a href="../index.html">RGraph: Javascript charts and graph library</a>
180        >
181        <a href="./index.html">Documentation</a>
182        >
183        Combining charts
184    </div>
185
186    <h1>RGraph: <span>Javascript charts and graph library</span> - Combining charts</h1>
187
188    <script>
189        if (RGraph.isIE8()) {
190            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 charts, 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://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a> to see some screenshots.</div>');
191        }
192    </script>
193
194    <ul>
195        <li><a href="#barandline">Combining bar and line charts</a></li>
196        <li><a href="#combiningline">Combining Line charts</a></li>
197    </ul>
198   
199    <a name="barandline"></a>
200    <h4>Combining bar and line charts</h4>
201
202    <canvas id="myCanvas" width="600" height="250" style="float: right; border: 1px dashed gray">[No canvas support]</canvas>
203
204    <script>
205        var bar = new RGraph.Bar('myCanvas', [4,5,3,4,1,2,6,5,8,4,9,4]);
206        bar.Set('chart.title', 'A bar/line/pie combination (tooltips)');
207        bar.Set('chart.ymax', 15);
208        bar.Set('chart.text.angle', 45);
209        bar.Set('chart.colors', ['#ccc', 'red', 'green']);
210        bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
211        bar.Set('chart.background.grid.autofit', true);
212        bar.Set('chart.key', ['John', 'Jane', 'Fred']);
213        bar.Set('chart.key.shadow', true);
214        bar.Set('chart.key.shadow.offsetx', 0);
215        bar.Set('chart.key.shadow.offsety', 0);
216        bar.Set('chart.key.shadow.blur', 10);
217        bar.Set('chart.key.shadow.color', 'rgba(128,128,128,0.5)');
218        bar.Set('chart.key.background', 'white');
219        bar.Set('chart.key.rounded', true);
220        bar.Set('chart.background.grid.autofit', true);
221        bar.Set('chart.background.grid.autofit.numvlines', 12);
222        bar.Set('chart.background.grid.autofit.numhlines', 5);
223
224        // Define the line first so that it can be added to the bar chart
225        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]);
226        line.Set('chart.background.grid', false);
227        line.Set('chart.linewidth', 2);
228        line.Set('chart.colors', ['red', 'green']);
229        line.Set('chart.tickmarks', 'circle');
230        line.Set('chart.labels.ingraph', ['January',11,,'February']);
231       
232        // This would all be done programmatically normally, and linked to the key, so that if you change a name in the key,
233        // it changes in all of the tooltips too
234        line.Set('chart.tooltips', [
235                                    '<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',
236                                    '<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',
237                                    '<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',
238                                    '<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',
239                                    '<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',
240                                    '<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',
241                                    '<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',
242                                    '<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',
243                                    '<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',
244                                    '<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',
245                                    '<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',
246                                    '<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',
247
248                                    '<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',
249                                    '<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',
250                                    '<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',
251                                    '<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',
252                                    '<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',
253                                    '<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',
254                                    '<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',
255                                    '<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',
256                                    '<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',
257                                    '<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',
258                                    '<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',
259                                    '<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'
260                                   ]);
261        line.Set('chart.tooltips.highlight', false);
262        // No need to call Draw() - the bar chart will do it
263
264        // Add a Line chart tooltip event that draws the tooltip Pie charts
265        RGraph.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);       
266       
267       
268        // Add the line chart to the bar chart
269        bar.Set('chart.line', line);
270       
271        // Draw the bar chart, which in turn draws the line chart for us
272        bar.Draw();
273           
274        /**
275        * This is the function that creates the tooltip charts
276        */
277        function CreateTooltipGraph (obj)
278        {
279            var index  = RGraph.Registry.Get('chart.tooltip').__index__;
280            var tooltip = obj.Get('chart.tooltips')[index];
281           
282            // Extract the data for the obj.Get('chart.tooltips')[index]ie chart froim the tooltip
283            var jane_data = Number(tooltip.replace(/.*Jane: (\d+).*/, '$1'));
284            var fred_data = Number(tooltip.replace(/.*Fred: (\d+).*/, '$1'));
285            var john_data = Number(tooltip.replace(/.*John: (\d+).*/, '$1'));
286           
287            var pie_data    = [jane_data,fred_data,john_data];
288
289            // This data could be dynamic
290            var pie  = new RGraph.Pie('__tooltip_canvas__', pie_data);
291            pie.Set('chart.gutter.top', 2);
292            pie.Set('chart.gutter.bottom', 2);
293            pie.Set('chart.gutter.left', 2);
294            pie.Set('chart.gutter.right', 2);
295            pie.Set('chart.colors', ['red','green','#ccc']);
296            pie.Set('chart.strokestyle', '#ffd');
297            pie.Set('chart.linewidth', 2);
298            pie.Draw();
299           
300            pie.canvas.style.cursor = 'pointer';
301        }
302    </script>
303
304    <p>
305        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.
306    </p>
307   
308    <p>
309        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 chart
310        so that the scales are the same. The line turns off Y labels so as not to overwrite the Bars labels.
311    </p>
312   
313    <b>Tooltips</b>
314   
315    <p>
316        You can have tooltips on the Line chart by setting <i>chart.tooltips.highlighting</i> to <i>false</i>, like below.
317        The order in which you create the charts is also important, you must define the Bar chart first, and subsequently the Line
318        chart.
319    </p>
320   
321    <pre class="code">line.Set('chart.tooltips.highlighting', false);</pre>
322   
323    <p>
324        Because the tooltips are only triggered by the Line chart, you should put all of the information, for both the Line and the
325        Bar chart, in the tooltips.
326    </p>
327
328    <a name="combiningline"></a>
329    <h4>Combining Line charts</h4>
330
331    <!-- This is the canvas that both the line charts use -->
332    <canvas id="myCanvas2" width="600" height="250" style="float: right">[No canvas support]</canvas>
333    <script>
334        line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
335        line2.Set('chart.hmargin', 10);
336        line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
337        line2.Set('chart.linewidth', 3);
338        line2.Set('chart.shadow', true);
339        line2.Set('chart.shadow.offsetx', 2);
340        line2.Set('chart.shadow.offsety', 2);
341        line2.Set('chart.ymax', 65);
342        line2.Set('chart.units.post', 'l');
343        line2.Set('chart.noxaxis', true);
344        line2.Set('chart.noendxtick', true);
345        line2.Set('chart.title', 'An example of axes both sides');
346        line2.Set('chart.gutter.right', 40);
347        line2.Draw();
348
349        line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
350        line3.Set('chart.hmargin', 10);
351        line3.Set('chart.linewidth', 3);
352        line3.Set('chart.shadow', true);
353        line3.Set('chart.shadow.offsetx', 2);
354        line3.Set('chart.shadow.offsety', 2);
355        line3.Set('chart.yaxispos', 'right');
356        line3.Set('chart.gutter.right', 40);
357        line3.Set('chart.noendxtick', true);
358        line3.Set('chart.background.grid', false);
359        line3.Set('chart.ymax', 100);
360        line3.Set('chart.colors', ['blue', 'red']);
361        line3.Set('chart.units.pre', '$');
362        line3.Set('chart.key', ['Cost', 'Volume']);
363        line3.Set('chart.key.background', 'rgba(255,255,255,0.8)');
364        line3.Draw();
365    </script>
366
367    <p>
368        Another type of chart you may want is a line chart with Y axes on both sides, as illustrated on the right. You should
369        be careful with this chart type as it can easily lead to confusion.
370    </p>
371   
372    <p>
373        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
374        this chart is below.
375    </p>
376   
377    <p>
378         The only reason to combine line charts is to get Y axes on the left and right. If you simply want mutiple lines,
379         you can do this without combining any charts. <a href="../examples/line.html">See the line chart example page</a>
380    </p>
381
382    <br clear="all" />
383
384    <pre class="code">
385&lt;script&gt;
386    window.onload = function
387    {
388        line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
389        line2.Set('chart.hmargin', 10);
390        line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
391        line2.Set('chart.linewidth', 3);
392        line2.Set('chart.shadow', true);
393        line2.Set('chart.shadow.offsetx', 2);
394        line2.Set('chart.shadow.offsety', 2);
395        line2.Set('chart.ymax', 65);
396        line2.Set('chart.units.post', 'l');
397        line2.Set('chart.noxaxis', true);
398        line2.Set('chart.noendxtick', true);
399        line2.Set('chart.title', 'An example of axes both sides');
400        line2.Draw();
401
402        line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
403        line3.Set('chart.hmargin', 10);
404        line3.Set('chart.linewidth', 3);
405        line3.Set('chart.shadow', true);
406        line3.Set('chart.shadow.offsetx', 2);
407        line3.Set('chart.shadow.offsety', 2);
408        line3.Set('chart.yaxispos', 'right');
409        line3.Set('chart.noendxtick', true);
410        line3.Set('chart.background.grid', false);
411        line3.Set('chart.ymax', 65);
412        line3.Set('chart.colors', ['blue', 'red']);
413        line3.Set('chart.units.pre', '$');
414        line3.Set('chart.key', ['Cost', 'Volume']);
415        line3.Set('chart.key.background', 'rgba(255,255,255,0.5)');
416        line3.Draw();
417    }
418&lt;/script&gt;
419</pre>
420
421
422</body>
423</html>
Note: See TracBrowser for help on using the repository browser.