Entity view (Content)

Creating charts & graphs with Javascript

By rmo
Jul. 21, 2011

I have something really, really cool I wanted to share, and I'm sure you won't be disappointed. In scenarios where displays of graphs/charts are needed, either a client wanted to showcase some statistics to their users, or an administrator wanted a summary of activities of what is currently going on within the site. If the graphs/charts are simple, you can just use the Google Charts API, but for something more advanced or simply for the "looks", Google Charts doesn't do a good job. While coding these manually using pure Javascript and jQuery is possible, it is a nightmare to do so... And I don't want to go into the details of that. Luckily, and recently, I came across these two amazing tools...

Highcharts JS - Interactive JavaScript charts for your web projects

And the description straight from their website - "Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types."

A demo can be found here. You can download it free for personal or non-profit web projects!

jqPlot - pure javascript plotting

And the description from their website - "jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features:

  • Numerous chart style options.
  • Date axes with customizable formatting.
  • Up to 9 Y axes.
  • Rotated axis text.
  • Automatic trend line computation.
  • Tooltips and data point highlighting.
  • Sensible defaults for ease of use."

A demo can be found here. This is an open-source project so you can download it entirely free!

Remarks: Between the two, there isn't a huge difference in terms of functionality, both offers the same features for your plotting needs. Yet, the configuration is much simpler in Highcharts than jqPlot. You will only need to attach highcharts.js into your page and everything is loaded. In jqPlot, there's a lot more javascript files to attach if you wanted more advanced functionality. Even though jqPlot seem to be a bit of a mess it does, however, offers an advantage - Pluggability! You only need to include what you use and nothing more. So, jqPlot is pretty light-weighted.

Post Tags: