root / trunk / tests / charting / test_engine.html

Revision 7343, 6.3 kB (checked in by jburke, 22 months ago)

(merge from 0.4 branch) References #2366. Getting test files to work with xdomain web builds. This usually means converting them to use dojo.addOnLoad().

Line 
1<html>
2        <head>
3                <title>Dojo Charting Engine, general tests</title>
4                <script>
5                        djConfig={
6                                isDebug:true 
7                        }</script>
8                <script src="../../dojo.js"></script>
9                <script>
10                        dojo.require("dojo.collections.Store");
11                        dojo.require("dojo.charting.Chart");
12                        dojo.require('dojo.json');
13
14                        dojo.addOnLoad(function(){
15                                //      our sample data for our line chart.
16                                var json = [
17                                        { x: 0, y: 110, size:20, x2:20, high:110, low: 80, open:90, close:96 },
18                                        { x: 10, y: 24, size:4, x2: 25, high:56, low: 43, open:43, close:54 },
19                                        { x: 15, y:63, size:32, x2: 30, high: 100, low: 40, open:56, close: 96 },
20                                        { x: 25, y: 5, size:13, x2: 35, high: 40, low: 36, open:40, close:36 },
21                                        { x: 40, y: 98, size:7, x2: 40, high: 86, low: 66, open: 80, close: 70 },
22                                        { x: 45, y: 54, size:18, x2: 45, high: 50, low: 0, open: 42, close: 4 }
23                                ];
24                                var store = new dojo.collections.Store();
25                                store.setData(json);
26       
27                                //      define the chart.
28                                var s1 = new dojo.charting.Series({
29                                        dataSource:store,
30                                        bindings:{ x:"x", y:"y", size:"size" },
31                                        label:"The Main Series"
32                                });
33                                var s2 = new dojo.charting.Series({
34                                        dataSource:store,
35                                        bindings:{ x:"y", y:"size" },
36                                        label:"Series 2"
37                                });
38                                var s3 = new dojo.charting.Series({
39                                        dataSource:store,
40                                        bindings:{ x: "x2", high:"high", low:"low", open:"open", close:"close" },
41                                        label: "Series 3" 
42                                });
43                                var s4 = new dojo.charting.Series({
44                                        dataSource:store,
45                                        bindings:{ x:"y", y:"low" },
46                                        label:"Series 4"
47                                });
48                                var s5 = new dojo.charting.Series({
49                                        dataSource:store,
50                                        bindings:{ x:"y", y:"open" },
51                                        label:"Series 5"
52                                });
53       
54                                //      set up some bars for a test.
55                                var b0 = new dojo.collections.Store();
56                                b0.setData([
57                                        { x:43, y:88, z:42, a:66, b:34 },
58                                        { x:15, y:68, z:14, a:10, b:69 },
59                                        { x:92, y:82, z:4, a:52, b:21 },
60                                        { x:100, y:47, z:83, a:40, b:35 },
61                                        { x:3, y:97, z:3, a:83, b:6 },
62                                        { x:70, y:89, z:87, a:88, b:30 },
63                                        { x:26, y:100, z:78, a:32, b:36 },
64                                        { x:20, y:36, z:28, a:3, b:13 },
65                                        { x:39, y:69, z:28, a:31, b:77 },
66                                        { x:9, y:97, z:80, a:5, b:9 },
67                                        { x:98, y:76, z:12, a:23, b:52 }
68                                ]);
69                                var bar0 = new dojo.charting.Series({ dataSource:b0, bindings:{ y:"x", high:"y", low:"a" }, label: "Bar 0" });
70                                var bar1 = new dojo.charting.Series({ dataSource:b0, bindings:{ y:"y", high:"z", low:"b" }, label: "Bar 1" });
71                                var bar2 = new dojo.charting.Series({ dataSource:b0, bindings:{ y:"z", high:"a", low:"x" }, label: "Bar 2" });
72                                var bar3 = new dojo.charting.Series({ dataSource:b0, bindings:{ y:"a", high:"b", low:"y" }, label: "Bar 3" });
73                                var bar4 = new dojo.charting.Series({ dataSource:b0, bindings:{ y:"b", high:"x", low:"z" }, label: "Bar 4" });
74                               
75                                //      test the evaluate
76                                /*
77                                var data = s1.evaluate();
78                                var a=[];
79                                for(var i=0; i<data.length; i++){
80                                        a.push("{ x:"+data[i].x +", y:"+data[i].y + "}");
81                                }
82                                alert("Data evaluation:\n"+a.join("\n"));
83                                */
84                               
85                                //      keep going.
86                                var xA = new dojo.charting.Axis();
87                                xA.range={upper:130, lower:0};
88                                xA.origin="max";
89                                xA.showTicks = true;
90                                xA.label = "A Range of Things";
91                                xA.labels = [ 0, 20, 40, 60, 80, 100 ];
92       
93                                var yA = new dojo.charting.Axis();
94                                yA.range={upper:180,lower:0};
95                                yA.showLines = true;
96                                yA.showTicks = true;
97                                yA.labels = [ {label:"min", value:0 }, { label:"35",value:35 }, { label:"max", value:120 } ];
98                                yA.label = "Areas"
99       
100                                var p = new dojo.charting.Plot(xA, yA);
101                                p.addSeries({ data:s1, plotter: dojo.charting.Plotters.CurvedLine });
102                                var pA = new dojo.charting.Plot(xA, yA);
103                                pA.renderType = dojo.charting.RenderPlotSeries.Grouped;
104                                pA.addSeries({ data:s2, plotter: dojo.charting.Plotters.StackedCurvedArea });
105                                pA.addSeries({ data:s4, plotter: dojo.charting.Plotters.StackedCurvedArea });
106                                pA.addSeries({ data:s5, plotter: dojo.charting.Plotters.StackedCurvedArea });
107       
108                                var pa = new dojo.charting.PlotArea();
109                                pa.size={width:700,height:170};
110                                pa.padding={top:20, right:20, bottom:30, left:50 };
111                                pa.plots.push(p);
112                                pa.plots.push(pA);
113       
114                                //      auto assign colors, and increase the step (since we've only 2 series)
115                                s1.color = pa.nextColor();
116                                s2.color = pa.nextColor();
117                                s3.color = pa.nextColor();
118                                s4.color = pa.nextColor();
119                                s5.color = pa.nextColor();
120       
121                                //////////////////////
122                                var xB = new dojo.charting.Axis();
123                                xB.range={upper:100, lower:0};
124                                xB.origin="max";
125                                xB.showTicks = true;
126                                xB.showLines = true;
127                                xB.labels = [ 0, 20, 40, 60, 80, 100 ];
128       
129                                var yB = new dojo.charting.Axis();
130                                yB.range={upper:120,lower:0};
131                                yB.origin="min";
132                                yB.showLines = true;
133       
134                                var yB2 = new dojo.charting.Axis();
135                                yB2.range={upper:100,lower:0};
136                                yB2.origin="max";
137                                yB2.label = "Gantt Time Period";
138       
139                                var p2 = new dojo.charting.Plot(xB, yB);
140                                p2.addSeries({ data:s1, plotter: dojo.charting.Plotters.CurvedLine });
141       
142                                var p3 = new dojo.charting.Plot(xB, yB2);
143                                p3.renderType = dojo.charting.RenderPlotSeries.Grouped;
144                                p3.addSeries({ data:bar0, plotter: dojo.charting.Plotters.Gantt });
145                                p3.addSeries({ data:bar1, plotter: dojo.charting.Plotters.Gantt });
146                                p3.addSeries({ data:bar2, plotter: dojo.charting.Plotters.Gantt });
147                                p3.addSeries({ data:bar3, plotter: dojo.charting.Plotters.Gantt });
148                                p3.addSeries({ data:bar4, plotter: dojo.charting.Plotters.HorizontalBar });
149                               
150                                var pa2 = new dojo.charting.PlotArea();
151                                pa2.plots.push(p3);
152                                pa2.plots.push(p2);
153                                pa2.size={width:700,height:400};
154                                pa2.padding={top:20, right:40, bottom:30, left:30 };
155                               
156                                bar0.color = pa2.nextColor();
157                                bar1.color = pa2.nextColor();
158                                bar2.color = pa2.nextColor();
159                                bar3.color = pa2.nextColor();
160                                bar4.color = pa2.nextColor();
161                               
162                                var chart = new dojo.charting.Chart(null, "Test chart", "This is a potential description");
163                                chart.addPlotArea({ x:50,y:50, plotArea:pa });
164                                chart.addPlotArea({ x:50,y:250, plotArea:pa2 });
165                       
166                                chart.node = dojo.byId("chartTest1");
167                                chart.render();
168                        });
169                </script>
170                <style>
171                        #chartTest1 {
172                                margin:12px;
173                                width:800px;
174                                height:700px;
175                                background-color:#dedeed;
176                                border:1px solid #999;
177                        }
178                </style>
179        </head>
180        <body>
181                <div id="chartTest1"></div>
182        </body>
183</html>
Note: See TracBrowser for help on using the browser.