New file |
0,0 → 1,80 |
<html> |
<head> |
<title>Chart 2D</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<style type="text/css"> |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
</style> |
<!-- |
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend |
<script type="text/javascript" src="Silverlight.js"></script> |
--> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> |
<script type="text/javascript" src="../../lang/functional.js"></script> |
<script type="text/javascript" src="../Theme.js"></script> |
<script type="text/javascript" src="../scaler.js"></script> |
<script type="text/javascript" src="../Chart2D.js"></script> |
<script type="text/javascript"> |
|
dojo.require("dojox.charting.Chart2D"); |
dojo.require("dojox.charting.themes.PlotKit.orange"); |
|
var chart, limit = 10, magnitude = 30; |
|
var randomValue = function(){ |
return Math.random() * magnitude; |
}; |
|
var makeSeries = function(len){ |
var s = []; |
do{ |
s.push(randomValue()); |
}while(s.length < len); |
return s; |
}; |
|
var seriesA = makeSeries(limit), |
seriesB = makeSeries(limit), |
seriesC = makeSeries(limit); |
|
var makeObjects = function(){ |
chart = new dojox.charting.Chart2D("test"); |
chart.setTheme(dojox.charting.themes.PlotKit.orange); |
chart.addAxis("x", {fixLower: "minor", natural: true, min: 1, max: limit}); |
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.render(); |
setInterval("updateTest()", 200); |
}; |
|
var updateTest = function(){ |
seriesA.shift(); |
seriesA.push(randomValue()); |
chart.updateSeries("Series A", seriesA); |
|
seriesB.shift(); |
seriesB.push(randomValue()); |
chart.updateSeries("Series B", seriesB); |
|
seriesC.shift(); |
seriesC.push(randomValue()); |
chart.updateSeries("Series C", seriesC); |
|
chart.render(); |
}; |
|
dojo.addOnLoad(makeObjects); |
|
</script> |
</head> |
<body> |
<h1>Chart 2D Updating Data</h1> |
<p>Areas, orange 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> |