Charts for Mobile

The Plot Chart

Numeric data quickly becomes difficult for us humans to understand. Once the number of rows or columns in a table passes two or three, the meaning quickly becomes harder to grasp. The easiest way to give meaning to numeric data is to display it as a chart. Unfortunately jQuery Mobile doesn't have any built-in charting capabilities and to the best of my knowledge there isn't a jQuery Mobile charting plug-in available. But lucky for us, jQuery Mobile is built on top of jQuery and there are several charting plug-ins available for it. 

My requirements for a charting library are pretty simple:

1. Free and open source
2. Compatible across the three mobile platforms I support: iOS, Android, Windows Phone 7

One of my favorite JavaScript charting libraries is "Raphael". I have used it on desktop projects previously but it was quickly out of the running. Raphael uses SVG, which isn't supported well across mobile platforms.

Next I googled, "jQuery charts". Nearly 3 million websites were returned, so I knew I was going to find something. Close to the top of the list was the following link: 1st Web Designer. The post there listed six jQuery charting plug-ins: 

1. GraphUp
2. jQuery Visualize
3. Highcharts
4. Flot
5. jQuery Sparklines
6. jqPlot

After doing a bit of analysis, I decided to run with jqPlot. This is not to say that the other packages aren't good, it is just that I was able to understand jqPlot's examples quicker than the others and it met all of my requirements. For your own needs, please try out the libraries, they may meet your needs better than they had mine.

jqPlot

There are two methods for generating graphics in HTML5, canvas and SVG. 
Canvas is like a bitmap and JavaScript can render graphics to it. SVG's use of vector graphics makes it seem ideal for a charting library, the problem is that SVG is not as well supported as canvas and it is not available on 2.x Android or any WP7. jqPlot uses HTML5 canvas. 

The jqPlot library is huge. It has an immense number of features. But it is not a bloated pig, it is smartly architected. Rather than force you to download a lot of charts and features you won't use, it, itself is composed of a large number of plug-ins, I counted 26 of them. This means you only download the plug-ins you want to use.

I could spend weeks explaining all of the features of jqPlot, unfortunately I don't have the time for that. Instead I am going to give you a quick walk through my demo app and explain anything interesting along the way.


Source:
http://therockncoder.blogspot.co.at/2012/05/jquery-mobile-charts.html