229 lines
7.4 KiB
HTML
229 lines
7.4 KiB
HTML
<!--[if IE 7]>
|
|
<!DOCTYPE>
|
|
<html lang="en">
|
|
<head>
|
|
<![endif]-->
|
|
<!--[if IE 8]>
|
|
<!DOCTYPE>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
|
|
<![endif]-->
|
|
<![if gte IE 9]>
|
|
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<![endif]>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Chart 2D: fireEvent test</title>
|
|
<style type="text/css">
|
|
@import "../../../dojo/resources/dojo.css";
|
|
@import "../../../dijit/tests/css/dijitTests.css";
|
|
@import "../../../dijit/themes/tundra/tundra.css";
|
|
|
|
.dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px}
|
|
.dojoxLegendText {vertical-align: text-top; padding-right: 10px}
|
|
|
|
.events {font-size: 11pt;}
|
|
.events th, .events td {padding: 0.25em 1em;}
|
|
.events th {font-weight: bold;}
|
|
</style>
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
|
|
<script type="text/javascript">
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dijit.form.Select");
|
|
dojo.require("dijit.form.NumberSpinner");
|
|
|
|
dojo.require("dojox.charting.Chart");
|
|
dojo.require("dojox.charting.axis2d.Default");
|
|
dojo.require("dojox.charting.plot2d.Columns");
|
|
dojo.require("dojox.charting.plot2d.ClusteredColumns");
|
|
dojo.require("dojox.charting.plot2d.StackedColumns");
|
|
dojo.require("dojox.charting.plot2d.Bars");
|
|
dojo.require("dojox.charting.plot2d.ClusteredBars");
|
|
dojo.require("dojox.charting.plot2d.StackedBars");
|
|
dojo.require("dojox.charting.plot2d.Lines");
|
|
dojo.require("dojox.charting.plot2d.StackedAreas");
|
|
dojo.require("dojox.charting.plot2d.Pie");
|
|
dojo.require("dojox.charting.plot2d.Grid");
|
|
dojo.require("dojox.charting.themes.CubanShirts");
|
|
dojo.require("dojox.charting.widget.Legend");
|
|
|
|
dojo.require("dojox.charting.action2d.Base");
|
|
dojo.require("dojox.charting.action2d.Highlight");
|
|
dojo.require("dojox.charting.action2d.Magnify");
|
|
dojo.require("dojox.charting.action2d.MoveSlice");
|
|
dojo.require("dojox.charting.action2d.Shake");
|
|
dojo.require("dojox.charting.action2d.Tooltip");
|
|
|
|
dojo.require("dojox.lang.functional.sequence");
|
|
|
|
dojo.require("dojo.parser");
|
|
|
|
var chart, legend, size = 10, magnitude = 30, none = "<em>none</em>";
|
|
|
|
|
|
var Listener = dojo.declare(dojox.charting.action2d.Base, {
|
|
constructor: function(chart, plot, tr){
|
|
this.tr = dojo.byId(tr);
|
|
this.connect();
|
|
},
|
|
|
|
process: function(o){
|
|
var t = [
|
|
o.plot ? o.plot.name : none,
|
|
o.type === "onindirect" ? o.type + " (" + (o.originalPlot ? o.originalPlot.name : none) + " : " + o.originalEvent + ")" : o.type,
|
|
o.event ? "object" : none,
|
|
o.hAxis || none,
|
|
o.vAxis || none,
|
|
o.run ? o.run.name : none,
|
|
"index" in o ? o.index : none,
|
|
"x" in o ? o.x : none,
|
|
"y" in o ? o.y : none
|
|
];
|
|
dojo.query("td", this.tr).forEach(function(td, i){
|
|
td.innerHTML = t[i] + "";
|
|
});
|
|
}
|
|
});
|
|
|
|
function getData(){
|
|
var data = new Array(size);
|
|
for(var i = 0; i < size; ++i){
|
|
data[i] = Math.random() * magnitude;
|
|
}
|
|
return data;
|
|
};
|
|
|
|
function getZeroes(){
|
|
return dojox.lang.functional.repeat(size, "-> 0", 0);
|
|
};
|
|
|
|
var actions = [];
|
|
|
|
function addActions(chart){
|
|
dojox.lang.functional.forEach(actions, ".disconnect()");
|
|
actions = [
|
|
new dojox.charting.action2d.Highlight(chart),
|
|
new dojox.charting.action2d.Magnify(chart),
|
|
new dojox.charting.action2d.MoveSlice(chart),
|
|
new dojox.charting.action2d.Tooltip(chart),
|
|
new Listener(chart, "default", "def")
|
|
];
|
|
}
|
|
|
|
function makeObjects(){
|
|
chart = new dojox.charting.Chart("test");
|
|
chart.setTheme(dojox.charting.themes.CubanShirts);
|
|
|
|
chart.addAxis("x", {natural: true, includeZero: true, fixUpper: "minor"});
|
|
|
|
chart.addAxis("y", {vertical: true, natural: true, includeZero: true, fixUpper: "minor"});
|
|
|
|
chart.addPlot("default", {type: dijit.byId("plot").get("value"), gap: 2});
|
|
addActions(chart);
|
|
|
|
chart.addPlot("empty"); // just to see indirect events
|
|
new Listener(chart, "empty", "emp");
|
|
|
|
|
|
chart.addPlot("grid", {type: "Grid", hMinorLines: true, vMinorLines: true});
|
|
|
|
for(var i = 1; i <= 5; ++i){
|
|
chart.addSeries("Series " + i, getData(), {stroke: {color: "black", width: 1}});
|
|
}
|
|
|
|
chart.render();
|
|
|
|
legend = new dojox.charting.widget.Legend({chart: chart}, "legend");
|
|
};
|
|
|
|
dojo.addOnLoad(makeObjects);
|
|
|
|
changePlot = function(){
|
|
var type = dijit.byId("plot").get("value"),
|
|
opts = {type: type, gap: 2};
|
|
switch(type){
|
|
case "Lines":
|
|
case "StackedAreas":
|
|
opts.markers = true;
|
|
break;
|
|
case "Pie":
|
|
opts.radius = 150;
|
|
break;
|
|
}
|
|
chart.addPlot("default", opts);
|
|
addActions(chart);
|
|
chart.render();
|
|
legend.refresh();
|
|
};
|
|
|
|
fireEvent = function(type){
|
|
chart.fireEvent(
|
|
dijit.byId("series").get("value"),
|
|
type,
|
|
dijit.byId("index").get("value")
|
|
);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body class="tundra">
|
|
|
|
<h1>Chart 2D: fireEvent test</h1>
|
|
|
|
<p>
|
|
<span>Plot: </span>
|
|
<select dojoType="dijit.form.Select" id="plot" onChange="changePlot()">
|
|
<option value="Columns">Columns</option>
|
|
<option value="ClusteredColumns">ClusteredColumns</option>
|
|
<option value="StackedColumns">StackedColumns</option>
|
|
<option value="Bars">Bars</option>
|
|
<option value="ClusteredBars">ClusteredBars</option>
|
|
<option value="StackedBars">StackedBars</option>
|
|
<option value="Lines">Lines</option>
|
|
<option value="StackedAreas">StackedAreas</option>
|
|
<option value="Pie">Pie</option>
|
|
</select>
|
|
</p>
|
|
|
|
<table class="events" border="1">
|
|
<thead>
|
|
<tr>
|
|
<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>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr id="def">
|
|
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
|
|
</tr>
|
|
<tr id="emp">
|
|
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>
|
|
<span>Fire event: </span>
|
|
<select dojoType="dijit.form.Select" id="series">
|
|
<option value="Series 1">Series 1</option>
|
|
<option value="Series 2">Series 2</option>
|
|
<option value="Series 3">Series 3</option>
|
|
<option value="Series 4">Series 4</option>
|
|
<option value="Series 5">Series 5</option>
|
|
</select>
|
|
<span> on index: </span>
|
|
<input dojoType="dijit.form.NumberSpinner" id="index" value="0" constraints="{min: 0, max: 9, fractional: false}" style="width: 5em;">
|
|
<button dojoType="dijit.form.Button" onClick="fireEvent('onmouseover')">onmouseover</button>
|
|
<button dojoType="dijit.form.Button" onClick="fireEvent('onmouseout')">onmouseout</button>
|
|
<button dojoType="dijit.form.Button" onClick="fireEvent('onclick')">onclick</button>
|
|
</p>
|
|
|
|
<p><em>Warning: the pie chart shows only the last series (Series 5).</em></p>
|
|
|
|
<div id="test" style="width: 600px; height: 400px;"></div>
|
|
<div id="legend"></div>
|
|
|
|
</body>
|
|
</html>
|