Context Navigation

test_chart2d.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 27.7 KB

Line
1	<!--[if IE 7]>
2	<!DOCTYPE>
3	<html lang="en">
4	<head>
5	<![endif]-->
6	<!--[if IE 8]>
7	<!DOCTYPE>
8	<html lang="en">
9	<head>
10	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
11	<![endif]-->
12	<![if gte IE 9]>
13	<!DOCTYPE HTML>
14	<html lang="en">
15	<head>
16	<![endif]>
17	<title>Chart 2D</title>
18	<style type="text/css">
19	@import "../../../dojo/resources/dojo.css";
20	@import "../../../dijit/tests/css/dijitTests.css";
21	</style>
22	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true"></script>
23	<script type="text/javascript">
24	dojo.require("dojox.charting.Chart");
25	dojo.require("dojox.charting.axis2d.Default");
26	dojo.require("dojox.charting.plot2d.Default");
27	dojo.require("dojox.charting.plot2d.Areas");
28	dojo.require("dojox.charting.plot2d.Markers");
29	dojo.require("dojox.charting.plot2d.MarkersOnly");
30	dojo.require("dojox.charting.plot2d.StackedLines");
31	dojo.require("dojox.charting.plot2d.StackedAreas");
32	dojo.require("dojox.charting.plot2d.Bars");
33	dojo.require("dojox.charting.plot2d.ClusteredBars");
34	dojo.require("dojox.charting.plot2d.StackedBars");
35	dojo.require("dojox.charting.plot2d.ClusteredColumns");
36	dojo.require("dojox.charting.plot2d.StackedColumns");
37	dojo.require("dojox.charting.plot2d.Bubble");
38	dojo.require("dojox.charting.plot2d.Grid");
39	dojo.require("dojox.charting.plot2d.Candlesticks");
40	dojo.require("dojox.charting.plot2d.OHLC");
41	dojo.require("dojox.charting.plot2d.Scatter");
42
43	dojo.require("dojox.charting.themes.Shrooms");
44	dojo.require("dojox.charting.themes.PlotKit.blue");
45	dojo.require("dojox.charting.themes.PlotKit.cyan");
46	dojo.require("dojox.charting.themes.PlotKit.green");
47	dojo.require("dojox.charting.themes.Ireland");
48	dojo.require("dojox.charting.themes.SageToLime");
49	dojo.require("dojox.charting.themes.Minty");
50	dojo.require("dojox.charting.themes.Tufte");
51
52	dojo.require("dojox.dtl");
53	dojo.require("dojox.dtl.Context");
54	charts = [
55	{
56	description: "Clustered columns with positive and negative values, readable theme.",
57	makeChart: function(node){
58	(new dojox.charting.Chart(node)).
59	setTheme(dojox.charting.themes.Tufte).
60	addAxis("x", { fixLower: "minor", fixUpper: "minor", natural: true }).
61	addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", includeZero: true }).
62	addPlot("default", { type: "ClusteredColumns", gap: 10 }).
63	addSeries("Series A", [ 2, 1, 0.5, -1, -2 ] ).
64	addSeries("Series B", [ -2, -1, -0.5, 1, 2 ] ).
65	addSeries("Series C", [ 1, 0.5, -1, -2, -3 ] ).
66	addSeries("Series D", [ 0.7, 1.5, -1.2, -1.25, 3 ] ).
67	render();
68	}
69	},
70	{
71	description: "Bubble chart, green theme.",
72	makeChart: function(node){
73	(new dojox.charting.Chart(node)).
74	setTheme(dojox.charting.themes.SageToLime).
75	addPlot("default", { type: "Bubble", shadow: {dx: 1, dy: 1, width: 2, color: [0, 0, 0, 0.3]} }).
76	addAxis("x", {
77	min: 0,
78	max: 6,
79	majorTick: { stroke: "black", length: 3 },
80	minorTick: { stroke: "gray", length: 3 }
81	}).
82	addAxis("y", {
83	vertical: true,
84	min: 0,
85	max: 10,
86	majorTick: { stroke: "black", length: 3 },
87	minorTick: { stroke: "gray", length: 3 }
88	}).
89	addSeries("Series A", [
90	{ x: 0.5, y: 5, size: 1.4 },
91	{ x: 1.5, y: 1.5, size: 4.5 },
92	{ x: 2, y: 9, size:1.5 },
93	{ x: 5, y: 0.3, size:0.8 }
94	]).
95	addSeries("Series B", [
96	{ x: 0.3, y: 8, size: 2.5 },
97	{ x: 4, y: 6, size:1.1 },
98	{ x: 5.5, y: 2, size: 3.2 }
99	]).
100	render();
101	}
102	},
103	{
104	description: "Lines, calculated labels",
105	makeChart: function(node){
106	(new dojox.charting.Chart(node)).
107	addAxis("x", {
108	majorLabels: true,
109	minorLabels: true,
110	includeZero: true,
111	minorTicks: false,
112	microTicks: false,
113	majorTickStep: 2,
114	htmlLabels: true,
115	labelFunc: function(value){
116	return value + " s";
117	},
118	maxLabelSize: 30,
119	fixUpper: "major", fixLower: "major",
120	majorTick: { length: 3 }
121	}).
122	addAxis("y", {
123	labelFunc: function(value){
124	return value + " thingers";
125	},
126	maxLabelSize: 50,
127	vertical: true,
128	// htmlLabels: false,
129	microTicks: true,
130	minorTicks: true,
131	majorTick: { stroke: "black", length: 3 }
132	}).
133	addSeries("Series A", [ 1, 2, 1, 2, 1, 2, 1 ]).
134	addSeries("Series B", [ 2, 1, 2, 1, 2, 1, 2 ]).
135	render();
136	}
137	},
138	{
139	description: "Lines, pre-computed labels",
140	makeChart: function(node){
141	(new dojox.charting.Chart(node)).
142	addAxis("x", {
143	majorLabels: true,
144	minorLabels: true,
145	includeZero: true,
146	minorTicks: false,
147	microTicks: false,
148	majorTickStep: 2,
149	labels: [
150	{ value: 0, text: "nada" },
151	{ value: 2, text: "2 units" },
152	{ value: 4, text: "4 units" },
153	{ value: 8, text: "2*4 units" }
154	],
155	htmlLabels: true,
156	fixUpper: "major", fixLower: "major",
157	majorTick: { length: 3 }
158	}).
159	addAxis("y", {
160	labels: [
161	{ value: 0, text: "nada" },
162	{ value: 1.1, text: "hrmm" },
163	{ value: 1.2, text: "?" },
164	{ value: 2, text: "2!" }
165	],
166	vertical: true,
167	// htmlLabels: false,
168	microTicks: true,
169	minorTicks: true,
170	majorTick: { stroke: "black", length: 3 }
171	}).
172	addSeries("Series A", [ 1, 2, 1, 2, 1, 2, 1 ]).
173	addSeries("Series B", [ 2, 1, 2, 1, 2, 1, 2 ]).
174	render();
175	}
176	},
177	{
178	description: "Defaults: lines, no axes.",
179	makeChart: function(node){
180	(new dojox.charting.Chart(node)).
181	addSeries("Series A", [ 1, 2, 1, 2, 1, 2, 1 ]).
182	addSeries("Series B", [ 2, 1, 2, 1, 2, 1, 2 ]).
183	render();
184	}
185	},
186	{
187	description: "Defaults: lines, no axes, and custom strokes.",
188	makeChart: function(node){
189	(new dojox.charting.Chart(node)).
190	addSeries("Series A", [ 1, 2, 1, 2, 1, 2, 1 ], {stroke: "red"}).
191	addSeries("Series B", [ 2, 1, 2, 1, 2, 1, 2 ], {stroke: "blue"}).
192	render();
193	}
194	},
195	{
196	description: "Areas, Happy theme, no axes.",
197	makeChart: function(node){
198	(new dojox.charting.Chart(node)).
199	addPlot("default", {type: "Areas", tension:"X"}).
200	setTheme(dojox.charting.themes.Shrooms).
201	addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4]).
202	addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2]).
203	addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2]).
204	render();
205	}
206	},
207	{
208	description: "Areas, no axes, custom strokes and fills.",
209	makeChart: function(node){
210	(new dojox.charting.Chart(node)).
211	addPlot("default", {type: "Areas"}).
212	addSeries("Series A",
213	[1, 2, 1, 2, 1, 2, 1],
214	{
215	stroke: {color: "red", width: 2 },
216	fill: "lightpink"
217	}
218	).
219	addSeries("Series B",
220	[ 2, 1, 2, 1, 2, 1, 2 ],
221	{
222	stroke: { color: "blue", width: 2 },
223	fill: "lightblue"
224	}
225	).
226	render();
227	}
228	},
229	{
230	description: "Lines, axes, blue theme.",
231	makeChart: function(node){
232	(new dojox.charting.Chart(node)).
233	setTheme(dojox.charting.themes.PlotKit.blue).
234	addAxis("x").
235	addAxis("y", {vertical: true}).
236	addSeries("Series A", [1, 2, 1, 2, 1, 2, 1]).
237	addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]).
238	render();
239	}
240	},
241	{
242	description: "Lines, axes (aligned on minor ticks), cyan theme.",
243	makeChart: function(node){
244	(new dojox.charting.Chart(node)).
245	setTheme(dojox.charting.themes.PlotKit.cyan).
246	addAxis("x", {
247	fixLower: "minor", fixUpper: "minor"
248	}).
249	addAxis("y", {
250	vertical: true, fixLower: "minor", fixUpper: "minor"
251	}).
252	addSeries("Series A", [1, 2, 1, 2, 1, 2, 1]).
253	addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]).
254	render();
255	}
256	},
257	{
258	description: "Lines, axes (aligned on major ticks), green theme.",
259	makeChart: function(node){
260	(new dojox.charting.Chart(node)).
261	setTheme(dojox.charting.themes.PlotKit.green).
262	addAxis("x", {
263	fixLower: "major", fixUpper: "major"
264	}).
265	addAxis("y", {
266	vertical: true, fixLower: "major", fixUpper: "major"
267	}).
268	addSeries("Series A", [1, 2, 1, 2, 1, 2, 1]).
269	addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]).
270	render();
271	}
272	},
273	{
274	description: "Lines and markers, no axes, purple theme, custom min/max.",
275	makeChart: function(node){
276	(new dojox.charting.Chart(node)).
277	setTheme(dojox.charting.themes.SageToLime).
278	addPlot("default", {type: "Markers"}).
279	addSeries("Series A", [1, 2, 1, 2, 1, 2, 1], {min: 0, max: 3}).
280	addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]).
281	render();
282	}
283	},
284	{
285	description: "Markers only, no axes, custom theme, custom markers, custom min/max.",
286	makeChart: function(node){
287	(new dojox.charting.Chart(node)).
288	addPlot("default", { type: "MarkersOnly" }).
289	addSeries("Series A",
290	[ 1, 2, 1, 2, 1, 2, 1 ],
291	{
292	min: 0,
293	max: 3,
294	stroke: {color: "red", width: 2},
295	fill: "red",
296	marker: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0"
297	}
298	).
299	addSeries("Series B",
300	[ 2, 1, 2, 1, 2, 1, 2 ],
301	{
302	stroke: {color: "blue", width: 2},
303	fill: "blue",
304	marker: "m-3,-3 l0,6 6,0 0,-6 z"
305	}
306	).
307	render();
308	}
309	},
310	{
311	description: "Lines and markers, shadows, no axes, custom theme, custom markers, custom min/max.",
312	makeChart: function(node){
313	(new dojox.charting.Chart(node)).
314	addPlot("default", {
315	type: "Markers", shadow: {dx: 1, dy: 1, width: 2, color: [0, 0, 0, 0.3]}
316	}).
317	addSeries("Series A",
318	[ 1, 2, 1, 2, 1, 2, 1 ],
319	{
320	min: 0,
321	max: 3,
322	stroke: {color: "red", width: 2, join: "round"},
323	fill: "red",
324	marker: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0"
325	}
326	).
327	addSeries("Series B",
328	[ 2, 1, 2, 1, 2, 1, 2 ],
329	{
330	stroke: {color: "blue", width: 2, join: "round"},
331	fill: "blue",
332	marker: "m-3,-3 l0,6 6,0 0,-6 z"
333	}
334	).
335	render();
336	}
337	},
338	{
339	description: "Stacked lines, markers, shadows, no axes, custom strokes, fills, and markers.",
340	makeChart: function(node){
341	(new dojox.charting.Chart(node)).
342	addPlot("default", {
343	type: "StackedLines",
344	markers: true,
345	tension:"S",
346	shadow: {dx: 1, dy: 1, width: 2, color: [0, 0, 0, 0.3]}
347	}).
348	addSeries("Series A",
349	[ 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 ],
350	{
351	stroke: { color: "red", width: 2 },
352	fill: "lightpink",
353	marker: "m-3,-3 l0,6 6,0 0,-6 z"
354	}
355	).
356	addSeries("Series B",
357	[ 1, 1.6, 1.3, 1.4, 1.1, 1.5, 1.1 ],
358	{
359	stroke: { color: "blue", width: 2 },
360	fill: "lightblue",
361	marker: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0"
362	}
363	).
364	addSeries("Series C",
365	[ 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 ],
366	{
367	stroke: { color: "green", width: 2 },
368	fill: "lightgreen",
369	marker: "m0,-3 l3,3 -3,3 -3,-3 z"
370	}
371	).
372	render();
373	}
374	},
375	{
376	description: "Stacked areas, axes (aligned on major ticks), custom strokes and fills.",
377	makeChart: function(node){
378	(new dojox.charting.Chart(node)).
379	addAxis("x", {fixLower: "major", fixUpper: "major"}).
380	addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0}).
381	addPlot("default", { type: "StackedAreas", tension:"S" }).
382	addSeries("Series A",
383	[ -2, 1.1, 1.2, 1.3, 1.4, 1.5, -1.6 ],
384	{ stroke: {color: "red", width: 2}, fill: "lightpink" }
385	).
386	addSeries("Series B",
387	[ 1, 1.6, 1.3, 1.4, 1.1, 1.5, 1.1 ],
388	{ stroke: {color: "blue", width: 2}, fill: "lightblue" }
389	).
390	addSeries("Series C",
391	[ 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 ],
392	{ stroke: {color: "green", width: 2}, fill: "lightgreen" }
393	).
394	render();
395	}
396	},
397	{
398	description: "Candlesticks with gaps, custom strokes and fills, optional mid points.",
399	makeChart: function(node){
400	(new dojox.charting.Chart(node)).
401	addPlot("default", {type: "Candlesticks", gap: 1}).
402	addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}).
403	addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}).
404	addSeries("Series A", [
405	{ open: 20, close: 16, high: 22, low: 8 },
406	{ open: 16, close: 22, high: 26, low: 6, mid: 18 },
407	{ open: 22, close: 18, high: 22, low: 11, mid: 21 },
408	{ open: 18, close: 29, high: 32, low: 14, mid: 27 },
409	{ open: 29, close: 24, high: 29, low: 13, mid: 27 },
410	{ open: 24, close: 8, high: 24, low: 5 },
411	{ open: 8, close: 16, high: 22, low: 2 },
412	{ open: 16, close: 12, high: 19, low: 7 },
413	{ open: 12, close: 20, high: 22, low: 8 },
414	{ open: 20, close: 16, high: 22, low: 8 },
415	{ open: 16, close: 22, high: 26, low: 6, mid: 18 },
416	{ open: 22, close: 18, high: 22, low: 11, mid: 21 },
417	{ open: 18, close: 29, high: 32, low: 14, mid: 27 },
418	{ open: 29, close: 24, high: 29, low: 13, mid: 27 },
419	{ open: 24, close: 8, high: 24, low: 5 },
420	{ open: 8, close: 16, high: 22, low: 2 },
421	{ open: 16, close: 12, high: 19, low: 7 },
422	{ open: 12, close: 20, high: 22, low: 8 },
423	{ open: 20, close: 16, high: 22, low: 8 },
424	{ open: 16, close: 22, high: 26, low: 6 },
425	{ open: 22, close: 18, high: 22, low: 11 },
426	{ open: 18, close: 29, high: 32, low: 14 },
427	{ open: 29, close: 24, high: 29, low: 13 },
428	{ open: 24, close: 8, high: 24, low: 5 },
429	{ open: 8, close: 16, high: 22, low: 2 },
430	{ open: 16, close: 12, high: 19, low: 7 },
431	{ open: 12, close: 20, high: 22, low: 8 },
432	{ open: 20, close: 16, high: 22, low: 8 }
433	],
434	{ stroke: { color: "green" }, fill: "lightgreen" }
435	).
436	render();
437	}
438	},
439	{
440	description: "Open/High/Low/Close with gaps, custom strokes and fills.",
441	makeChart: function(node){
442	(new dojox.charting.Chart(node)).
443	addPlot("default", {type: "OHLC", gap: 2}).
444	addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}).
445	addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}).
446	addSeries("Series A", [
447	{ open: 20, close: 16, high: 22, low: 8 },
448	{ open: 16, close: 22, high: 26, low: 6 },
449	{ open: 22, close: 18, high: 22, low: 11 },
450	{ open: 18, close: 29, high: 32, low: 14 },
451	{ open: 29, close: 24, high: 29, low: 13 },
452	{ open: 24, close: 8, high: 24, low: 5 },
453	{ open: 8, close: 16, high: 22, low: 2 },
454	{ open: 16, close: 12, high: 19, low: 7 },
455	{ open: 12, close: 20, high: 22, low: 8 },
456	{ open: 20, close: 16, high: 22, low: 8 },
457	{ open: 16, close: 22, high: 26, low: 6 },
458	{ open: 22, close: 18, high: 22, low: 11 },
459	{ open: 18, close: 29, high: 32, low: 14 },
460	{ open: 29, close: 24, high: 29, low: 13 },
461	{ open: 24, close: 8, high: 24, low: 5 },
462	{ open: 8, close: 16, high: 22, low: 2 },
463	{ open: 16, close: 12, high: 19, low: 7 },
464	{ open: 12, close: 20, high: 22, low: 8 },
465	{ open: 20, close: 16, high: 22, low: 8 },
466	{ open: 16, close: 22, high: 26, low: 6 },
467	{ open: 22, close: 18, high: 22, low: 11 },
468	{ open: 18, close: 29, high: 32, low: 14 },
469	{ open: 29, close: 24, high: 29, low: 13 },
470	{ open: 24, close: 8, high: 24, low: 5 },
471	{ open: 8, close: 16, high: 22, low: 2 },
472	{ open: 16, close: 12, high: 19, low: 7 },
473	{ open: 12, close: 20, high: 22, low: 8 },
474	{ open: 20, close: 16, high: 22, low: 8 }
475	],
476	{ stroke: { color: "blue" }, fill: "blue" }
477	).
478	render();
479	}
480	},
481	{
482	description: "Columns, no axes, custom strokes and fills.",
483	makeChart: function(node){
484	(new dojox.charting.Chart(node)).
485	addPlot("default", {type: "Columns"}).
486	addSeries("Series A", [ 1, 2, 3, 4, 5 ], { stroke: { color: "red" }, fill: "lightpink" }).
487	addSeries("Series B", [ 5, 4, 3, 2, 1 ], { stroke: {color: "blue"}, fill: "lightblue" }).
488	render();
489	}
490	},
491	{
492	description: "Columns with gaps beetwen them, vertical axis aligned on major ticks, custom strokes, fills.",
493	makeChart: function(node){
494	(new dojox.charting.Chart(node)).
495	addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"}).
496	addPlot("default", {type: "Columns", gap: 2}).
497	addSeries("Series A", [ 1, 2, 3, 4, 5 ], { stroke: {color: "red"}, fill: "lightpink" }).
498	addSeries("Series B", [ 5, 4, 3, 2, 1 ], { stroke: {color: "blue"}, fill: "lightblue" }).
499	render();
500	}
501	},
502	{
503	description: "Stacked columns, no axes, custom strokes and fills.",
504	makeChart: function(node){
505	(new dojox.charting.Chart(node)).
506	addPlot("default", {type: "StackedColumns"}).
507	addSeries("Series A", [ 1, 2, 3, 4, 5 ], {stroke: { color: "red" }, fill: "lightpink" }).
508	addSeries("Series B", [ 2, 1, 2, 1, 2 ], {stroke: { color: "blue" }, fill: "lightblue" }).
509	render();
510	}
511	},
512	{
513	description: "Bars, axes aligned on major ticks, no minor ticks, custom strokes and fills.",
514	makeChart: function(node){
515	(new dojox.charting.Chart(node)).
516	addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}).
517	addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}).
518	addPlot("default", {type: "Bars"}).
519	addSeries("Series A",
520	[1, 2, 3, 4, 5],
521	{ stroke: {color: "red"}, fill: "lightpink" }
522	).
523	addSeries("Series B",
524	[5, 4, 3, 2, 1],
525	{ stroke: {color: "blue"}, fill: "lightblue" }
526	).
527	render();
528	}
529	},
530	{
531	description: "Stacked bars, no axes, custom strokes and fills.",
532	makeChart: function(node){
533	(new dojox.charting.Chart(node)).
534	addPlot("default", {type: "StackedBars"}).
535	addSeries("Series A", [ 1, 2, 3, 4, 5 ], { stroke: { color: "red" }, fill: "lightpink" }).
536	addSeries("Series B", [ 2, 1, 2, 1, 2 ], { stroke: { color: "blue" }, fill: "lightblue" }).
537	render();
538	}
539	},
540	{
541	description: "Clustered columns, custom axes, custom strokes, fills, and gap.",
542	makeChart: function(node){
543	(new dojox.charting.Chart(node)).
544	addAxis("x", {
545	fixLower: "minor", fixUpper: "minor", natural: true
546	}).
547	addAxis("y", {
548	vertical: true, fixLower: "major", fixUpper: "major", includeZero: true
549	}).
550	addPlot("default", {type: "ClusteredColumns", gap: 10}).
551	addSeries("Series A",
552	[ 1, 2, 3, 4, 5 ],
553	{ stroke: {color: "red"}, fill: "lightpink" }
554	).
555	addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}).
556	render();
557	}
558	},
559	{
560	description: "Clustered bars, custom axes, custom strokes, fills, and gap.",
561	makeChart: function(node){
562	(new dojox.charting.Chart(node)).
563	addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}).
564	addAxis("y", {vertical: true, fixLower: "minor", fixUpper: "minor", natural: true}).
565	addPlot("default", { type: "ClusteredBars", gap: 5 }).
566	addSeries("Series A", [ 1, 2, 3, 4, 5 ], { stroke: { color: "red" }, fill: "lightpink" }).
567	addSeries("Series B", [ 2, 1, 2, 1, 2 ], { stroke: { color: "blue" }, fill: "lightblue" }).
568	render();
569	}
570	},
571	{
572	description: "Columns with gaps beetwen them, grids, custom strokes, fills, axes.",
573	makeChart: function(node){
574	(new dojox.charting.Chart(node)).
575	addAxis("x", { fixLower: "minor", fixUpper: "minor", natural: true }).
576	addAxis("y", {
577	vertical: true,
578	fixLower: "major",
579	fixUpper: "major",
580	minorTicks: false,
581	includeZero: true
582	}).
583	addPlot("front_grid", { type: "Grid", hMajorLines: true, vMajorLines: false }).
584	addPlot("default", { type: "Columns", gap: 10 }).
585	addPlot("back_grid", { type: "Grid", hMajorLines: false, vMajorLines: true }).
586	addSeries("Series A",
587	[ 1, 2, 3, 4, 5 ],
588	{ stroke: { color: "red" }, fill: "lightpink" }
589	).
590	addSeries("Series B",
591	[ 5, 4, 3, 2, 1 ],
592	{ stroke: { color: "blue" }, fill: "lightblue" }
593	).
594	render();
595	}
596	},
597	{
598	description: "Columns with gaps beetwen them, grids, custom strokes, fills, axes, with min=0, max=8, and manually specified ticks on the vertical axis.",
599	makeChart: function(node){
600	(new dojox.charting.Chart(node)).
601	addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true}).
602	addAxis("y", {
603	vertical: true, fixLower: "major", fixUpper: "major",
604	includeZero: true, min: 0, max: 8, minorLabels: false,
605	majorTicks: true, minorTicks: true, microTicks: false,
606	majorTickStep: 2, minorTickStep: 1, microTickStep: 0.5
607	}).
608	addPlot("front_grid", {
609	type: "Grid", hMajorLines: true, vMajorLines: false
610	}).
611	addPlot("default", {type: "Columns", gap: 10}).
612	addPlot("back_grid", {
613	type: "Grid", hMajorLines: false, vMajorLines: true
614	}).
615	addSeries("Series A",
616	[ 1, 2, 3, 4, 5 ],
617	{ stroke: {color: "red"}, fill: "lightpink" }
618	).
619	addSeries("Series B",
620	[ 5, 4, 3, 2, 1 ],
621	{ stroke: {color: "blue"}, fill: "lightblue" }
622	).
623	render();
624	}
625	},
626	{
627	description: "Columns with positive and negative values, axes, and grid.",
628	makeChart: function(node){
629	(new dojox.charting.Chart(node)).
630	addAxis("x").
631	addAxis("y", { vertical: true }).
632	addPlot("default", { type: "Columns", gap: 10 }).
633	addPlot("grid", { type: "Grid" }).
634	addSeries("Series A",
635	[ 2, 1, 0.5, -1, -2 ],
636	{ stroke: {color: "red"}, fill: "lightpink" }
637	).
638	addSeries("Series B",
639	[ -2, -1, -0.5, 1, 2 ],
640	{ stroke: {color: "blue"}, fill: "lightblue" }
641	).
642	render();
643	}
644	},
645	{
646	description: "Clustered columns with positive and negative values, axes, and grid.",
647	makeChart: function(node){
648	(new dojox.charting.Chart(node)).
649	addAxis("x").
650	addAxis("y", { vertical: true }).
651	addPlot("default", { type: "ClusteredColumns", gap: 10 }).
652	addPlot("grid", { type: "Grid" }).
653	addSeries("Series A",
654	[ 2, 1, 0.5, -1, -2 ],
655	{ stroke: {color: "red"}, fill: "lightpink" }
656	).
657	addSeries("Series B",
658	[ -2, -1, -0.5, 1, 2 ],
659	{ stroke: {color: "blue"}, fill: "lightblue" }
660	).
661	addSeries("Series C",
662	[ 1, 0.5, -1, -2, -3 ],
663	{ stroke: {color: "green"}, fill: "lightgreen" }
664	).
665	render();
666	}
667	},
668	{
669	description: "Bars with positive and negative values, axes, and grid.",
670	makeChart: function(node){
671	(new dojox.charting.Chart(node)).
672	addAxis("x").
673	addAxis("y", { vertical: true }).
674	addPlot("default", { type: "Bars", gap: 10 }).
675	addPlot("grid", { type: "Grid" }).
676	addSeries("Series A",
677	[ 2, 1, 0.5, -1, -2 ],
678	{ stroke: {color: "red"}, fill: "lightpink" }
679	).
680	addSeries("Series B",
681	[ -2, -1, -0.5, 1, 2 ],
682	{ stroke: {color: "blue"}, fill: "lightblue" }
683	).
684	render();
685	}
686	},
687	{
688	description: "Clustered bars with positive and negative values, axes, and grid.",
689	makeChart: function(node){
690	(new dojox.charting.Chart(node)).
691	addAxis("x").
692	addAxis("y", { vertical: true }).
693	addPlot("default", { type: "ClusteredBars", gap: 10 }).
694	addPlot("grid", { type: "Grid" }).
695	addSeries("Series A",
696	[ 2, 1, 0.5, -1, -2 ],
697	{ stroke: { color: "red" }, fill: "lightpink" }
698	).
699	addSeries("Series B",
700	[ -2, -1, -0.5, 1, 2 ],
701	{ stroke: { color: "blue" }, fill: "lightblue" }
702	).
703	addSeries("Series C",
704	[ 1, 0.5, -1, -2, -3 ],
705	{ stroke: { color: "green" }, fill: "lightgreen" }
706	).
707	render();
708	}
709	},
710	{
711	description: "Default lines with 2D data, custom axis, red theme.",
712	makeChart: function(node){
713	(new dojox.charting.Chart(node)).
714	setTheme(dojox.charting.themes.Minty).
715	addAxis("x", {
716	min: 0,
717	max: 6,
718	majorTick: { stroke: "black", length: 3 },
719	minorTick: { stroke: "gray", length: 3 }
720	}).
721	addAxis("y", {
722	vertical: true,
723	min: 0,
724	max: 10,
725	majorTick: { stroke: "black", length: 3 },
726	minorTick: { stroke: "gray", length: 3 }
727	}).
728	addSeries("Series A", [
729	{ x: 0.5, y: 5 },
730	{ x: 1.5, y: 1.5 },
731	{ x: 2, y: 9 },
732	{ x: 5, y: 0.3 }
733	]).
734	addSeries("Series B", [
735	{ x: 0.3, y: 8 },
736	{ x: 4, y: 6 },
737	{ x: 5.5, y: 2 }
738	]).
739	render();
740	}
741	},
742	{
743	description: "Scatter chart, custom axis, purple theme.",
744	makeChart: function(node){
745	(new dojox.charting.Chart(node)).
746	setTheme(dojox.charting.themes.Ireland).
747	addPlot("default", {type: "Scatter"}).
748	addAxis("x", {
749	min: 0,
750	max: 6,
751	majorTick: { stroke: "black", length: 3 },
752	minorTick: { stroke: "gray", length: 3 }
753	}).
754	addAxis("y", {
755	vertical: true,
756	min: 0,
757	max: 10,
758	majorTick: { stroke: "black", length: 3 },
759	minorTick: { stroke: "gray", length: 3 }
760	}).
761	addSeries("Series A", [
762	{ x: 0.5, y: 5 },
763	{ x: 1.5, y: 1.5 },
764	{ x: 2, y: 9 },
765	{ x: 5, y: 0.3 }
766	]).
767	addSeries("Series B", [
768	{ x: 0.3, y: 8 },
769	{ x: 4, y: 6 },
770	{ x: 5.5, y: 2 }
771	]).
772	render();
773	}
774	},
775	{
776	description: "Markers, lines, 2D data, custom axis, blue theme.",
777	makeChart: function(node){
778	(new dojox.charting.Chart(node)).
779	setTheme(dojox.charting.themes.PlotKit.blue).
780	addPlot("default", {
781	type: "Default",
782	lines: true,
783	markers: true,
784	tension: 2
785	}).
786	addAxis("x", {
787	min: 0,
788	max: 6,
789	majorTick: { stroke: "black", length: 3 },
790	minorTick: { stroke: "gray", length: 3 }
791	}).
792	addAxis("y", {
793	vertical: true,
794	min: 0,
795	max: 10,
796	majorTick: { stroke: "black", length: 3 },
797	minorTick: { stroke: "gray", length: 3 }
798	}).
799	addSeries("Series A", [
800	{ x: 0.5, y: 5 },
801	{ x: 1.5, y: 1.5 },
802	{ x: 2, y: 9 },
803	{ x: 5, y: 0.3 }
804	]).
805	addSeries("Series B", [
806	{ x: 0.3, y: 8 },
807	{ x: 4, y: 6 },
808	{ x: 5.5, y: 2 }
809	]).
810	render();
811	}
812	}
813	];
814	var now = function(){
815	return (new Date()).getTime();
816	};
817
818
819	dojo.addOnLoad(function(){
820	var defaultStyle = { width: "400px", height: "200px" };
821	var tmpl = new dojox.dtl.Template(dojo.byId("template").value);
822	var context = new dojox.dtl.Context({ charts: charts });
823	dojo.byId("charts").innerHTML = tmpl.render(context);
824
825	dojo.forEach(charts, function(item, idx){
826	var start = now();
827	var n = dojo.byId("chart_"+idx);
828	dojo.style(n, item.style\|\|defaultStyle);
829	item.makeChart(n);
830	console.debug((now()-start), "ms to create:", (idx+1)+":", item.description);
831	});
832	});
833
834	</script>
835	</head>
836	<body>
837	<textarea id="template" style="display: none;">
838	{% for item in charts %}
839	<p>{{ forloop.counter }}: {{ item.description }}</p>
840	<div id="chart_{{ forloop.counter0 }}"></div>
841	{% endfor %}
842	</textarea>
843
844	<h1>Chart 2D</h1>
845
846	<div id="charts"></div>
847	</body>
848	</html>

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

Context Navigation

source: Dev/trunk/src/client/dojox/charting/tests/test_chart2d.html

Download in other formats: