Dojo 1.1 Charting

Peter Parente — Mon, 26 May 2008 03:22:30 +0000

Dojo has a charting module capable of rendering a few different types of graphs. Here's an example rendering of one sine and cosine period in SVG.

The code is straightforward:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Dojo 1.1 Charting Example</title>
    <script type="text/javascript" src="/scripts/dojo/dojo.js"></script>
 
    <script type="text/javascript">
        dojo.require("dojox.charting.Chart2D");
        dojo.require("dojox.charting.themes.PlotKit.blue");
        dojo.addOnLoad(function() {
          var period = 2 * Math.PI;
          var tick = Math.PI / 180.0;
          var step = 5*Math.PI / 180.0;
          var id = 'chart_area';
 
          var chart = new dojox.charting.Chart2D(id);
          chart.setTheme(dojox.charting.themes.PlotKit.blue);
          chart.addAxis("x", {min: 0, max: period, majorTickStep: tick*30, 
                              minorTickStep: tick*10, minorLabels: false});
          chart.addAxis("y", {vertical: true, min: -1.01, max: 1, majorTickStep: 0.5, 
                              minorTickStep: 0.1, minorLabels: false});
          chart.addPlot("default", {type: 'Lines'});
          chart.addPlot("grid", {type: "Grid", vMinorLines: true});
 
          var series = {'sin' : [], 'cos' : []};
          for(var i = 0; i < period; i+=step) {
              series.sin.push({'x' : i, 'y' : Math.sin(i)});
              series.cos.push({'x' : i, 'y' : Math.cos(i)});
          }
 
          chart.addSeries('sin', series.sin);
          chart.addSeries('cos', series.cos);
          chart.render();
        });
    </script>
  </head>
  <body>
        <div id="chart_area" style="width: 100%; height: 400px;"></div>
  </body>
</html>

Basic animations are possible by invoking chart.updateSeries(name, data);. The result is pretty smooth in Safari, but eats a ton of CPU if done with a delay under 50ms. There also appears to be a lack of support for controlling updates to other chart features such as axes in the 1.1 version.

Other features I have yet to find (possibly because they don't exist) include labels for axes, legends, chart titles, and a simple way to set event handlers for various chart components and actions.

mindtrove » visualization

Dojo 1.1 Charting