103 lines
3.4 KiB
HTML
103 lines
3.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>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" djConfig="isDebug: 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"}).
|
|
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>
|