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.

Image charts
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.

SVG charts
Here, the rendering of the chart is strictly on the client browser: There is no server-side rendering of the chart. Data are passed into a JavaScript SVG library which renders the chart as SVG markup (or VML markup if the user is on Internet Explorer 6/7/8). The browser produces a chart from the resulting markup that is mostly consistent across browsers. (We have run into an edge case issue where labels on pie charts get cut-off in Internet Explorer.) Exporting the chart into a file for use in presentation slides is a little trickier — since SVG charts are derived from JavaScript libraries and you cannot create files using JavaScript (at least not easily or consistently across browsers). One possible solution is to post the serialized SVG output back to the server-side and convert into the desired target format (e.g., JPEG, PDF, etc.). These relatively minor issues are offset by the huge gain in chart interactivity. SVG charting libraries allows developers to attach mouse click and hover events to the charts, such that a user can drill down into a pie slice of a chart or hover over line graph points for a more comprehensive view of the data. The SVG charting libraries tend to be relatively easy to use for developers comfortable with JavaScript, relative to the server-side charting tools.

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.

SVG solutions
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.