Nexablog

Charting is one of the more advanced components that an application developer has at their disposal. It may not be used in every application but it probably could be and should be. Why? Charting makes the consumption of larges amounts of data easier and quicker than their tabular counterparts. In the Web world there are a couple of ways to bring charting to your Ajax application.

Flash vs. Open Web

This Blog isn’t to argue the benefits Open Web vs. Flash, if you are looking for that, Alex Russell has lots of good content on the benefits of the Open Web. My goal in the article is to make it possible to create an application with cool charting using the dojo.E library.

Dojo Charting

One possible way to do this would be to use the dojo toolkit charting. Dojo has been working on charting for some time and it has come a long ways. You can check out the capabilities of the dojo charting package by looking at the “dojox/charting/tests” directory. The image below shows a pie chart created using the dojo widget.

Under the covers, dojo charting determines the best rendering methodology based on the browser. When the chart is rendered in IE the underlying method is VML, and on other browsers it is SVG. The reason for the difference? Because Microsoft has so far refused to support SVG. Though, it would seem possible to adapt their VML support to SVG.

Fusion Charts

I have been using fusion charts for over a year now and have had great success with these components. The Fusion Charts component is written in Flash so it has cool animations built in to give it that “flashy” feel. Using Flash to do what it does best; animation, graphics and visualization. See Flash in action in this cool movie. I guess the moral of the story is be careful of what you create.

Check out Trudat, a mashup that takes the Trulia housing data and Mashes it up with Microsoft’s Virtual Earth. The other Mashup I created with Fusion Charts is a Facebook application that allows you to compare your house value vs. your friends. Keeping up with the Jones uses Fusion charts to plot your home’s value with their Bullet Graph.

XML is used in FusionCharts to define the data and display of the charts, so I thought “they’re XML, dojo.E is XML” perfect fit. The charting package has announced that it is making the version 2 of the library freely available. One negative is that it isn’t licensed under standard open source license. You can check out the Fusion Charts license agreement to see if it meets your needs.

Integrating FusionCharts as a dojo widget

Adding components that dojo.E can utilize through its markup language is pretty simple. You just need to create a dojo widget and the rest is done by the dojo.E library. The widget itself was very easy to create. Fusion Charts ships with a JavaScript file that contains all the code needed to embed their charts into an HTML file. I took this code and created a dojo widget that makes it easier to work within the dojo programming model.

More information on creating dojo widgets, can be found here on the dojotoolkit.org site.

A dojo widget for Fusion Charts is included in the download of the sample code attached to this blog entry. It can be used independent of the dojo.E library.

Creating the Fusion Chart using dojo.E Markup:

<ui xmlns:dojoe="dojoe.widgets">
<dojoe:FusionChart
id="testChart"
jsId="myChart"
chartType="MSColumn2DLineDY"
width="600" height="350" dataUrl="Col2DLineDY.xml">
</dojoe:FusionChart>
</ui>

Note: Developers can also embed the XML needed to display the chart under the <dojoe:FusionChart> tag. This is shown in the “Fusion Charts” sample application on the dojo.E website. Doing it this way will reduce the number of rounds to the server to pick up data.

Creating the Fusion Chart using the dojoML:

<div dojoType="dojoe.widgets.FusionChart"
id="testChart"
jsId="myChart"
chartType="MSColumn2DLineDY"
width="600" height="350" dataUrl="Col2DLineDY.xml">
</div>

Creating the Fusion Chart via JavaScript:

var chart = new dojoe.widgets.FusionChart({
id:"testChart",
jsId:"myChart",
chartType:"MSColumn2DLineDY",
width:"600", height:"350", dataUrl:"Col2DLineDY.xml"},
dojo.byId("programChart"));

Wrapping up

What you will need to do from here is pretty straight forward. I have included the dojoe-widget-fusioncharts.zip with the contents needed to run the fusion charts example in the SVN repository. Just download the zip file or check out the code and place it in your application folder that contains your “dojo” directory structure so that the “dojoe” directory in the zip is at the same level as the “dijit” directory.

Download the code

Access to the SVN Repository

Sample Application

Going Further

There are many things that can be done with just this simple sample to bring it to the next level. I will be working to see which ones of these are feasible and will be Blogging about them in upcoming posts.

• Use the XML for a FusionChart as a way to define a dojo chart. This is one of the benefits of XML. XML is a great abstraction layer. Using the same markup for both would make it easier to utilize any tools creating the charts.
• Integrate the Fusion Chart Widget with dojo data.

Bob (Buffone)

Tags: Ajax, Charting, dojo, dojoe, FusionCharting, JavaScript

This entry was posted on Tuesday, June 10th, 2008 at 2:22 pm and is filed under Ajax, JavaScript, dojo, dojoe. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.