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.
174 lines (162 loc) • 5.23 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>DataChart Test</title>
<link rel="stylesheet" href="../../../dijit/themes/claro/document.css"/>
<link rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="../../../dijit/tests/css/dijitTests.css"/>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: false, parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.charting.DataChart");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.NumberSpinner");
var store = new dojo.data.ItemFileWriteStore({ url:"stock.json" });
makeCharts = function(){
var lines = new dojox.charting.DataChart("lines", {
displayRange:7,
xaxis:{labels:["0", "A","B","C","D","E","F","G","H","I","J"]},
type: dojox.charting.plot2d.Lines
});
lines.setStore(store, {symbol:"*"}, "historicPrice");
var linesC = new dojox.charting.DataChart("linesC", {
displayRange:6,
xaxis:{labelFunc:"seriesLabels"},
yaxis:{minorLabels:true},
type: dojox.charting.plot2d.Lines,
comparative:true
});
linesC.setStore(store, {symbol:"*"}, "price");
var cols = new dojox.charting.DataChart("cols", {
displayRange:8,
scroll:false,
xaxis:{labelFunc:"seriesLabels"},
type: dojox.charting.plot2d.Columns
});
cols.setStore(store, {symbol:"*"}, "price");
var bars = new dojox.charting.DataChart("bars", {
displayRange:10,
yaxis:{max:8,min:1, majorTickStep:1, labelFunc:"seriesLabels", maxLabelSize:30},
scroll:false,
type: dojox.charting.plot2d.Bars
});
bars.setStore(store, {symbol:"*"}, "price");
var pie = new dojox.charting.DataChart("pie", {
type: dojox.charting.plot2d.Pie,
comparative:true
});
pie.setStore(store, {symbol:"*"}, "price");
};
makeSpinners = function(items){
dojo.forEach(items, function(m){
var nm = store.getLabel(m);
var num = store.getValue(m, "price");
console.log(nm, num);
var w = new dijit.form.NumberSpinner({
onChange:function(val){
val = val===0 ? 0.01 : val; //HACKS the no label-when-zero bug
console.log("OC:", nm, val);
store.setValue(m, "price", val);
//store.setValues(m, "historicPrice", store.getValues("historicPrice").push(val));
console.log("OC:", nm, val);
},
value:num,
constraints:{min:0, max:10,places:2},
className:"myField"
});
w.startup();
dojo.place('<label>'+nm+'</label>', dojo.byId("spinners"), "last")
dojo.place(w.domNode, "spinners", "last")
});
}
dojo.addOnLoad(function(){
makeCharts();
console.log(store.getFeatures())
store.fetch({query:{symbol:"*"}, onComplete: makeSpinners, onError:function(err){console.error(err)}})
});
handleSpinner = function(){
console.log(arguments)
}
</script>
<style>
#charts{
clear:both;
margin-bottom:50px;
}
#charts span{
padding:0 10px;
display:block;
font-size:10px;
}
.lines, .linesC, .cols, .bars, .pie{
float:left;
border:1px solid #ccc;
}
.lines, #lines, .linesC, #linesC, .cols, #cols, .bars, #bars, .pie, #pie{
width:200px;
height:200px;
}
.lines, .linesC, .cols, .bars, .pie{
height:250px;
margin:3px;
}
.cols, #cols{
width:280px;
}
.linesC, #linesC{
width:260px;
}
.lines, #lines,.bars, #bars{
width:260px;
}
</style>
</head>
<body class="claro">
<h1>DataChart</h1>
<p>
DataChart extends dojox.charting.Chart2D and allows for a simple connection to a data store. When adding a store to a chart, it is necessary to also supply which
item property you wish charted. There are two types of properties supported: numbers and arrays of numbers (bubble charts take an array of objects and are not currently
supported). If the property is an array, a segment of the array is taken from the end that fits in the display range of the chart. Animated charts are also possible.
</p>
<p>
Use the spinner fields at the bottom to change the data. The charts listen to store changes an update automatically.
</p>
<div id="charts">
<div class="lines">
<div id="lines"></div>
<span>This line chart uses a different data field than the rest, which is an array. This chart will not upate using the spinners.</span>
</div>
<div class="linesC">
<div id="linesC"></div>
<span>This chart uses <em>comparitive</em> to compare the price of each item. Without compartive, the items would each be a separate series and not be connected. Will update.</span>
</div>
<div class="cols">
<div id="cols"></div>
<span>Each column in this chart is a separate series. Will update. </span>
</div>
<div class="bars">
<div id="bars"></div>
<span>Each bar in this chart is a separate series. Will update.</span>
</div>
<div class="pie">
<div id="pie"></div>
<span>This chart also uses <em>comparitive</em> to create one series from several items. Will update.</span>
</div>
</div>
<div id="spinners"></div>
</body>
</html>