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.
246 lines (226 loc) • 7.8 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Chart 2D: dynamics</title>
<style type="text/css">
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/tests/css/dijitTests.css";
@import "../../../../dijit/themes/claro/claro.css";
.dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px}
.dojoxLegendText {vertical-align: text-top; padding-right: 10px}
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: false, async: true"></script>
<script type="text/javascript">
require([
"dojo/parser",
"dijit/registry",
"dojox/lang/functional/sequence",
"dojox/charting/Chart",
"dojox/charting/themes/CubanShirts",
"dojox/charting/widget/Legend",
"dojox/charting/axis2d/Log",
"dojox/charting/plot2d/Grid",
// Used indirectly/by parser
"dijit/form/Button",
"dijit/form/CheckBox",
"dijit/form/ComboBox",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/Columns",
"dojox/charting/plot2d/ClusteredColumns",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/plot2d/Areas",
"dojox/charting/plot2d/StackedAreas",
"dojo/domReady!"
], function(parser, registry, dlfs, Chart, CubanShirts, Legend, LogAxis, GridPlot){
parser.parse();
var chart, legend, size = 10, magnitude = 30;
var getData = function(){
var data = new Array(size);
for(var i = 0; i < size; ++i){
data[i] = Math.random() * magnitude;
}
return data;
};
var getZeroes = function(){
return dlfs.repeat(size, "-> 0", 0);
};
var makeObjects = function(){
chart = new Chart("test");
chart.setTheme(CubanShirts);
if(registry.byId("hAxis").get("checked")){
chart.addAxis("x", {natural: true, includeZero: true, fixUpper: "minor"});
}
if(registry.byId("vAxis").get("checked")){
chart.addAxis("y", {vertical: true, type: LogAxis});
}
chart.addPlot("default", {type: registry.byId("plot").get("value"), gap: 2});
if(registry.byId("grid").get("checked")){
chart.addPlot("grid", {type: GridPlot, hMinorLines: true, vMinorLines: true});
}
for(var i = 1; i <= 5; ++i){
if(registry.byId("s" + i).get("checked")){
chart.addSeries("Series " + i, getData(), {stroke: {color: "black", width: 1}});
}
}
if(registry.byId("s6").get("checked")){
chart.addSeries("Series 6", getZeroes(), {stroke: {color: "black", width: 1}});
}
chart.render();
legend = new Legend({chart: chart}, "legend");
};
dojo.addOnLoad(makeObjects);
changePlot = function(){
var type = registry.byId("plot").get("value");
chart.addPlot("default", {type: type, gap: 2});
chart.render();
legend.refresh();
};
changeGrid = function(){
if(registry.byId("grid").get("checked")){
chart.addPlot("grid", {type: GridPlot, hMinorLines: true, vMinorLines: true});
}else{
chart.removePlot("grid");
}
chart.render();
};
changeX = function(){
if(registry.byId("hAxis").get("checked")){
chart.addAxis("x", {natural: true, includeZero: true, fixUpper: "minor"});
}else{
chart.removeAxis("x");
}
chart.render();
};
changeY = function(){
if(registry.byId("vAxis").get("checked")){
chart.addAxis("y", {vertical: true, type: LogAxis});
}else{
chart.removeAxis("y");
}
chart.render();
};
changeSeries = function(n){
if(n == 6){
// special case
if(registry.byId("s6").get("checked")){
chart.addSeries("Series 6", getZeroes(), {stroke: {color: "black", width: 1}});
}else{
chart.removeSeries("Series 6");
}
}else{
if(registry.byId("s" + n).get("checked")){
chart.addSeries("Series " + n, getData(), {stroke: {color: "black", width: 1}});
registry.byId("sb" + n).get("disabled", false);
}else{
chart.removeSeries("Series " + n);
registry.byId("sb" + n).get("disabled", true);
}
}
chart.render();
legend.refresh();
};
addSeries = function(n){
chart.addSeries("Series " + n, getData(), {stroke: {color: "black", width: 1}});
chart.render();
legend.refresh();
};
});
</script>
</head>
<body class="claro">
<h1>Chart 2D: dynamics</h1>
<button id="reset1" type="reset" data-dojo-type="dijit/form/Button">Reset with no onClick handler should reset</button>
<table>
<tr>
<td>Plot:</td>
<td>
<select data-dojo-type="dijit/form/ComboBox" id="plot" onChange="changePlot()">
<option value="Columns">Columns</option>
<option value="ClusteredColumns">ClusteredColumns</option>
<option value="StackedColumns">StackedColumns</option>
<option value="Areas">Areas</option>
<option value="StackedAreas">StackedAreas</option>
</select>
</td>
</tr>
<tr>
<td>Grid:</td>
<td>
<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="grid" onChange="changeGrid()">
<label for="grid">include</label>
</td>
</tr>
<tr>
<td>X axis:</td>
<td>
<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="hAxis" onChange="changeX()">
<label for="hAxis">include</label>
</td>
</tr>
<tr>
<td>Y axis:</td>
<td>
<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="vAxis" onChange="changeY()">
<label for="vAxis">include</label>
</td>
</tr>
<tr>
<td>Series 1:</td>
<td>
<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="s1" onChange="changeSeries(1)">
<label for="s1">include</label>
<button data-dojo-type="dijit/form/Button" id="sb1" onClick="addSeries(1)">Randomize</button>
</td>
</tr>
<tr>
<td>Series 2:</td>
<td>
<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="s2" onChange="changeSeries(2)">
<label for="s2">include</label>
<button data-dojo-type="dijit/form/Button" id="sb2" onClick="addSeries(2)">Randomize</button>
</td>
</tr>
<tr>
<td>Series 3:</td>
<td>
<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="s3" onChange="changeSeries(3)">
<label for="s3">include</label>
<button data-dojo-type="dijit/form/Button" id="sb3" onClick="addSeries(3)">Randomize</button>
</td>
</tr>
<tr>
<td>Series 4:</td>
<td>
<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="s4" onChange="changeSeries(4)">
<label for="s4">include</label>
<button data-dojo-type="dijit/form/Button" id="sb4" onClick="addSeries(4)">Randomize</button>
</td>
</tr>
<tr>
<td>Series 5:</td>
<td>
<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="true" id="s5" onChange="changeSeries(5)">
<label for="s5">include</label>
<button data-dojo-type="dijit/form/Button" id="sb5" onClick="addSeries(5)">Randomize</button>
</td>
</tr>
<tr>
<td>Series 6:</td>
<td>
<input type="checkbox" data-dojo-type="dijit/form/CheckBox" checked="false" id="s6" onChange="changeSeries(6)">
<label for="s6">include</label>
this series contains all 0 values
</td>
</tr>
</table>
<div id="test" style="width: 600px; height: 400px;"></div>
<div id="legend"></div>
</body>
</html>