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

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

Added Dojo 1.9.3 release.
File size: 9.5 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: Selectable Legend test</title>
19        <style type="text/css">
20            @import "../../../dojo/resources/dojo.css";
21            @import "../../../dijit/tests/css/dijitTests.css";
22            @import "../../../dijit/themes/claro/claro.css";
23                        @import "../resources/Legend.css";
24        </style>
25        <style>
26                        .bars{
27                                width:300px;
28                                height:200px;
29                        }
30                        .columns{
31                                width:300px;
32                                height:250px;
33                        }
34                        .pie {
35                                width:500px;
36                                height:300px;
37                        }
38                        .bubble{
39                                width:320px;
40                                height:300px;
41                        }
42        </style>
43
44        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
45        <script type="text/javascript">
46            dojo.require("dijit.dijit");
47            dojo.require("dojox.charting.Chart");
48            dojo.require("dojox.charting.axis2d.Default");
49            dojo.require("dojox.charting.plot2d.Lines");
50            dojo.require("dojox.charting.plot2d.StackedAreas");
51            dojo.require("dojox.charting.plot2d.Bars");
52            dojo.require("dojox.charting.plot2d.ClusteredBars");
53            dojo.require("dojox.charting.plot2d.StackedBars");
54            dojo.require("dojox.charting.plot2d.Columns");
55            dojo.require("dojox.charting.plot2d.ClusteredColumns");
56            dojo.require("dojox.charting.plot2d.StackedColumns");
57            dojo.require("dojox.charting.plot2d.Bubble");
58            dojo.require("dojox.charting.plot2d.Pie");
59                        dojo.require("dojox.charting.themes.MiamiNice");
60                        dojo.require("dojox.charting.widget.SelectableLegend");
61                        dojo.require("dojox.charting.action2d.Highlight");
62                dojo.addOnLoad(function(){
63                                var bars = new dojox.charting.Chart("bars").
64                                        setTheme(dojox.charting.themes.MiamiNice).
65                                        addPlot("default",{type: "Bars",gap:2}).
66                                        addAxis("x",{natural: true, includeZero: true}).
67                                        addAxis("y",{natural: true, vertical:true}).
68                                        addSeries("A",[1,3,5,7,2,4,6]).
69                                        render();
70                                var barsLegend = new dojox.charting.widget.SelectableLegend({chart: bars},"barsLegend");
71                               
72                                var clusteredBars = new dojox.charting.Chart("clusteredBars").
73                                        setTheme(dojox.charting.themes.MiamiNice).
74                                        addPlot("default",{type:"ClusteredBars",gap:2}).
75                                        addAxis("x",{natural: true, includeZero: true}).
76                                        addAxis("y",{natural: true, vertical:true}).
77                                        addSeries("A",[1,3,5,7,2,4,6]).
78                                        addSeries("B",[2,4,6,8,3,5,7]).
79                                        addSeries("C",[6,4,2,7,5,3,1]);
80//                                      new dojox.charting.action2d.Highlight(clusteredBars, "default");
81                                        clusteredBars.render();
82                                var clusteredBarsLegend = new dojox.charting.widget.SelectableLegend({chart: clusteredBars},"clusteredBarsLegend");
83                               
84                                var stackedBars = new dojox.charting.Chart("stackedBars").
85                                        setTheme(dojox.charting.themes.MiamiNice).
86                                        addPlot("default", {type:"StackedBars",gap:2}).
87                                        addAxis("x",{natual: true, includeZero: true, majorTickStep:1}).
88                                        addAxis("y",{natual: true, vertical: true}).
89                                        addSeries("A",[1,3,5,7,2,4,6]).
90                                        addSeries("B",[2,4,6,8,3,5,7]).
91                                        addSeries("C",[6,4,2,7,5,3,1]).
92                                        render();
93                                var stackedBarsLegend = new dojox.charting.widget.SelectableLegend({chart: stackedBars},"stackedBarsLegend");
94                               
95                                var stackedArea = new dojox.charting.Chart("stackedArea").
96                                        setTheme(dojox.charting.themes.MiamiNice).
97                                        addPlot("default", {type:"StackedAreas",tension:4}).
98                                        addAxis("y",{natural: true, includeZero: true, vertical:true}).
99                                        addAxis("x",{natural: true}).
100                                        addSeries("A",[1,3,5,7,2,4,6]).
101                                        addSeries("B",[2,4,6,8,3,5,7]).
102                                        addSeries("C",[6,4,2,7,5,3,1]).
103                                        render();
104                                var stackedAreaLegend = new dojox.charting.widget.SelectableLegend({chart: stackedArea},"stackedAreaLegend");
105                               
106                                var columns = new dojox.charting.Chart("columns").
107                                        setTheme(dojox.charting.themes.MiamiNice).
108                                        addPlot("default",{type: "Columns",gap:2}).
109                                        addAxis("y",{natural: true, includeZero: true, vertical:true}).
110                                        addAxis("x",{natural: true}).
111                                        addSeries("A",[1,3,5,7,2,4,6]).
112                                        render();
113                                var columnsLegend = new dojox.charting.widget.SelectableLegend({chart: columns},"columnsLegend");
114                               
115                                var clusteredColumns = new dojox.charting.Chart("clusteredColumns").
116                                        setTheme(dojox.charting.themes.MiamiNice).
117                                        addPlot("default",{type:"ClusteredColumns",gap:2}).
118                                        addAxis("y",{natural: true, includeZero: true, vertical:true}).
119                                        addAxis("x",{natural: true}).
120                                        addSeries("A",[1,3,5,7,2,4,6]).
121                                        addSeries("B",[2,4,6,8,3,5,7]).
122                                        addSeries("C",[6,4,2,7,5,3,1]).
123                                        render();
124                                var clusteredColumnsLegend = new dojox.charting.widget.SelectableLegend({chart: clusteredColumns},"clusteredColumnsLegend");
125                               
126                                var stackedColumns = new dojox.charting.Chart("stackedColumns").
127                                        setTheme(dojox.charting.themes.MiamiNice).
128                                        addPlot("default", {type:"StackedColumns",gap:2}).
129                                        addAxis("y",{natual: true, includeZero: true, majorTickStep:1, vertical: true}).
130                                        addAxis("x",{natual: true}).
131                                        addSeries("A",[1,3,5,7,2,4,6]).
132                                        addSeries("B",[2,4,6,8,3,5,7]).
133                                        addSeries("C",[6,4,2,7,5,3,1]).
134                                        render();
135                                var stackedColumnsLegend = new dojox.charting.widget.SelectableLegend({chart: stackedColumns},"stackedColumnsLegend"); 
136                               
137                                var linesColumns = new dojox.charting.Chart("linesColumns").
138                                        setTheme(dojox.charting.themes.MiamiNice).
139                                        addPlot("lines",{type: "Lines",markers:true}).
140                                        addPlot("default",{type: "Columns",gap:2}).
141                                        addAxis("y",{natural: true, vertical:true,includeZero: true}).
142                                        addAxis("x",{natural: true,includeZero: true}).
143                                        addSeries("A",[2,4,6,8,3,5,7]).
144                                        addSeries("B",[1,3,5,7,2,4,6],{plot:"lines"}).
145                                        render();
146                                var linesColumnsLegend = new dojox.charting.widget.SelectableLegend({chart: linesColumns},"linesColumnsLegend");
147                               
148                                var pie = new dojox.charting.Chart("pie").
149                                        setTheme(dojox.charting.themes.MiamiNice).
150                                        addPlot("default",{type:"Pie",radius:100,font: "normal normal 10pt Tahoma",htmlLabels:true,labelOffset:-20}).
151                                        addSeries("A",[{
152                            y: 12.1,
153                            text: "China"
154                        },{
155                            y: 9.52,
156                            text: "India"
157                        }, {
158                            y: 2.66,
159                            text: "USA"
160                        }, {
161                            y: 2.06,
162                            text: "Indonesia"
163                        }, {
164                            y: 1.63,
165                            text: "Brazil"
166                        },{
167                            y: 1.48,
168                            text: "Russian"
169                        },{
170                            y: 1.29,
171                            text: "Pakistan"
172                        },{
173                            y: 1.25,
174                            text: "Japan"
175                        }]).
176                                        render();
177                                var ainm = new dojox.charting.action2d.Highlight(pie,"default");
178                                var pieLegend = new dojox.charting.widget.SelectableLegend({chart: pie,horizontal:false, outline: true},"pieLegend");
179                               
180                                var bubble = new dojox.charting.Chart("bubble").
181                                        setTheme(dojox.charting.themes.MiamiNice).
182                                        addPlot("default",{type:"Bubble"}).
183                                        addAxis("x",{natual:true, includeZero: true, max:7}).
184                                        addAxis("y",{natual:true, vertical: true, includeZero: true,max:10}).
185                                        addSeries("A",[{x:3,y:5,size:1},{x:1,y:7,size:1},{x:4,y:2,size:3}]).
186                                        addSeries("B",[{x:5,y:5,size:2},{x:2,y:3,size:4},{x:6,y:2,size:1}]).
187                                        addSeries("C",[{x:2,y:7,size:3},{x:6,y:8,size:3}]).
188                                        render();
189                                var bubbleLegend = new dojox.charting.widget.SelectableLegend({chart: bubble, horizontal:false, outline:true},"bubbleLegend");
190                        })
191       
192        </script>
193    </head>
194    <body class="claro">
195                <h1>Chart: Selectable Legend</h1>
196                <h3>Click the legends</h3>
197                <div style="clear:both;">
198                <div style="float:left;">
199                <h2>1.Bars</h2>
200                <div id="bars" class="bars"></div>
201                <div id="barsLegend"></div>
202                </div>
203                <div style="float:left;">
204                <h2>2.Clustered Bars</h2>
205                <div id="clusteredBars" class="bars"></div>
206                <div id="clusteredBarsLegend"></div>
207                </div>
208                <div style="float:left;">
209                <h2>3.Stacked Bars</h2>
210                <div id="stackedBars" class="bars"></div>
211                <div id="stackedBarsLegend"></div>
212                </div>
213                <div style="float:left;">
214                <h2>4.Stacked Area</h2>
215                <div id="stackedArea" class="bars"></div>
216                <div id="stackedAreaLegend"></div>
217                </div>
218                </div>
219               
220               
221                <div style="clear:both;">
222                <div style="float:left;">
223                <h2>5.Columns</h2>
224                <div id="columns" class="columns"></div>
225                <div id="columnsLegend"></div>
226                </div>
227                <div style="float:left;">
228                <h2>6.Clustered Columns</h2>
229                <div id="clusteredColumns" class="columns"></div>
230                <div id="clusteredColumnsLegend"></div>
231                </div>
232                <div style="float:left;">
233                <h2>7.Stacked Columns</h2>
234                <div id="stackedColumns" class="columns"></div>
235                <div id="stackedColumnsLegend"></div>
236                </div>
237                <div style="float:left;">
238                <h2>8.Lines&Columns</h2>
239                <div id="linesColumns" class="columns"></div>
240                <div id="linesColumnsLegend"></div>
241                </div>
242                </div>
243               
244                <div style="clear:both;">
245                <div style="float:left;">
246                <h2>9.Pie</h2>
247                <div id="pie" class="pie" style="float:left;"></div>
248                <div style="float:left;">
249                <div id="pieLegend"></div>
250                </div>
251                </div>
252                <div style="float:left;margin-left:40px">
253                <h2>10.Bubble</h2>
254                <div id="bubble" class="bubble" style="float:left;"></div>
255                <div style="float:left;">
256                <div id="bubbleLegend"></div>
257                </div>
258                </div>
259                </div>
260
261    </body>
262</html>
Note: See TracBrowser for help on using the repository browser.