Andre's Blog
Perfection is when there is nothing left to take away
Flash charting - not too flashy

Original Webalizer PNG graphs became quite small when viewed on a high-resolution screen, which is pretty much any screen nowadays and are not very easy to work on due to a lack of a layout engine. Poor antialiasing in the underlying GD library does not help quality either. Being able to produce better graphs was one of the reasons I added XML reports to Stone Steps Webalizer. Last couple of months I was mostly working on making sure that it's easy to use XSL templates that will be included into the Stone Steps Webalizer package with various Flash charting packages.

Open Flash Chart

Open Flash Chart (OFC) was the first package I tried. It was fairly simple to set up, although having all examples in PHP didn't make things easier because I needed to use the JavaScript interface. After a few hours of trying, I was able to produce a working daily graph, but learned that OFC only supports one plotting area per chart, so I had to drop the graph showing transfer volume and combine hits/files/pages and hosts/visits in a single graph using the secondary axis.

OFC, Daily Chart

I also had to sacrifice color-coded weekends in the X axis because OFC didn't support styling individual axis labels. Other styling problems started to pile up as I went along, such as not being able to set some of the font styles in the chart title.

The worse one was the Country chart, as pie labels started to overlap the chart title and each other when the number of displayed countries was over five or six.

In order to work around this problem, I had to remove the labels and leave only tooltips, which made the chart look incomplete.

Soon after I started my experiments, I found out that OFC v2 is in alpha testing, so I gave it a try, but something wasn't quite ready there yet, so that even examples didn't render properly and I decided to stay with v1 for now. Another surprise in v2 was that the input format was changed from a comma-delimited list of values to chart to JavaScript Object Notation (JSON). I had all charts done in v1 format at that point, so I decided to leave v2 alone for now.

XML/SWF Charts

A couple of weeks ago I came across of XML/SWF Charts and was quite impressed by the quality of the output. Needless to say, I immediately started to write another XSL template to make use of XML/SWF charts. However, my excitement quite quickly evaporated, as I hit multiple implementation deficiencies.

For example, there was no secondary axis option, so I could not combine in hits, pages, files and visits on a single chart, as I could with the OFC charts and just about every other charting package there is. There was no option to combine multiple plot areas on the same chart, although this particular option seems to be quite advanced in the world of Flash charting and few packages offer it. Well, I have to mention that there is an option of including a Flash chart within a Flash chart, but I don't consider this as a particularly good approach.

The biggest problem I found, however, was the bizarre coordinate system. XML/SWF reference pages describe the top left corner as the origin. However, when I placed the plotting area at this location, it turned out to be about a hundred pixels shifted to the right. I tried a few other Flash scaling/origin options and various manual adjustments, but ended up with code sprinkled with various offsets, which looked fairly ugly and I decided to put XML/SWF charts away for now.

amCharts

Just like XML/SWF Charts, amCharts produced graphs that looked very professional and offered more ways to control them than any other package I reviewed. One of the awesome features I came across in amCharts was that I could identify every category value (X-axis), so that only existing data values with corresponding value IDs would be rendered. This one option could have saved me a couple of days worth of XSL of work, if I chose amCharts as the default package.

Another great thing about amCharts is the ability to merge static and runtime settings. For example, it is possible to configure a label statically to be at a certain location, with certain alignment and then add at run time text color and font settings. Merging settings like this makes it easier to control chart elements, compared to having to change individual settings through JavaScript calls.

Eventually, however, I stumbled upon a strange problem - column chart did not support multiple plotting areas, like the stock chart did and did not support the secondary axis, which I intended to use for hosts and visits. Line chart did support secondary axis, but refused to render columns, outputting them as lines. The stock chart, which offered everything I was looking for was specialized for stocks and expected dates for the category axis.

I tried using area chart instead of columns and the graph looked not bad, so I decided to keep it this way. After a few hours, when I almost finished daily and hourly graphs, I learned that it's possible to draw a vertical line from every point in a line graph, so I could actually mimic a column chart with those vertical lines. A hack is a hack, though, and there were only limited ways to control those vertical lines (i.e. columns overlap, outline color, etc), so I kept the area chart.

The pie chart, on the other hand, looked great and I could even tilt it to make it look similar to the original country graph pie chart, but it turned out that tilting the chart works only when the first slice starts at 90°, not 0°, which is what I wanted. After some experimentation, I used a gradient to make the country chart look 3D, but keep the first slice at 0°.

amCharts, Pie Chart

The only thing that remained unresolved was the huge link to the amCharts website in the top left corner. I didn't want to move the title or make the chart wider to avoid the overlap and decided to leave it as is for now.

Bottom Line

After some consideration, I decided to keep both, Open Flash Chart and amChart, linked into the XSL report templates, so that one of them or the the old-style PNG graphs could be selected in the XSL configuration. Both charting packages generate usable graphs and each will serve as a sample in case somebody would like to use some other charting package.

Comments:
Posted Fri Oct 24 10:56:01 EDT 2008 by Joshua

Great post on your experiences with the flash charting technology you reviewed!

I feel though as I've been left hanging because it doesn't state when you will implement it in the next version of SSW.

Posted Fri Oct 24 13:10:41 EDT 2008 by Andre

I'm in the final stages of testing XML reports and will release SSW within a couple of weeks.

Posted Fri Oct 31 10:55:47 EDT 2008 by monk.e.boy

You seem like the kind of person open flash chart needs to help test it.

Take a look at V2, sorry about the JSON format (I'm sure it'll make things easier for you in the long run ;-) but a lot of the points you make are solved now.

Stuff like title font, can't you just use <h1>title</h1> above the flash chart?

OFC now exports .png to a JS function for screen shots.

BTW we have a new forum: http://forums.openflashchart.com/ so feel free to drop by and tell me what to fix next :-)  help me to help you :-)

monk.e.boy

Posted Sat Nov 1 09:09:36 EDT 2008 by Andre

Thanks for the feedback. I will review OFC v2 later this year.

Posted Tue Feb 3 04:33:07 EST 2009 by Boost Boy

how can i remove the title of left corner "chart by amCharts.com".....

can u help me for how to solv.....is it possible .

Posted Tue Feb 3 08:00:44 EST 2009 by Andre

See http://www.amcharts.com/faq

Name:

Comment: