Cool data in the browser with Dojo

This is basically what I talked about on Saturday at Barcamp (which was heaps of fun and big props to Ludwig for organising it all!).

Cool data in the browser with Dojo

We're now at a place with Javascript development where we can handle structured data really well in the browser. And then we can start doing some cool stuff - grids, charts, maps, and so on. The Dojo toolkit calls it dojo.data.

Basically dojo.data is an abstraction - sitting between where the data comes from (tables, lists, xml, csv, json, Flickr...) and what you want to do with it (querying, widgets, graphs, grids, maps, ...).

Stores

A data store describes where the data comes from. This could be from in the HTML page (from inline lists or tables), from static sources (XML, CSV, JSON), dynamic sources (database-backed querying) or external APIs (like Flickr). Different stores can implement different sections of the dojo.data API depending on what the source supports - reading, writing, identities, and so on. Its pretty easy to create your own store implementation if none of the existing ones suit.

Data Widgets

Data widgets present data from a store. The idea is that we can create kick-ass widgets once that work with data from any source. The widgets interface to the data via the dojo.data APIs and then do cool things to present it. Data-driven widgets include form components like ComboBox, the tree, the grid, charting, image galleries, and so on. We'll just talk about a couple of them.

The Dojo Grid was released in September by SitePen, Mozilla, and others. It is the Javascript table to end all tables, with a truly impressive feature list - paging, sorting, filtering, subgrids, events, formatting, internationalisation, and the list goes on. Of course, the grid can consume data from a store, so we can have all these impressive features for CSV data, XML data, or anything else. SitePen has a two part tutorial on a few of the grid features, or you can check out the documentation (still in-progress) and the tests.

Dojo Charting provides vector-based charting in 2D, and now 3D thanks to the work of Kun Xi and Neil Joshi during this years Google Summer of Code. Underneath it uses dojox.gfx which leverages SVG, VML, Silverlight, or Canvas depending on the browser to draw the vector graphics. Charting is pretty new but already has an impressive set of features: lines, columns, areas, bars, pies, grids, axes, themes, ... see the tests for some examples. The dojo.data implementation in charting isn't fully complete yet but its still easy enough to get it working.

Demo Time

Enough talk - lets see all this in action. I've grabbed some 10-minute weather readings in CSV format from 18 Auckland stations for a 24 hour period in November from NIWA's climate database. Then built a simple data explorer where you can select a station in the table and see a line chart of the temperature and wind speed over the 24 hour period for that station. And there's a map, because that's what I do.

Play with the demo

You'll notice that there is no page-loading involved (AJAX goodness), you can sort the grid by clicking on the column headings, and that it's all very smooth and responsive. View the source and read the comments to see what is happening underneath.

Enjoy!