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.
103 lines (95 loc) • 3.48 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>Testing series order</title>
<style type="text/css">
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dojo/resources/dnd.css";
@import "../../../../dojo/tests/dnd/dndDefault.css";
@import "../../../../dijit/tests/css/dijitTests.css";
</style>
<script src="../../../../dojo/dojo.js" data-dojo-config="isDebug: true, has:{'dojo-bidi': true}"></script>
<script>
dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Bubble");
dojo.require("dojox.charting.themes.ThreeD");
dojo.require("dojox.charting.widget.Legend");
dojo.require("dojo.dnd.Source");
makeObjects = function(){
dojo.query("button").style("disabled", true);
var chart1 = new dojox.charting.Chart("chart1").
setTheme(dojox.charting.themes.ThreeD).
addAxis("x", {min: 0, max: 10}).
addAxis("y", {vertical: true, min: 0, max: 10}).
addPlot("Plot 1", {type: "Bubble"}).
addSeries("Series A", [{x: 3, y: 3, size: 4}], {plot: "Plot 1", color: "red"}).
addSeries("Series B", [{x: 5, y: 5, size: 4}], {plot: "Plot 1", color: "green"}).
addSeries("Series C", [{x: 7, y: 7, size: 4}], {plot: "Plot 1", color: "blue"}).
setDir("rtl").
render();
var series = new dojo.dnd.Source("dnd1"), noUpdate = false;
series.insertNodes(false, chart1.getSeriesOrder("Plot 1"));
dojo.connect(series, "onDropInternal", function(){
var newOrder = this.getAllNodes().map(function(node){
return node.innerHTML;
})
chart1.setSeriesOrder(newOrder);
noUpdate = true;
chart1.render();
noUpdate = false;
});
dojo.connect(chart1, "render", function(){
if(!noUpdate){
series.getAllNodes().orphan();
series.sync();
series.insertNodes(false, chart1.getSeriesOrder("Plot 1"));
}
});
dojo.forEach(["s1", "s2", "s3"], function(id, i){
dojo.query("button", id).forEach(function(btn){
if(btn.innerHTML == "Front"){
dojo.connect(btn, "onclick", function(){
chart1.moveSeriesToFront("Series " + "ABCDEFG".charAt(i));
chart1.render();
});
}else{
dojo.connect(btn, "onclick", function(){
chart1.moveSeriesToBack("Series " + "ABCDEFG".charAt(i));
chart1.render();
});
}
});
});
};
dojo.ready(makeObjects);
</script>
</head>
<body>
<h1>Testing series order</h1>
<!--<p><button onclick="makeObjects();">Go</button></p>-->
<p>Chart:</p>
<div id="chart1" style="width: 200px; height: 200px;"></div>
<div id="legend1"></div>
<p id="s1">Series A: <button>Front</button> <button>Back</button></p>
<p id="s2">Series B: <button>Front</button> <button>Back</button></p>
<p id="s3">Series C: <button>Front</button> <button>Back</button></p>
<p>Series (rearrange using drag-and-drop):</p>
<div id="dnd1" class="container"></div>
<p>That's all Folks!</p>
</body>
</html>