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.
111 lines (101 loc) • 3.85 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 plot 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"></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("Plot 1 / Series A", [{x: 3, y: 3, size: 4}], {plot: "Plot 1"}).
addPlot("Plot 2", {type: "Bubble"}).
addSeries("Plot 2 / Series B", [{x: 5, y: 5, size: 4}], {plot: "Plot 2"}).
//addSeries("Plot 2 / Series B1", [{x: 5, y: 6, size: 3}], {plot: "Plot 2"}).
//addSeries("Plot 2 / Series B2", [{x: 4, y: 4, size: 3}], {plot: "Plot 2"}).
//addSeries("Plot 2 / Series B3", [{x: 6, y: 4, size: 3}], {plot: "Plot 2"}).
addPlot("Plot 3", {type: "Bubble"}).
addSeries("Plot 3 / Series C", [{x: 7, y: 7, size: 4}], {plot: "Plot 3"}).
render();
var legend1 = new dojox.charting.widget.Legend({chart: chart1, horizontal: false}, "legend1");
dojo.connect(chart1, "render", legend1, "refresh");
var plots = new dojo.dnd.Source("dnd1"), noUpdate = false;
plots.insertNodes(false, chart1.getPlotOrder());
dojo.connect(plots, "onDropInternal", function(){
var newOrder = this.getAllNodes().map(function(node){
return node.innerHTML;
})
chart1.setPlotOrder(newOrder);
noUpdate = true;
chart1.render();
noUpdate = false;
});
dojo.connect(chart1, "render", function(){
if(!noUpdate){
plots.getAllNodes().orphan();
plots.sync();
plots.insertNodes(false, chart1.getPlotOrder());
}
});
dojo.forEach(["p1", "p2", "p3"], function(id, i){
dojo.query("button", id).forEach(function(btn){
if(btn.innerHTML == "Front"){
dojo.connect(btn, "onclick", function(){
chart1.movePlotToFront("Plot " + (i + 1));
chart1.render();
});
}else{
dojo.connect(btn, "onclick", function(){
chart1.movePlotToBack("Plot " + (i + 1));
chart1.render();
});
}
});
});
};
dojo.ready(makeObjects);
</script>
</head>
<body>
<h1>Testing plot 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="p1">Plot 1: <button>Front</button> <button>Back</button></p>
<p id="p2">Plot 2: <button>Front</button> <button>Back</button></p>
<p id="p3">Plot 3: <button>Front</button> <button>Back</button></p>
<p>Plots (rearrange using drag-and-drop):</p>
<div id="dnd1" class="container"></div>
<p>That's all Folks!</p>
</body>
</html>