Gears Future APIs: Image Manipulation API Gears Future APIs: Desktop Shortcut API
Dec 20

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

Ajax, Tech with tags: , , Add comments

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:

init: function() {
  var header  = headerSection();
  var center  = centerSection();
  var preview = previewSection();
  var viewport = new Ext.Viewport({
    layout: 'border',
    items: [header, center, preview]

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:

5 Responses to “ChartMaker: Ext 2 UI on top of the Google Chart API”

  1. Jon Tirsen Says:

    I may be missing something but the code isn’t actually there. (e.g. look at Empty.)

  2. Paolo Says:

    Yep, there is no code in the repository.

    svn checkout chartmaker-read-only
    returns nothing

    Is the repository in a different place?

  3. Marcelo Delgado Says:

    Hi Dion, I am havin a big trouble, this codo it is not working in my computer/environment
    Toolbar toolbar = new Toolbar();
    ToolbarButton toolbarButton = new ToolbarButton(”Add Data”, new ButtonListenerAdapter() {

    public void onClick(Button button, EventObject e) {
    Record record = recordDef.createRecord(new Object[]{”My Sport”, “5 30 18 25″, “0000ff”});
    store.insert(0, record);
    grid.startEditing(0, 0);

    The event it is not firing, do you know what I am doing wrong? it would be great if you can help me

  4. wholesale replica handbags Says:

    very good web thank you share

  5. epuls Says:

    Is the repository in a different place?

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: Type in the word 'ajax'