Web-based charting has emerged as another great use of the browser. Traditionally, business analysts were the ones crunching numbers on spreadsheet to build charts. The spreadsheet would be e-mail as a file attachment. This process of compiling numbers and chart building could take hours. There is the saying that once information is on paper, it is already outdated. It will not be long before the saying becomes: Once information is in an office file document, it is already outdated. As a result, the web is quickly becoming the preferred platform for data charting and analysis.
In this article, we will discuss approaches to creating charts on the web. Currently, there are two general approaches to creating charts on the web: Image-based versus Scalable Vector Graphics (SVG)-based. There are also Flash-based solutions but we cannot recommend them because Flash is not available on iPhones and iPads and the future of Flash-based solution is uncertain.
Here, the server generates a static image (e.g., a JPEG) of the chart from the data and the image gets displayed in the browser. There are a plethora of server-side charting implementations to choose from — a noteworthy one is Google Image Charts: http://code.google.com/apis/chart/image. Since the chart is simply an image, there are no cross-browser issues and the look of the chart is also consistent across browsers. The chart can easily be exported for usage in presentation slides since the chart is just an image file. However, the disadvantage of this approach is that users cannot interact with the chart; they cannot click into a pie chart slice or hover over line graph points to better understand the data being presented. While image-based charts provide a consistent and reliable view of the data, this approach does not give your end users necessary usability needed to make effective use of the information.
Choosing a solution
When choosing a charting solution, it is necessary to consider the following requirements:
- Does the chart have to be interactive? If the answer is a resounding yes, then SVG approaches are the only options.
- How important is exporting chart into other file format? If very important, then it may be worthwhile to look at image-based solutions or possibly dual solutions of both SVG and static images.
- Are we dealing with tens of thousands of data points? If yes, then it may be neccessary to sacrifice the interactivity of SVG charts for performance of static image charts.
Below is a brief descriptive of three SVG libraries. This is by no means a comprehensive list.
- gRaphael: http://g.raphaeljs.com
- Only completely free solution of the three.
- Not as mature the others and poorly documented.
- Programming somewhat easy.
- Fewer eye candy.
- Bottom-line: Check back in 6 months; the library is improving rapidly.
- Google Chart Tools: http://code.google.com/apis/chart
- Does not cost money but source code is not available and hard dependency on Google’s server.
- Mature and well-documented.
- Programming not as easy but powerful.
- Better eye candy — see Geographic chart.
- Bottom-line: Good solution but the charts and data security are heavily dependant on Google’s server.
- Highcharts: http://www.highcharts.com
- Costs money (couple of hundreds) but open source.
- Mature; Good documentation.
- Programming is easy.
- Best eye candy — charts will “pop” to your users.
- Bottom-line: Best overall general-purpose charting solution.