Thursday, December 20th, 2007

ChartMaker: Ext 2 UI on top of the Google Chart API

Category: Google, Sencha, Showcase

Reposted from my personal blog entry on ChartMaker.

I had an 11 hour flight from London to SFO. What was I going to do? I had a couple of books with me. The in-flight movies were average, and even in business class they didn’t have the on-demand system, so if you missed the start you had to wait for the next go around. I poked around in a DVD store and couldn’t find anything to interest me, so I ended up grabbing ‘Heroes’ since I had never seen it. I was put off by the “Save the cheerleader, save the world” commercials, but figured if it was half decent then there was a lot of material (e.g. time) to cover.

So, I popped in the DVD, and whilst I watched, I opened up Firefox and Textmate.

I have been wanting to play around with the new Ext 2.0 release, and also with the GWT-Ext package. Unfortunately, that module isn’t using Ext 2.0 quite yet (almost!), so I decided to do a first rev of the tool with straight Ext 2.

I found the new Google Chart API to be a little addicting, and some people have asked if there was a tool for people to create charts, instead of having to munge with URLs.

A common use case is to dynamically generate the charts on the fly, and then it makes sense to just build the URls and you are done. But, what if you wanted to sit back and just throw out a chart or two?

This is where ChartMaker (code) comes in.

The tool has you fill out core information about the graph or chart that you want to create (e.g. size and title), you then choose the type of chart in the tabs, and you fill out the data needed for that type of chart. You can click on the “seed data” button to see sample data, and when you are done tweaking it, you click on “GET CHART”. That action causes a preview to be loaded below, and you get given the URL in a text box that you can copy and paste.

It is a little rough around the edges in that I wanted to let you tab though fields and have an easy way to add rows of data (instead of just using a crude textarea). I also need to make it so that all of the data can be expressed through the UI (e.g. marker types, colors, fills, etc) which isn’t the case now.

I really enjoyed Ext 2. They did a great job, and with more documentation and such to come, I think it is a great library for building these desktop-like environments.

The UI was basically defined via:


  1. init: function() {
  2.   var header  = headerSection();
  3.   var center  = centerSection();
  4.   var preview = previewSection();
  6.   var viewport = new Ext.Viewport({
  7.     layout: 'border',
  8.     items: [header, center, preview]
  9.   });
  10. }

Then each section used the “region” metadata to tell the system where to place it. You are also able to do things like tell the system you can be moved around, collapsible, and more.

So, the result of a few hours with Ext 2 with no access to the online docs and you get this:

Posted by Dion Almaer at 9:12 am

4.1 rating from 30 votes


Comments feed TrackBack URI

Very cool Dion! :)

Comment by Rey Bango — December 20, 2007

better mine!!!

Comment by provenza — December 20, 2007

If Dion is that productive during a transatlantic flight, I think his employer should put him in flights to Australia. Who know what he might come up with :-)

Comment by Nameless — December 20, 2007

That is pretty interesting. When Google Chart was announced I played around with it, but was turned off to it for exactly the reason you mentioned: that they required using URLs. This is a cool tool you made.

Comment by Jigs — December 20, 2007

Site dies in IE6

Comment by Seth — December 21, 2007

good,will all the chart will be under ext? I use fusionchart appear this

Comment by linizou — January 19, 2008


Comment by Aphrodisiac — July 31, 2008

Leave a comment

You must be logged in to post a comment.