Skip to main content Skip to main navigation Skip to search Skip to footer
Type to Search Subscribe View Tags

HTML5 based Charting – Are you picking the right library?

HTML5 based Charting – Are you picking the right library?
Heena Ahuja - Software Engineer | March 26, 2014
741 Views

“A good charting component not just empowers the visualization of the data but also builds an immersive and quality experience for the end-user.”

Since decades, pictorial/graphical representations have been the most convincing way to communicate effectively. Likewise, in the present era, data visualization is the visual representation of the data which portrays/sketches the information in an efficacious and schematic way, thereby, enabling the data to express itself in an abstract and useful manner to the end users and it is commendable to see that IT arena is well equipped with numerous data visualization tools which if used appropriately and elegantly, can leave an everlasting wow impression in the mind of end users.

When it comes to a web-based data visualization solution, HTML5 based libraries provide a strong, feature-rich and immersive user experience. It has captivated the mind of many end-users in the market today. Be it, hosted software products or the ones, delivered on-premise, they store ever-increasing amounts of data and it is HTML5 which has enriched and empowered the representation of the data. Whether it’s about creating traditional websites or sites that target mobile devices, or native apps, HTML5 provides high-performance and elegant implementation for all the business intelligence needs.

But, First question which might strike in the developer’s mind would be: Why to use HTML5 based Charting Libraries over native options for Data Visualization and which Charting Component to choose?

Well, HTML5/ JavaScript Charting Libraries have number of advantages over native options –

  1. DOM-friendly
  2. Rich UI experience
  3. Some Open Source/free trial versions of HTML5 libraries are available.
  4. Hardware Accelerated Graphics
  5. Streaming Visualizations(especially for real-time data)
  6. True Client-side Charting
  7. Versatile: Write Once, Run Anywhere
  8. Cross-platform support
  9. Cross-browser support

These factors have made HTML5 based Charting Libraries very popular in the market. But, each charting library has its own special features as well which doesn’t always map to our data visualization needs. So, before concluding with any charting component, it is necessary to be clear with our requirements.

There can be two ways to opt out, when going for a HTML5 Charting Library for your application:

  1. Creating a new Charting Library(on our own)
  2. Choosing from the available Charting Libraries in the market

Going for the first option is not an obvious choice since it requires lots of time and resources, and cost of development. However in order to make our application framework scalable, this approach can be opted too. Therefore, if factors like longer timelines and more resources are affordable, then creating a new charting library as per our application requirement can prove to be righteous way and a perfect fitment for our application framework.

Adopting the second approach is a more obvious choice, since there are bundle of readymade, out of the shelf available HTML5 based charting libraries (open source or require paid license) which provide detailed set of features, possible customization and ease to use.  

However there are a set of aspects that need to be ensured and validated, while going for a HTML5 based charting library –

  1. Library Conflict Issues (between your application framework libraries and charting libraries framework)
  2. Support on older browsers/rendering engines.
  3. Performance Issues
  4. Scalability
  5. Compatibility with your complex code.
  6. Is the Charting Library which you have chosen, an open source/licensed and if it is licensed based then does it provides free trial versions or not.

As can be analyzed from the issues listed above, the successful integration and implementation of the data visualization component chosen from the available charting libraries is a challenging task but these bottlenecks can undoubtedly be cracked down to some level. I would suggest developers to pick up from JS based libraries like Highcharts because such charting libraries are easy to integrate, are lightweight, have less dependencies and they don’t create any library conflicts, these are complete package in themselves (with just JavaScript code, no CSS3/JQuery class is there), hence, JS based charting libraries integrate well with almost every application framework.

There are some solutions for graphics as well which must be considered before choosing a charting library:

  1. Canvas-based, rendered in IE using Explorer Canvas that in turn relies on VML
  2. SVG on standard-based browsers, rendered as zxVML in IE

There are pros and cons of both the approaches but for a charting library I would recommend the second one (SVG+VML) because it is well integrated with DOM, allowing one to manipulate chart’s elements with the DOM, and setting DOM events.

In comparison to SVG+VML, Canvas Charting Libraries must reinvent the DOM wheel to manage events. So, if one intends to build dynamic graphs with event handling, SVG/VML solutions will serve better.

Just to add, some of the charting libraries like HighCharts, FusionCharts and GoogleCharts, also provide free trial versions, so one can just download it, integrate it, implement it and can experience its level of integrity, scalability, flexibility, UI Responsiveness, performance and some other factors which might be the prime concern of your application framework. And the official websites of these charting libraries provide a feedback/query portal as well, which might be contacted for any further concerns/queries.

Which Charting Library to choose?

While choosing a charting component, rethinking on data visualization capabilities offered by it is a must. And, before evaluating any charting component, it should be clear what data is to be represented and how. The following key points should help in identifying that:

Key points to consider while evaluating html5 charting tool
  • Data itself - to be visualized in the application
  • Available  budget
  • Type of data – static or real time
  • Feature-Richness, Range of Chart types and sophistication charting needed, E.g. Drilldown, Combination Charts etc.
  • Level of data representation required like summarized or detailed.
  • Relation of data entities - aggregated or distributed?
  • Flexibility of data representation E.g. to view different perspectives of data

After considering the above mentioned points, the next step is to start finding a charting component. Consider all the factors listed below and finally make a decision.

  • Level of complexity to implement or integrate the charting tool with your application.
  • Cross-platform support - number of browser/devices/platforms it supports.
  • Range of chart types for the correct representation of data.
  • Availability of Free Trial Version.
  • Provision of Customer Care support/service.

And after getting the answers to these key points, one can then choose from various Charting Libraries available in the market. There are bunch of HTML5/JavaScript based Charting Libraries in the market. Some very popular and commonly used Libraries are listed below:

  • FusionCharts Suite XT
  • HighCharts JS
  • Google Chart Tools
  • Sencha ExtJS Charts
  • Charts.js
  • Flot
  • JQPlot
  • amCharts
  • gRaphael

Chart Libs Comparison referred from http://www.fusioncharts.com/javascript-charting-comparison/ shows the comparison on device & browser support, chart types available, reporting features and support options between some well-known and widely used Charting Libraries. One or more than one charting library may also be opted based upon the application’s requirement.

To conclude, selecting a charting component for a product is a difficult task because the choice will have to be made considering the broader perspective of current and future market scenarios. One will have to assess and find the alternatives keeping in mind some important factors like the latest technological trends which are generally transitional due to the ever-changing needs of the end users. And, the prime aspect and objective would be to leverage your development team’s expertise as per the growing trends of dynamic IT landscape.

During my experience of development, FusionCharts Suite XT has been the most favorite due to variety of charts it offers, the number of browser it supports and for its richness in UI. Next to this, would be HighCharts JS, as it is just a js library and integrates well with any HTML5 based application (as far as I have observed and experienced), its real-time graphs are very Rich in UI, HighCharts JS also have a dedicated library named HighStocks which offers number of charts for real time data visualization of stocks and shares data, most importantly these two libraries render their charts well in all modern web and mobile browsers, including IE6+. 

References

http://www.w3.org/standards/webdesign/htmlcss
http://www.fusioncharts.com/
http://www.highcharts.com/


Contact Us
MAX CHARACTERS: 10,000

We will treat any information you submit with us as confidential. Please read our privacy statement for additional information.

We will treat any information you submit with us as confidential. Please read our privacy statement for additional information.

Sign in to Add this article to your Reading List
Register