You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
228 lines
7.2 KiB
228 lines
7.2 KiB
<!--[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" 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>
|
|
|