git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/charting/tests/test_chart2d_updating.html

   1 <html>
   2 <head>
   3 <title>Chart 2D</title>
   4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5 <style type="text/css">
   6         @import "../../../dojo/resources/dojo.css";
   7         @import "../../../dijit/tests/css/dijitTests.css";
   8 </style>
   9 <!--
  10 The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend
  11 <script type="text/javascript" src="Silverlight.js"></script>
  12 -->
  13 <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
  14 <script type="text/javascript" src="../../lang/functional.js"></script>
  15 <script type="text/javascript" src="../Theme.js"></script>
  16 <script type="text/javascript" src="../scaler.js"></script>
  17 <script type="text/javascript" src="../Chart2D.js"></script>
  18 <script type="text/javascript">
  19
  20 dojo.require("dojox.charting.Chart2D");
  21 dojo.require("dojox.charting.themes.PlotKit.orange");
  22
  23 var chart, limit = 10, magnitude = 30;
  24
  25 var randomValue = function(){
  26         return Math.random() * magnitude;
  27 };
  28
  29 var makeSeries = function(len){
  30     var s = [];
  31     do{
  32         s.push(randomValue());
  33         }while(s.length < len);
  34     return s;
  35 };
  36
  37 var seriesA = makeSeries(limit),
  38         seriesB = makeSeries(limit),
  39         seriesC = makeSeries(limit);
  40
  41 var makeObjects = function(){
  42         chart = new dojox.charting.Chart2D("test");
  43         chart.setTheme(dojox.charting.themes.PlotKit.orange);
  44         chart.addAxis("x", {fixLower: "minor", natural: true, min: 1, max: limit});
  45         chart.addAxis("y", {vertical: true, min: 0, max: 30, majorTickStep: 5, minorTickStep: 1});
  46         chart.addPlot("default", {type: "Areas"});
  47         chart.addSeries("Series A", seriesA);
  48         chart.addSeries("Series B", seriesB);
  49         chart.addSeries("Series C", seriesC);
  50         chart.addPlot("grid", {type: "Grid", hMinorLines: true});
  51         chart.render();
  52     setInterval(function(){updateTest();}, 200);
  53 };
  54
  55 var updateTest = function(){
  56         seriesA.shift();
  57         seriesA.push(randomValue());
  58         chart.updateSeries("Series A", seriesA);
  59
  60         seriesB.shift();
  61         seriesB.push(randomValue());
  62         chart.updateSeries("Series B", seriesB);
  63
  64         seriesC.shift();
  65         seriesC.push(randomValue());
  66         chart.updateSeries("Series C", seriesC);
  67
  68         chart.render();
  69 };
  70
  71 dojo.addOnLoad(makeObjects);
  72
  73 </script>
  74 </head>
  75 <body>
  76 <h1>Chart 2D Updating Data</h1>
  77 <p>Areas, orange theme, axes, grid. Very crude example to show a chart with updating values.</p>
  78 <div id="test" style="width: 400px; height: 400px;"></div>
  79 </body>
  80 </html>