You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
7.0 KiB
196 lines
7.0 KiB
<!--[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>DataSeries 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"/> |
|
|
|
<style> |
|
.dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px;} |
|
.dojoxLegendText {vertical-align: text-top; padding-right: 10px} |
|
|
|
#charts { |
|
clear: both; |
|
margin-bottom: 50px; |
|
} |
|
.chart-area { |
|
float: left; |
|
border: 1px solid #ccc; |
|
width: 450px; |
|
height: 350px; |
|
margin: 3px; |
|
} |
|
.chart { |
|
width: 450px; |
|
height: 300px; |
|
} |
|
</style> |
|
|
|
<script src="../../../dojo/dojo.js" data-dojo-config="isDebug: false, parseOnLoad: true"></script> |
|
|
|
<script> |
|
|
|
dojo.require("dojox.charting.Chart"); |
|
dojo.require("dojox.charting.DataSeries"); |
|
dojo.require("dojox.charting.themes.ThreeD"); |
|
dojo.require("dojox.charting.widget.Legend"); |
|
|
|
dojo.require("dojox.charting.axis2d.Default"); |
|
|
|
dojo.require("dojox.charting.plot2d.Markers"); |
|
dojo.require("dojox.charting.plot2d.Columns"); |
|
dojo.require("dojox.charting.plot2d.Pie"); |
|
|
|
dojo.require("dojox.charting.action2d.Tooltip"); |
|
dojo.require("dojox.charting.action2d.MoveSlice"); |
|
dojo.require("dojox.charting.action2d.Magnify"); |
|
dojo.require("dojox.charting.action2d.Shake"); |
|
|
|
dojo.require("dojo.data.ItemFileWriteStore"); |
|
|
|
dojo.require("dijit.form.NumberSpinner"); |
|
|
|
var store = new dojo.data.ItemFileWriteStore({url: "stock.json"}); |
|
|
|
function addLegend(chart, node){ |
|
var legend = new dojox.charting.widget.Legend({chart: chart}, node); |
|
dojo.connect(chart, "render", legend, "refresh"); |
|
} |
|
|
|
var templates = { |
|
low: "<strong>{0}</strong>: <strong>low {1}</strong> – {2} – {3}", |
|
price: "<strong>{0}</strong>: {1} – <strong>price {2}</strong> – {3}", |
|
high: "<strong>{0}</strong>: {1} – {2} – <strong>high {3}</strong>" |
|
}; |
|
|
|
function valTrans(value, store, item){ |
|
return { |
|
y: store.getValue(item, value), |
|
tooltip: dojo.replace( |
|
templates[value], |
|
dojo.map(["symbol", "low", "price", "high"], function(field){ |
|
return store.getValue(item, field); |
|
}) |
|
) |
|
}; |
|
} |
|
|
|
var chartL, chartC, chartP; |
|
|
|
makeCharts = function(){ |
|
chartL = new dojox.charting.Chart("lines"). |
|
setTheme(dojox.charting.themes.ThreeD). |
|
addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, majorTickStep: 5}). |
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}). |
|
addPlot("default", {type: dojox.charting.plot2d.Markers}). |
|
addSeries("Price", new dojox.charting.DataSeries( |
|
store, {query: {symbol: "*"}}, "price")). |
|
render(); |
|
addLegend(chartL, "lines_legend"); |
|
new dojox.charting.action2d.Magnify(chartL); |
|
new dojox.charting.action2d.Tooltip(chartL); |
|
|
|
chartC = new dojox.charting.Chart("cols"). |
|
setTheme(dojox.charting.themes.ThreeD). |
|
addAxis("x", {natural: true}). |
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}). |
|
addPlot("default", {type: dojox.charting.plot2d.Columns}). |
|
addSeries("Low", new dojox.charting.DataSeries( |
|
store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "low"))). |
|
addSeries("Price", new dojox.charting.DataSeries( |
|
store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "price"))). |
|
addSeries("High", new dojox.charting.DataSeries( |
|
store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "high"))). |
|
render(); |
|
addLegend(chartC, "cols_legend"); |
|
new dojox.charting.action2d.Shake(chartC, "default", {shiftY: 0}); |
|
new dojox.charting.action2d.Tooltip(chartC); |
|
|
|
chartP = new dojox.charting.Chart("pie"). |
|
setTheme(dojox.charting.themes.ThreeD). |
|
addPlot("default", {type: dojox.charting.plot2d.Pie, radius: 125}). |
|
addSeries("Price", new dojox.charting.DataSeries( |
|
store, {query: {symbol: "*"}}, {y: "price", text: "symbol", tooltip: "price"})). |
|
render(); |
|
addLegend(chartP, "pie_legend"); |
|
new dojox.charting.action2d.Tooltip(chartP); |
|
new dojox.charting.action2d.MoveSlice(chartP); |
|
}; |
|
|
|
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", |
|
intermediateChanges: true |
|
}); |
|
dojo.place('<label>'+nm+'</label>', dojo.byId("spinners"), "last") |
|
dojo.place(w.domNode, "spinners", "last") |
|
}); |
|
|
|
var labels = dojo.map(items, function(item, index){ |
|
return { |
|
value: index + 1, |
|
text: store.getLabel(item) |
|
} |
|
}); |
|
chartC.addAxis("x", {natural: true, labels: labels}).render(); |
|
} |
|
|
|
dojo.addOnLoad(function(){ |
|
makeCharts(); |
|
console.log(store.getFeatures()) |
|
store.fetch({query:{symbol:"*"}, onComplete: makeSpinners, onError:function(err){console.error(err)}}) |
|
}); |
|
</script> |
|
|
|
</head> |
|
|
|
<body class="claro"> |
|
<h1>DataSeries Test</h1> |
|
<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="chart-area"> |
|
<div id="lines_legend"></div> |
|
<div id="lines" class="chart"></div> |
|
</div> |
|
<div class="chart-area"> |
|
<div id="cols_legend"></div> |
|
<div id="cols" class="chart"></div> |
|
</div> |
|
<div class="chart-area"> |
|
<div id="pie_legend"></div> |
|
<div id="pie" class="chart"></div> |
|
</div> |
|
</div> |
|
<div id="spinners"></div> |
|
</body> |
|
</html>
|
|
|