dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
229 lines (193 loc) • 7.32 kB
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]>
<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" data-dojo-config="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>