As we all know how jQuery make things easy for us to develop and perform better. So here we will talk about the jqplot, which is a jQuery plugin based upon pure javascript, used to build up beautiful line, bar and pie charts with enormous features in it like customized axis, multiple x and y axis, tooltips and labels which you can adjust and customize according to your needs or requirements. In addition to this, it is an open source project which means you can just download it and use it for free whether for commercial or private use.
So here is a short description which will give you a brief idea on how to use it.
- Download jqPlot from it official download page. http://bitbucket.org/cleonello/jqplot/downloads/
- Unzip downloaded jqPlot copy.
- Copy and paste jquery.jqplot.min.css from “dist/jquery.jqplot.min.css” in “css/ ” folder of your web app.
- Copy and paste excanvas.min.js from “dist/excanvas.min.js” in “js ” folder of your web app.
- Copy and paste jquery.min.js from “dist/jquery.min.js” in “js/ ” folder of your web app.
- Copy and paste jquery.jqplot.min.js from “dist/jquery.jqplot.min.js ” in “js/ ” folder of your web app.
- In your markup, just use it like this:
12345678910111213141516171819202122232425262728293031<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/jquery.jqplot.min.css"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.jqplot.min.js"></script><script type="text/javascript" src="js/excanvas.min.js"></script><title>Untitled Document</title></head><body><div id="container"><div id="chartdiv" style="height:400px;width:500px; margin:auto; "></div><script>$(document).ready(function(){$.jqplot('chartdiv',[[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]], //jqplot options//);});</script></div><!--end container--></body></html> - Now just open up your markup file in your browser and you would be able to see the plot.
Here is the screenshot of one that i just created:
