A quick comparison of web-based Charting libraries for data visualization
I have been using HighCharts for sometime now, for reporting and data visualization in an enterprise application I am working upon for one of my clients. And I was pretty satisfied with what HighCharts offers.
We decided to use HighCharts in pretty haste earlier when we introduced the Reporting module for our app, after having a very quick look at its demos. However, approximately a couple of weeks back, I received some specifications for the Reporting module, that made me re-think and do a more comprehensive analysis on what's available in terms of Charting and data visualization for web apps, and which one would suit us better. A guideline was to preferably look for an open-source solution, not necessarily free, but which can be customized for specific requirements, if needed.
So, with the inputs provided and armed with Google, I spent some time finding out and analyzing the various charting libraries available out there, and their relative strengths and weaknesses (Our application is ExtJs based, so integration with ExtJs was also a priority. Some other add-on features like printing, exporting, live data etc. were also considered as desirable for the library). Following libraries were evaluated and compared:
- HighCharts (http://www.highcharts.com)
- Microsoft Chart Controls for Asp.net (http://www.microsoft.com/downloads/details.aspx?FamilyID=130f7986-bf49-4...)
- Google Charts API (http://code.google.com/apis/chart/)
- YUI Charts (http://developer.yahoo.com/yui/examples/charts/charts-quickstart.html)
- ExtJs native Chart controls (http://www.sencha.com/products/js/#sample-4)
- DevExpress ASP.NET Charting (http://demos.devexpress.com/XtraChartsDemos/) - This was the only commercial Charting library evaluated mainly because we already used DevExpress in our application.
There were some interesting conclusions I arrived at.
HighCharts was the most interactive in terms of usability. But Microsoft Charting controls available as an extension to ASP.NET provide much more Chart types and configuration. However, charts from Microsoft Charting library are comparatively static as compared to HighCharts as they get rendered as an image, whereas HighCharts provide user interactivity as can be seen on the demos (www.highcharts.com/demo/).
Another point worth noting for HighCharts is that HighCharts is a completely client-side library (implying no server-load for Chart rendering process), whereas Microsoft Charts consume server resources in generating Chart image each time a new Chart is generated (this would be in addition to processing required for fetching Chart data, that obviously would be present no matter which library we use. For HighCharts, you would send this data to browser as Json or another appropriate format like xml for rendering by Highcharts, whereas Microsoft Chart controls generate the image from this data on the server-side itself).
In some cases, I felt MS Charts looked better than HighCharts (but non-interactivity was a big-minus).
Google Charts is an interesting solution with Google hosted Charting servers. We can consider it a completely client-side solution for the purpose of this blog entry, where you fetch data from your server, and generate a request for the Chart to the Google servers. Google provides both, a static version for its Charting library, called Google Charts API (http://code.google.com/apis/chart/index.html) as well a interactive one, called Google Visualization API (http://code.google.com/apis/visualization/interactive_charts.html).
YUI Charts are a bit immature (IMHO) compared to features available in other libraries. Moreover, YUI charts are rendered via Flash movies, which enable user interaction, but require Flash (which none of the other libraries discussed above require).
ExtJs Charting controls appeared to me as simple-wrappers for YUI charting, but providing out-of-the box integration with ExtJs itself. Our requirements for Charting demanded more from the library, plus we wanted to avoid Flash if possible.
DevExpress charts were good looking, but I saw no reason to explore beyond a couple of charts in DevExpress, as the other solutions above provided almost everything that this commercial (and costly on a comparative basis) library had to offer.
On the financial front, Microsoft Chart controls, Google Charts API and YUI Charts are completely free.
ExtJs Charts are available as an open-source and commercial license with the overall ExtJs library. Likewise, HighCharts are available with non-commercial and commercial license. In what I saw earlier, HighCharts commercial license price has gone-up in the last month somewhere.
DevExpress Charts library is available as a commercial option only.
So, all this takes you to one basic question: What are your requirements in terms of visualization, and do you at any point of time require extreme Charting support like 3D cylindrical, Radar, Renko, or other types of Charts used in financial industry for data visualization?
I was pretty happy to stick to HighCharts, that we are already using. With the earlier work I did on exporting data (available here), and HighCharts built-in facilities, I was able to customize printing and exporting of Charts together with their data exactly like we needed.
Moving forward, I expect HighCharts authors to provide more types of Charts as well as more options for each Chart type. However, if you need more complex Charting than HighCharts can support currently, probably Microsoft Chart Controls or Google API then would be better depending upon the sensitivity of your data, and whether your server runs on ASP.NET?
There's no one-size fits all approach here, but I would definitely recommend HighCharts if its Charting options and Chart types suit your needs, and you can afford its cost depending upon the number of developers working on HighCharts.
- Since I made this analysis about the Charting libraries, Google ads have been showing up with more of them whenever I view a page with Google Ads. So, here are more options (that I encountered entirely through Google Ads, and that I have not evaluated beyond visitng the sites once to see what they offer and how they look like):
Fusion Charts (http://www.fusioncharts.com/)
.NET Charting (http://www.dotnetcharting.com/demo.aspx)
Canvas Express (http://canvasxpress.org/)
- May 19, 2011 - ExtJs 4 was launched last month. And it has very powerful charting components matching those provided by HighCharts (i.e. completely client-side). You might want to have a look at ExtJs 4 also (which brings in a wonderful range of other UI components also together with the Charting components).