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

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

Added Dojo 1.9.3 release.
File size: 7.2 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: fireEvent test</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
27    .events {font-size: 11pt;}
28    .events th, .events td {padding: 0.25em 1em;}
29    .events th {font-weight: bold;}
30</style>
31<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
32<script type="text/javascript">
33dojo.require("dijit.form.Button");
34dojo.require("dijit.form.Select");
35dojo.require("dijit.form.NumberSpinner");
36
37dojo.require("dojox.charting.Chart");
38dojo.require("dojox.charting.axis2d.Default");
39dojo.require("dojox.charting.plot2d.Columns");
40dojo.require("dojox.charting.plot2d.ClusteredColumns");
41dojo.require("dojox.charting.plot2d.StackedColumns");
42dojo.require("dojox.charting.plot2d.Bars");
43dojo.require("dojox.charting.plot2d.ClusteredBars");
44dojo.require("dojox.charting.plot2d.StackedBars");
45dojo.require("dojox.charting.plot2d.Lines");
46dojo.require("dojox.charting.plot2d.StackedAreas");
47dojo.require("dojox.charting.plot2d.Pie");
48dojo.require("dojox.charting.plot2d.Grid");
49dojo.require("dojox.charting.themes.CubanShirts");
50dojo.require("dojox.charting.widget.Legend");
51
52dojo.require("dojox.charting.action2d.Base");
53dojo.require("dojox.charting.action2d.Highlight");
54dojo.require("dojox.charting.action2d.Magnify");
55dojo.require("dojox.charting.action2d.MoveSlice");
56dojo.require("dojox.charting.action2d.Shake");
57dojo.require("dojox.charting.action2d.Tooltip");
58
59dojo.require("dojox.lang.functional.sequence");
60
61dojo.require("dojo.parser");
62
63var chart, legend, size = 10, magnitude = 30, none = "<em>none</em>";
64
65
66var Listener = dojo.declare(dojox.charting.action2d.Base, {
67    constructor: function(chart, plot, tr){
68        this.tr = dojo.byId(tr);
69        this.connect();
70    },
71
72    process: function(o){
73        var t = [
74                o.plot ? o.plot.name : none,
75                o.type === "onindirect" ? o.type + " (" + (o.originalPlot ? o.originalPlot.name : none) + " : " + o.originalEvent + ")" : o.type,
76                o.event ? "object" : none,
77                o.hAxis || none,
78                o.vAxis || none,
79                o.run ? o.run.name : none,
80                "index" in o ? o.index : none,
81                "x" in o ? o.x : none,
82                "y" in o ? o.y : none
83            ];
84        dojo.query("td", this.tr).forEach(function(td, i){
85            td.innerHTML = t[i] + "";
86        });
87    }
88});
89
90function getData(){
91        var data = new Array(size);
92        for(var i = 0; i < size; ++i){
93                data[i] = Math.random() * magnitude;
94        }
95        return data;
96};
97
98function getZeroes(){
99        return dojox.lang.functional.repeat(size, "-> 0", 0);
100};
101
102var actions = [];
103
104function addActions(chart){
105        dojox.lang.functional.forEach(actions, ".disconnect()");
106        actions = [
107                new dojox.charting.action2d.Highlight(chart),
108                new dojox.charting.action2d.Magnify(chart),
109                new dojox.charting.action2d.MoveSlice(chart),
110                new dojox.charting.action2d.Tooltip(chart),
111                new Listener(chart, "default", "def")
112        ];
113}
114
115function makeObjects(){
116        chart = new dojox.charting.Chart("test");
117        chart.setTheme(dojox.charting.themes.CubanShirts);
118
119        chart.addAxis("x", {natural: true, includeZero: true, fixUpper: "minor"});
120
121        chart.addAxis("y", {vertical: true, natural: true, includeZero: true, fixUpper: "minor"});
122
123        chart.addPlot("default", {type: dijit.byId("plot").get("value"), gap: 2});
124    addActions(chart);
125
126        chart.addPlot("empty"); // just to see indirect events
127    new Listener(chart, "empty", "emp");
128
129
130        chart.addPlot("grid", {type: "Grid", hMinorLines: true, vMinorLines: true});
131
132        for(var i = 1; i <= 5; ++i){
133                chart.addSeries("Series " + i, getData(), {stroke: {color: "black", width: 1}});
134        }
135
136        chart.render();
137
138        legend = new dojox.charting.widget.Legend({chart: chart}, "legend");
139};
140
141dojo.addOnLoad(makeObjects);
142
143changePlot = function(){
144        var type = dijit.byId("plot").get("value"),
145        opts = {type: type, gap: 2};
146    switch(type){
147        case "Lines":
148        case "StackedAreas":
149            opts.markers = true;
150            break;
151        case "Pie":
152            opts.radius = 150;
153            break;
154    }
155        chart.addPlot("default", opts);
156    addActions(chart);
157        chart.render();
158        legend.refresh();
159};
160
161fireEvent = function(type){
162    chart.fireEvent(
163        dijit.byId("series").get("value"),
164        type,
165        dijit.byId("index").get("value")
166    );
167}
168
169</script>
170</head>
171<body class="tundra">
172
173<h1>Chart 2D: fireEvent test</h1>
174
175<p>
176    <span>Plot:&nbsp;</span>
177    <select dojoType="dijit.form.Select" id="plot" onChange="changePlot()">
178        <option value="Columns">Columns</option>
179        <option value="ClusteredColumns">ClusteredColumns</option>
180        <option value="StackedColumns">StackedColumns</option>
181        <option value="Bars">Bars</option>
182        <option value="ClusteredBars">ClusteredBars</option>
183        <option value="StackedBars">StackedBars</option>
184        <option value="Lines">Lines</option>
185        <option value="StackedAreas">StackedAreas</option>
186        <option value="Pie">Pie</option>
187    </select>
188</p>
189
190<table class="events" border="1">
191    <thead>
192        <tr>
193            <th>Plot</th><th>Event</th><th>Event Object</th><th>H. axis</th><th>V. axis</th><th>Series</th><th>Index</th><th>X value</th><th>Y value</th>
194        </tr>
195    </thead>
196    <tbody>
197        <tr id="def">
198            <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
199        </tr>
200        <tr id="emp">
201            <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
202        </tr>
203    </tbody>
204</table>
205
206<p>
207    <span>Fire event:&nbsp;</span>
208    <select dojoType="dijit.form.Select" id="series">
209        <option value="Series 1">Series 1</option>
210        <option value="Series 2">Series 2</option>
211        <option value="Series 3">Series 3</option>
212        <option value="Series 4">Series 4</option>
213        <option value="Series 5">Series 5</option>
214    </select>
215    <span>&nbsp;on index:&nbsp;</span>
216        <input dojoType="dijit.form.NumberSpinner" id="index" value="0" constraints="{min: 0, max: 9, fractional: false}" style="width: 5em;">
217    &nbsp;<button dojoType="dijit.form.Button" onClick="fireEvent('onmouseover')">onmouseover</button>
218    &nbsp;<button dojoType="dijit.form.Button" onClick="fireEvent('onmouseout')">onmouseout</button>
219    &nbsp;<button dojoType="dijit.form.Button" onClick="fireEvent('onclick')">onclick</button>
220</p>
221
222<p><em>Warning: the pie chart shows only the last series (Series 5).</em></p>
223
224<div id="test" style="width: 600px; height: 400px;"></div>
225<div id="legend"></div>
226
227</body>
228</html>
Note: See TracBrowser for help on using the repository browser.