Wednesday 25 May 2011

Javascript Charts

One of our latest projects is focused mainly in data visualization, with both maps and charts. In the past day and a half I have been implementing a chart that was designed by the guys at Vizzuality.

The chart is an area chart that shows four or five series of figures over a number of years and it has some particular characteristics that make it blend in with the whole design of the application.

Desired chart

I started by using Google Charts API and managed to get really close to what I wanted, but unfortunately I didn't manage to find some options that I needed. Like for instance hiding the marker on specific points of the chart, or moving the y axis labels to the interior of the chart, and some other small things.

Google Charts atempt

Maybe it was my fault, but as I didn't really want to spend too much time looking for those options I ended up trying out Highcharts, that had mentioned by one of my colleagues when we first started looking into this project.

It was with much relief that by looking into their documentation and examples I found the exact options that I needed. In a few hours I managed to draw a chart like the one in the Vizzuality designs! And after a short while I managed to have our sample data being displayed in the chart.

Achieved result

It was really nice to achieve this goal and I was very pleased with Highcharts. "Unfortunately" it has a drawback, it's not free... except for non profit organizations like ours. =)

Anyway if you don't want to have to pay or use Highcharts I think that Google Charts is pretty good as well and as easy to use.

Maybe there are other options out there, care to recommend some?

PS: First post is here! Hurray!=)

No comments:

Post a Comment