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

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 7.4 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<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
18<title>Chart 2D: dynamics</title>
19<style type="text/css">
20        @import "../../../dojo/resources/dojo.css";
21        @import "../../../dijit/tests/css/dijitTests.css";
22        @import "../../../dijit/themes/tundra/tundra.css";
23
24        .dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px}
25        .dojoxLegendText {vertical-align: text-top; padding-right: 10px}
26</style>
27<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
28<script type="text/javascript">
29dojo.require("dijit.form.Button");
30dojo.require("dijit.form.CheckBox");
31dojo.require("dijit.form.ComboBox");
32
33dojo.require("dojox.charting.Chart");
34dojo.require("dojox.charting.axis2d.Default");
35dojo.require("dojox.charting.plot2d.Columns");
36dojo.require("dojox.charting.plot2d.ClusteredColumns");
37dojo.require("dojox.charting.plot2d.StackedColumns");
38dojo.require("dojox.charting.plot2d.Bars");
39dojo.require("dojox.charting.plot2d.ClusteredBars");
40dojo.require("dojox.charting.plot2d.StackedBars");
41dojo.require("dojox.charting.plot2d.Areas");
42dojo.require("dojox.charting.plot2d.StackedAreas");
43dojo.require("dojox.charting.plot2d.Pie");
44dojo.require("dojox.charting.plot2d.Grid");
45dojo.require("dojox.charting.themes.CubanShirts");
46dojo.require("dojox.charting.widget.Legend");
47
48dojo.require("dojox.lang.functional.sequence");
49
50dojo.require("dojo.parser");
51
52var chart, legend, size = 10, magnitude = 30;
53
54var getData = function(){
55        var data = new Array(size);
56        for(var i = 0; i < size; ++i){
57                data[i] = Math.random() * magnitude;
58        }
59        return data;
60};
61
62var getZeroes = function(){
63        return dojox.lang.functional.repeat(size, "-> 0", 0);
64};
65
66var makeObjects = function(){
67        chart = new dojox.charting.Chart("test");
68        chart.setTheme(dojox.charting.themes.CubanShirts);
69
70        if(dijit.byId("hAxis").get("checked")){
71                chart.addAxis("x", {natural: true, includeZero: true, fixUpper: "minor"});
72        }
73
74        if(dijit.byId("vAxis").get("checked")){
75                chart.addAxis("y", {vertical: true, natural: true, includeZero: true, fixUpper: "minor"});
76        }
77
78        chart.addPlot("default", {type: dijit.byId("plot").get("value"), gap: 2});
79
80        if(dijit.byId("grid").get("checked")){
81                chart.addPlot("grid", {type: "Grid", hMinorLines: true, vMinorLines: true});
82        }
83
84        for(var i = 1; i <= 5; ++i){
85                if(dijit.byId("s" + i).get("checked")){
86                        chart.addSeries("Series " + i, getData(), {stroke: {color: "black", width: 1}});
87                }
88        }
89        if(dijit.byId("s6").get("checked")){
90                chart.addSeries("Series 6", getZeroes(), {stroke: {color: "black", width: 1}});
91        }
92
93        chart.render();
94       
95        legend = new dojox.charting.widget.Legend({chart: chart}, "legend");
96};
97
98dojo.addOnLoad(makeObjects);
99
100changePlot = function(){
101        var type = dijit.byId("plot").get("value");
102        chart.addPlot("default", {type: type, gap: 2});
103        chart.render();
104        legend.refresh();
105};
106
107changeGrid = function(){
108        if(dijit.byId("grid").get("checked")){
109                chart.addPlot("grid", {type: "Grid", hMinorLines: true, vMinorLines: true});
110        }else{
111                chart.removePlot("grid");
112        }
113        chart.render();
114};
115
116changeX = function(){
117        if(dijit.byId("hAxis").get("checked")){
118                chart.addAxis("x", {natural: true, includeZero: true, fixUpper: "minor"});
119        }else{
120                chart.removeAxis("x");
121        }
122        chart.render();
123};
124
125changeY = function(){
126        if(dijit.byId("vAxis").get("checked")){
127                chart.addAxis("y", {vertical: true, natural: true, includeZero: true, fixUpper: "minor"});
128        }else{
129                chart.removeAxis("y");
130        }
131        chart.render();
132};
133
134changeSeries = function(n){
135        if(n == 6){
136                // special case
137                if(dijit.byId("s6").get("checked")){
138                        chart.addSeries("Series 6", getZeroes(), {stroke: {color: "black", width: 1}});
139                }else{
140                        chart.removeSeries("Series 6");
141                }
142        }else{
143                if(dijit.byId("s" + n).get("checked")){
144                        chart.addSeries("Series " + n, getData(), {stroke: {color: "black", width: 1}});
145                        dijit.byId("sb" + n).get("disabled", false);
146                }else{
147                        chart.removeSeries("Series " + n);
148                        dijit.byId("sb" + n).get("disabled", true);
149                }
150        }
151        chart.render();
152        legend.refresh();
153};
154
155addSeries = function(n){
156        chart.addSeries("Series " + n, getData(), {stroke: {color: "black", width: 1}});
157        chart.render();
158        legend.refresh();
159};
160
161</script>
162</head>
163<body class="tundra">
164<h1>Chart 2D: dynamics</h1>
165                <button id="reset1" type="reset" dojoType="dijit.form.Button">Reset with no onClick handler should reset</button>
166
167<table>
168        <tr>
169                <td>Plot:</td>
170                <td>
171                        <select dojoType="dijit.form.ComboBox" id="plot" onChange="changePlot()">
172                                <option value="Columns">Columns</option>
173                                <option value="ClusteredColumns">ClusteredColumns</option>
174                                <option value="StackedColumns">StackedColumns</option>
175                                <option value="Bars">Bars</option>
176                                <option value="ClusteredBars">ClusteredBars</option>
177                                <option value="StackedBars">StackedBars</option>
178                                <option value="Areas">Areas</option>
179                                <option value="StackedAreas">StackedAreas</option>
180                                <option value="Pie">Pie</option>
181                        </select>
182                </td>
183        </tr>
184        <tr>
185                <td>Grid:</td>
186                <td>
187                        <input type="checkbox" dojoType="dijit.form.CheckBox" checked="true" id="grid" onChange="changeGrid()">
188                        <label for="grid">include</label>
189                </td>
190        </tr>
191        <tr>
192                <td>X axis:</td>
193                <td>
194                        <input type="checkbox" dojoType="dijit.form.CheckBox" checked="true" id="hAxis" onChange="changeX()">
195                        <label for="hAxis">include</label>
196                </td>
197        </tr>
198        <tr>
199                <td>Y axis:</td>
200                <td>
201                        <input type="checkbox" dojoType="dijit.form.CheckBox" checked="true" id="vAxis" onChange="changeY()">
202                        <label for="vAxis">include</label>
203                </td>
204        </tr>
205        <tr>
206                <td>Series 1:</td>
207                <td>
208                        <input type="checkbox" dojoType="dijit.form.CheckBox" checked="true" id="s1" onChange="changeSeries(1)">
209                        <label for="s1">include</label>
210                        &nbsp;
211                        <button dojoType="dijit.form.Button" id="sb1" onClick="addSeries(1)">Randomize</button>
212                </td>
213        </tr>
214        <tr>
215                <td>Series 2:</td>
216                <td>
217                        <input type="checkbox" dojoType="dijit.form.CheckBox" checked="true" id="s2" onChange="changeSeries(2)">
218                        <label for="s2">include</label>
219                        &nbsp;
220                        <button dojoType="dijit.form.Button" id="sb2" onClick="addSeries(2)">Randomize</button>
221                </td>
222        </tr>
223        <tr>
224                <td>Series 3:</td>
225                <td>
226                        <input type="checkbox" dojoType="dijit.form.CheckBox" checked="true" id="s3" onChange="changeSeries(3)">
227                        <label for="s3">include</label>
228                        &nbsp;
229                        <button dojoType="dijit.form.Button" id="sb3" onClick="addSeries(3)">Randomize</button>
230                </td>
231        </tr>
232        <tr>
233                <td>Series 4:</td>
234                <td>
235                        <input type="checkbox" dojoType="dijit.form.CheckBox" checked="true" id="s4" onChange="changeSeries(4)">
236                        <label for="s4">include</label>
237                        &nbsp;
238                        <button dojoType="dijit.form.Button" id="sb4" onClick="addSeries(4)">Randomize</button>
239                </td>
240        </tr>
241        <tr>
242                <td>Series 5:</td>
243                <td>
244                        <input type="checkbox" dojoType="dijit.form.CheckBox" checked="true" id="s5" onChange="changeSeries(5)">
245                        <label for="s5">include</label>
246                        &nbsp;
247                        <button dojoType="dijit.form.Button" id="sb5" onClick="addSeries(5)">Randomize</button>
248                </td>
249        </tr>
250        <tr>
251                <td>Series 6:</td>
252                <td>
253                        <input type="checkbox" dojoType="dijit.form.CheckBox" checked="false" id="s6" onChange="changeSeries(6)">
254                        <label for="s6">include</label>
255                        &nbsp;this series contains all 0 values
256                </td>
257        </tr>
258</table>
259<div id="test" style="width: 600px; height: 400px;"></div>
260<div id="legend"></div>
261</body>
262</html>
Note: See TracBrowser for help on using the repository browser.