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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <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.
Post a Comment