Context Navigation

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

Last change on this file since 133 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 24.3 KB

Line
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	<script>
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	</script>
419	</pre>
420
421
422	</body>
423	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: