Sunday, 16 December 2007

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

Basically 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, ...).


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 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 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 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.



sohbet15 said...


Conar Welsh said...

i like what you did here with being able to graph the selected rows. I am trying to take it a step farther and be able to graph a range of cells, with the harder challenge being not knowing ahead of time what the axis, or the data in general is going to be... any ideas?

Tarek said...

I am trying to write more on this subject in the future

tarek emam


sohbetbul said...

Bu çok yararlı makale ve yorumlar için teşekkür ederiz

Seth said...

This is good information. Thanks for this post. Will keep my eyes open for new posts on your site.

Back Muscle Pain

UltimateShare said...

Thank you
Streaming films

Andrew said...

Red Toaster

silly said...

That's a lot for this great article. How To Get A Six Pack Fast

fireMART said...

I never thought of doing it this way before thanks Fire Extinguishers

squidooftw said...

Thank you for this informative and helpful article. Thanks for sharing my friend!

Aion Leveling Guide.
Backup Wii Games.

squidooftw said...
This comment has been removed by the author.
jack said...

This post really brighten me up on this subject. very useful
violin lessons
best weight loss pills

Frederick Wong said...

Thank you for that informative post. I really love to read articles that have good information and
ideas to share to each reader. I hope to read more from you guys and continue that good work that
is really inspiring to us

cuy103 said...

I am trying to write more on this subject in the future

How to grow mushrooms

The Kitesurf Centre said...

thanks very much!

Kitesurfing Lessons

Anonymous said...

This is pretty interesting stuff. I can learn so much from you guys.

Nexus One Smartphone

Med said...

escort bayanlar
escort ilan

d0wn3r said...

I don't know what I have to said. But, this is a nice topic and I really enjoy reading it. What do you think about dmdmdm? Share your opinion at

Anonymous said...

This was a great post indeed, but I with blogs wouldn't get spammed so much. At LEAST say something relative to this in the future!

Articles Marketing l Consultant SEO l SEO Engine Optimization

tom straut said...

I am a 23 year old systems engineer from Hayes in London, England, and recent graduate from the Department of Computing at Link Imperial College London.
Free Laptop
Free Laptop For Students

Mohamed said...

This is good information. Thanks for this post. Will keep my eyes open for new posts on your site.

How To Generate Free Traffic
Free MLM Success Tips

Kimisan said...

WOW never imagined that there is this kinda cool thing. thanks for posting this.
couples ideas

Mohamed said...

I hope to read more from you guys and continue that good work that
is really inspiring to us.

Daniel said...

like how you organized the data, makes it easier to understand for sure

Merchant Cash Advance

Michael said...

This is a great topic. Thanks for bringing it up.
Popcorn Machine Cart

naughty,coder said...

u r right

james said...

Bookmarking this page!
Ann Arbor Computer Repair
Ann Arbor data recovery Michigan MI
Ann Arbor virus-removal Michigan MI

Anonymous said...

Susan is an angel in the form of a therapist and teacher. I helps in many ways from understanding personal relationship dynamics to appreciating the feminine energy in all of us.
Win A Free Laptop
How To Get Free Laptop
Free Laptop
Free Laptop Computer
Free Laptop For Students

Julia said...

Interesting post. I recommend for your website some flash buttons - see

this is button tooltip :P see the tutorial.

porsche993997 said...

Many thanks for that info, it is just what I have been looking for.

[link title="Laptops Wanted"][/link]

[link title="Premier Finance"]http://[/link]

Med said...

There are many private dentists partner in Staffordshire to

escortlar34ist said...

turkiyenin bir numarali escort bayan sitesi thanks so much all admin

Anonymous said...

Thank you very much! You have helped me tremendously

liam said...

Can this still work if the user has java turned off in their browser. We sell bathroom furniture online and had to get rid of a lot of the Java scripts due to this.

eray said...

travesti trv travesti resimleri travesti arkadaş

