Ext 2 UI on top of the Google Chart API ...

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 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 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 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:
PLAIN TEXT
JAVASCRIPT:

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

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.
source: ajaxian

 View Full Story.