JQuery mobile and jqPlot

Hi guys, its a long time i wrote a post, these days got little busy with work. So now this is a post to integrate jquery mobile api with the jqplot to render some grap dash boards in mobile and these garph dash bords when combined with jquery mobile are compatible with all popular OS like Android and iOS .. etc. So below is the code to do it and its very self explanatory.

Following files are to be included and then start the coding part
Proj_Exp

<html lang="html">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Dynamic collapsible - jQuery Mobile Demos</title>
		<link rel="stylesheet"  href="css/jquery.mobile-1.3.1.min.css">
		<link rel="stylesheet" href="css/jqm-demos.css">
		<link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

		<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="js/index.js"></script>
		<script src="js/jquery.mobile-1.3.1.min.js"></script>

		<script>
			$(document).on("pageshow", function() {
				$.jqplot.config.enablePlugins = true;
				var s1 = [2, 6, 7, 10];
				var ticks = ['a', 'b', 'c', 'd'];

				plot1 = $.jqplot('chart1', [s1], {
					// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
					animate : !$.jqplot.use_excanvas,
					seriesDefaults : {
						renderer : $.jqplot.BarRenderer,
						pointLabels : {
							show : false
						}
					},
					axes : {
						xaxis : {
							renderer : $.jqplot.CategoryAxisRenderer
							//ticks : ticks
						}
					},
					highlighter : {
						show : false
					}
				});

				$('#chart1').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
					$('#info1').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
				});

				var data = [['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14], ['Out of home', 16], ['Commuting', 7], ['Orientation', 9]];
				var plot1 = jQuery.jqplot('chart2', [data], {
					seriesDefaults : {
						// Make this a pie chart.
						renderer : jQuery.jqplot.PieRenderer,
						rendererOptions : {
							// Put data labels on the pie slices.
							// By default, labels show the percentage of the slice.
							showDataLabels : true
						}
					},
					legend : {
						show : false,
						location : 'e'
					}
				});
			});
		</script>
	</head>
	<body>

		<!-- Start of first page: #one -->
		<div data-role="page" id="one">

			<div data-role="header">
				<h1>Multi-page</h1>
			</div><!-- /header -->

			<div data-role="content" >
				<h2>Home Page</h2>

				<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
					<li data-role="list-divider">
						Log Analysis Report
					</li>
					<li>
						<a href="index.html" data-theme="e">Bar Chart Analysis</a>
					</li>
					<li>
						<a href="index.html">Pie Chart Analysis</a>
					</li>
					<li>
						<a href="index.html">Line Chart Analysis</a>
					</li>
					<li>
						<a href="index.html">Combination Chart Analysis</a>
					</li>
				</ul>
				<div>
					<span>You Clicked: </span><span id="info1">Nothing yet</span>
				</div>

				<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>

				<h3>Show internal pages:</h3>
				<p>
					<a href="#two" data-role="button" data-transition="slideup">Show Pie Report</a>
				</p>

			</div><!-- /content -->

			<div data-role="footer" data-theme="d">
				<h4>Page Footer</h4>
			</div><!-- /footer -->
		</div><!-- /page one -->

		<!-- Start of second page: #two -->
		<div data-role="page" id="two" data-theme="a">

			<div data-role="header">
				<h1>Pie Report</h1>
			</div><!-- /header -->

			<div data-role="content" data-theme="a">
				<h2>Pie Report</h2>
				<div id="chart2" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
				<p>
					<a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to Home Page</a>
				</p>

			</div><!-- /content -->

			<div data-role="footer">
				<h4>Page Footer</h4>
			</div><!-- /footer -->
		</div><!-- /page two -->

		<!-- Don't touch this! -->
		<script class="include" type="text/javascript" src="js/jquery.jqplot.min.js"></script>

		<!-- Additional plugins go here -->

		<script class="include" type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
		<script class="include" type="text/javascript" src="js/jqplot.pieRenderer.min.js"></script>

		<script class="include" type="text/javascript" src="js/jqplot.categoryAxisRenderer.min.js"></script>
		<script class="include" type="text/javascript" src="js/jqplot.pointLabels.min.js"></script>

		<!-- End additional plugins -->

	</body>
</html>

and the following are the simulated output for the above code in the mobile.

first_screen

sec_screen

Happy Coding mobile apps 🙂

Advertisements

3 thoughts on “JQuery mobile and jqPlot

  1. Thank you for the inspiration! I needed a different method besides the one others were advocating. Now I can make different charts work with different page transitions!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s