Category: HTML5 Apps


jQuery Mobile Charts

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:
Free and open source
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:

GraphUp
jQuery Visualize
Highcharts
Flot
jQuery Sparklines
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.

This took me around huge time to do this, As i am a newbie to this complex Framework.
Sencha Touch is used for developing dynamic HTML Mobile Apps.
Even JQueryMobile does the same.

Later i will let you know the difference between JQueryMobile, Sencha.

Following Example demonstrates Populating the XML data into List.

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name=”viewport” initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;” />
<link rel=”stylesheet” href=”../../resources/css/sencha-touch.css” type=”text/css”>

<title>List</title>
<script type=”text/javascript” src=”../../sencha-touch.js”></script>
<!– <script type=”text/javascript” src=”xmltojson.js”></script>

<script type=”text/javascript” src=”x2j.js”></script>–>

<!– <script type=”text/javascript” src=”src/index.js”></script> –>
<script type=”text/javascript” src=”jquery-1.7.1.min.js”></script>
</head>

<script type=”text/javascript”>

Ext.setup({
onReady: function() {
Ext.regModel(‘Person’, {
fields: [
{name: ‘ename’, type: ‘string’}

]
});

/* var itemTemplate = new Ext.XTemplate(
‘<tpl for=”.”>’,
‘{ename}’,
‘</tpl>’);*/

var xmlStore = new Ext.data.Store({
model: “Person”,
proxy: {
type: ‘ajax’,
url: ‘BirthdayInvitations.xml’,
reader: {
type: ‘xml’,
record: ‘bdayevent’
}
},
root: ‘bdayevents’,
autoLoad: true
});

var templist = new Ext.List( {
title:”xmli”,
itemTpl : ‘{ename}’,

floating: true,
indexBar: true,
width: 350,
height: 370,
centered: true,
store:xmlStore,
modal: true,
hideOnMaskTap: false
}).show();

var panel = new Ext.TabPanel({
tabBar: {
layout: {
pack: ‘center’
}
},
fullscreen: true,
cardSwitchAnimation: ‘slide’,
items: [templist]
});
}
});
</script>

</head>
<body></body>
</html>

For your Info:

regModel: This is Like DAO of the Elements that we are Loading.