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.
108 lines (94 loc) • 2.65 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]>
<title>Chart 2D</title>
<style type="text/css">
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug: true, has:{'dojo-bidi': true}"></script>
<script type="text/javascript">
dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Areas");
dojo.require("dojox.charting.plot2d.Grid");
dojo.require("dojox.charting.themes.PlotKit.orange");
dojo.require("dojox.charting.themes.Tufte");
var chart, limit = 10, magnitude = 30, counter = [0, 0, 0];
var randomValue = function(nCounter){
return {x: ++counter[nCounter], y: Math.random() * magnitude};
};
var makeSeries = function(len, nCounter){
var s = [];
do{
s.push(randomValue(nCounter));
}while(s.length < len);
return s;
};
var seriesA = makeSeries(limit, 0),
seriesB = makeSeries(limit, 1),
seriesC = makeSeries(limit, 2);
var makeObjects = function(){
chart = new dojox.charting.Chart("test");
chart.setTheme(dojox.charting.themes.Tufte);
chart.addAxis("x", {
fixLower: "minor",
natural: true
});
chart.addAxis("y", {
vertical: true,
min: 0,
max: 30,
majorTickStep: 5,
minorTickStep: 1
});
chart.addPlot("default", {type: "Areas"});
chart.addSeries("Series A", seriesA);
chart.addSeries("Series B", seriesB);
chart.addSeries("Series C", seriesC);
chart.addPlot("grid", {
type: "Grid", hMinorLines: true
});
chart.setDir("rtl");
chart.render();
setInterval(function(){updateTest();}, 500);
};
var updateTest = function(){
seriesA.shift();
seriesA.push(randomValue(0));
chart.updateSeries("Series A", seriesA);
seriesB.shift();
seriesB.push(randomValue(1));
chart.updateSeries("Series B", seriesB);
seriesC.shift();
seriesC.push(randomValue(2));
chart.updateSeries("Series C", seriesC);
chart.setDir("rtl");
chart.render();
};
dojo.addOnLoad(makeObjects);
</script>
</head>
<body>
<h1>Chart 2D Updating Data</h1>
<p>
Areas, grey theme, axes, grid. Very crude example to show a chart
with updating values.
</p>
<div id="test" style="width: 400px; height: 400px;"></div>
</body>
</html>