Tuesday, March 2, 2010

Flash charts in Blogger

George & Ravi have a fantastic blog here, where they discuss their trading strategies for their fund. It is eminently readable and they have some great ideas.
However, George mentioned that they rely on pre-fabricated graphs and charts to illustrate their point. I thought it might be nice to have dynamic charts which could be embedded in Blogger.

So after some searching and quite a bit of tinkering, I managed to produce some charts that might give them some autonomy in creating graphs for their blog.

There were a few steps to making this chart:


  1. After some googling I decided to use the set of tools provided by amCharts which embeds a Flash object using the protocol provided by SWFObject, into a blog post. It uses an XML file to control the flash object settings and to feed in the data. In the XML file, I needed to change only the line which points to the data (I was using online hosting, so to a hyperlink - see below). There are numerous other settings which I intend to play around with as I make more charts.

  2. I uploaded the files associated with the project so that they can be hotlinked. This allowed me to try out the file uploading facility provided by Google Groups. I uploaded the data, the XML file, and the amCharts flash object there (you don't need to make your group public). The good part about this is that by changing dataset uploaded at Google Groups, the chart is automatically updated. It does not accept JavaScript however and to upload the .js file associated with SWFObject, I used yourjavascript.com, which, conveniently, does not need registration.


  3. I chose to embed the chart in Blogger without using SWFObject as it was causing some problems. This works fine except that as this page mentions IE users will have to activate Flash when they view the site. In addition, you will need to have Flash 8 or higher installed.


  4. The most important and incomplete part is the dynamic aspect, i.e., amCharts allows you to serve up the data to it dynamically everytime it loads. However, this will require some PHP programming which I could not get to work right off the bat. The final plan is to have a PHP script serve the data from the Google Finance API, replace the older .csv over at Google Groups (I guess this will require some encryption as well, because authentication will then be an issue), and the chart will update dynamically (there is an option in the amCharts controls to update at regular frequencies).


Since the chart is a little wide, I have embedded it in this other blog, which I tend to use as a sandbox for Blogger projects. I wish the fund, Aadiyatna, a lot of luck!

EDIT: Turns out you do need to make Google Group content public.

2 comments:

Ravi Saraogi said...

we will need a lot more than luck to incorporate the above.....

Krull said...

@Ravi: lol. These things are more of a nuisance than hard to implement. If you have as much free time as I do, you just try everything till it works. :-)