BLOG

JavaScript Charts Using JqPlot and AngularJS

30 Nov 2014, by Vijay in Developer

Recently I was working on a project where I needed to implement a significant amount of charting in a web application. I looked at several JavaScript charting libraries and the best option I found was JqPlot (http://www.jqplot.com/index.php). It is an open source jQuery plugin for generating pure client-side JavaScript charts in your web page. I wanted to use this with AngularJS and it was surprisingly straight forward with the UI-Chart directive.

The combination of JqPlot + Bootstrap + AngulaJS proved to be very useful in my project as the JqPlot data renderers allow pulling data from any external source (eg. AJAX call, REST, etc.) in JSON format.

Additionally JqPlot supports a large number of chart types, everything from simple bar charts to pyramid charts. Here are a few links you can check out to see some of the really cool charts supported by JqPlot:

Animated Dashboard Chart – Filled line with log axis: http://www.jqplot.com/deploy/dist/examples/dashboardWidget.html

Area Chart: http://www.jqplot.com/deploy/dist/examples/kcp_area.html

Probability Chart: http://www.jqplot.com/deploy/dist/examples/kcp_pdf.html

I have created an example of a few basic charts using JqPlot in AngularJS. You can look at the following links for a preview of the example application and the code.

Application preview :   http://codepen.io/vpatel/full/RNWRZG/

Code: http://codepen.io/vpatel/pen/RNWRZG

LEAVE A COMENT