The Dojo Toolkit keeps adding packages (thankfully they have package management too!). Today, "Greenplum and SitePen announced the contribution of the new Charting engine to the Dojo Toolkit. Originally designed as the foundation for the Greenplum Monitor–a browser-based database monitoring application to be released later this year–the Charting engine is a cross-browser way of creating very complex charts easily, that can be updated on a regular basis."
Features
- A Chart can have multiple “PlotAreas” (the actual charts)
- A PlotArea can contain multiple Plots (x/y axis + N data series)
- Data series are bound at run-time to a dojo.collections.Store object, with flexible field bindings.
- An Axis can have custom labeling schemes.
- See below for plot types.
- Each plotter can take a function at render, which will be called for every data point in that series–the node representing the point is passed, as well as the entire source object the point represents.
- PlotAreas provide a facility for assigning colors to series (basically it has a built in HSV generator)
- All browsers but WebKit are supported in full.
- Rendering can be granular; right now the test only runs rendering once, but it was designed to all of constant rendering if needed.
- A range of data points can be plotted (instead of the full data set) if so desired.
- Trend methods are available for data analysis (but no specific plotters are built for it yet).
The test page has it all:
You can see that you end up with code like this:
dojo.require("dojo.charting.Chart");
dojo.require('dojo.json');
// our sample data for our line chart.
var json = [
{ x: 0, y: 110, size:20, x2:20, high:110, low: 80, open:90, close:96 },
{ x: 10, y: 24, size:4, x2: 25, high:56, low: 43, open:43, close:54 },
{ x: 15, y:63, size:32, x2: 30, high: 100, low: 40, open:56, close: 96 },
{ x: 25, y: 5, size:13, x2: 35, high: 40, low: 36, open:40, close:36 },
{ x: 40, y: 98, size:7, x2: 40, high: 86, low: 66, open: 80, close: 70 },
{ x: 45, y: 54, size:18, x2: 45, high: 50, low: 0, open: 42, close: 4 }
];
var store = new dojo.collections.Store();
store.setData(json);
// define the chart.
var s1 = new dojo.charting.Series({
dataSource:store,
bindings:{ x:"x", y:"y", size:"size" },
label:"The Main Series"
});
// ... much much more