John said...

cool thanks

laptop deal

michelle said...

Great post. I will bookmark this page. Thanks.

SEO Outsourcing

Bryant said...

excellent post...thanks for this!

seventh-day adventist

gyc said...

This is good information. Thanks for this post. Will keep my eyes open for new posts on your site.

Site de rencontre

Trisha said...

This is interesting, when I first read your paragraph I know it from the start that I could learn something new. So nice to keep in touch with you. Thank you so much.


Paul said...

Good work with the javascript development. Seems like it can handle a lot of tasks. Interesting stuff and a good read here. I have enjoyed reading it and hope to see more Waste King legend 8000.

joe said...

The blog was absolutely fantastic! Lots of great information and inspiration, both of which we all need!b Keep 'em coming... you all do such a great job at such Concepts... can't tell you how much I, for one appreciate all you do!
Business Loan

Im said...

What a great article, I wish I could write one article like this.Have you seen this site,it's quite similar to yours Reduce Thigh fats

showtime123 said...

Good post

Overcoming Anxiety Attacks

Alex McCarthy said...

Nice blog. I stumbled upon it while I was on blogger. I have you bookmarked so I can read some more of your post in the future.


Acai Berry Select Weight Loss

Dr. Armughan Riaz M.B.B.S, Dip Card said...

Almost all of the things you mention is supprisingly appropriate and that makes me wonder why I had not looked at this with this light previously. This particular piece really did turn the light on for me personally as far as this particular issue goes. Nevertheless there is actually just one position I am not really too comfy with and while I attempt to reconcile that with the actual core theme of the point, permit me see exactly what all the rest of the visitors have to say.Nicely done.
Love sms | High blood Pressure Symptoms | EECP PakistanPakistan Video | Blackhead Remover

Aditya Desai said...

this is a very nice post on blogger. bored of all spam crap being flooded on internet. seo expert

Lemonk Debri said...

good post keep the good work up

nclex pass rate
npte guide

Lemonk Debri said...

Good Post

skin lightening for african americans

Anonymous said...

Very useful post, thanks.
Small Business Insurance

Alex Ray said...

I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own blog.
Buy Crestor | Buy Plavix 75mg

Claire said...

Thanks for the post, i have used Dojo but i was not that stable on my PC.

fire alarms

daniel77 said...

Dojo really does it job very well on my browser. Hope you can bring the same cool things on the table like this next time.

Canapé cuir

Davidz said...

I think this will be a good tool for may arsenal. I am going to download the demo.

Debt Consolidation Companies

HampshireKitesurfing.COM said...

Very interesting as per usual.

Md. Shariful Islam said...

Commercial Photography for Business and corporate clients. Photos for Branding, Business image and advertising. A range of business photography options for Perth commercial clients.

Dheeraj said...

I recently came across your blog and have been reading along.I'm impressed. You're truly well informed and very intelligent. You wrote something that people could

understand and made the subject intriguing for everyone. I'm saving this for future use.
The Seo Portal
The Seo Portal

Vladimir Milanovic said...



ilizyonist said...

Escort bayan'a
ulaşmanın en iyi yolu Ankara escort sitesinden geçer.
Ankara geceleri ve gündüzleri ile değil günün 24 saatinde bile ayrı bir güzelliğe sahiptir.Günün stresini atmak için
ankara escort sitelerinde bulacağınız neşeli ve eğlenceli
Ankara escort ile eğlenceli anlar geçireceksiniz
Ankara escort siteleri ile bulacaınız escort kızlar
ile yalnızlığınıza son vereceksiniz.Dilerseniz Yabancı Escort
bayanlarda bulabilirsiniz. Türkiyede İzmit escort,
Gaziantep escort,
Kuşadası escort ve tabikide
İstanbul escort bulabilirsiniz.
İstanbul escort apayrı bi konu onu sonra açıklıcam...

Hieronymus Franck said...
This comment has been removed by the author.