jqplot chart is not displaying in my jquerymobile page - php

Question

i am preparing a jquerymobile app, in which i want to insert a jqplotchart, so that i wrote code for that. but now problem is chart is not being displayed in my page.
libraries i
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="stylesheets/jquery.mobile-1.1.1.min.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jquery.jqplot.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jqm-docs.css" type="text/css"/>
<script src="jquery.jqplot.min.js" type="text/javascript"></script>
<script src="jqplot.pieRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.barRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="hideAddressBar.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jqm-docs.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>
javascript i written:
$(document).bind("mobileinit",function() {
// go to server for chart data
$('#pagePlotChart').live('pageshow',function() {
$.get("mygraphdata", function(data){
$.jqplot('plotChart', data,{
title:'My Chart',
axesDefaults:
{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes:
{ xaxis: { label:"Day", pad: 0 },
yaxis: { label: "Measurement" }
}
});
});
return false;
});
});
html code:
<div id="pagePlotChart" data-role="page" data-rockncoder-jspage="managePlotChart">
<header data-role="header" data-position="fixed">
<h1>Plot Chart</h1>
</header>
<section data-role="content">
<div id="plotChart" class="myChart"></div>
<button id="refreshPlotChart" value="Refresh Chart" data-mini="true"></button>
</section>
</div>
actually i have to take json data from some php file and pass to this chart. and chart shuld display the graph by using that json data from some php file.
my json data will be in this formate ["v1:myName","g:233","h:322"]..etc.
php file is sending json data. i checked in fidler. but chart is not working.
please tell me solution for this.

Answer 1

First of all I notice you are loading jQuery mobile twice in your page header. Try removing the older version, and moving most or all of your JS includes to the page footer, that way your page can (partially) render before the JS files are downloaded by the browser. Best practice for the jqplot components is certainly to move includes to the footer.
The actual order of loading the jqplot components is almost right. It looks like the main jQuery file needs to be loaded before the main jqplot file, though - right now only the mobile version of jQuery is loading before jqplot. Please see this answer for more detail.
If jqplot is loading but the data is not present, or possibly the data or chart code has a bug, you will see a blank space in the page where the chart should be. Make sure that you can load a static chart page hand-assembled with the data you are getting from your PHP page. This will test the data and the includes.
If jqplot is not loading at all (for example if dependencies are not loaded in correct order) you will not see any empty space for the chart at all on your page and it will be rendered with zero space where the chart should be.
It looks like you are calling the chart div correctly. However I am not sure if $(document).bind("mobileinit",function() is working. The base call for jqplot is normally
$(document).ready(function(). Setting up charts in divs that aren't initially visible when the page is rendered can be tricky. This question might help if that's what the problem is.

Answer 2

See this related question about jQuery Mobile rendering content after page is initialized. Basically you can use .trigger('create') per naugtur's comment.

Answer 3

There is an easier way (worked in my case):
-first: delare your plot container div outside of any page (for example just below body tag):
<body>
<div id="plotContainer"></div>
...
-then: set the plot (Chart) in your $(document).ready(function(){ ... here ... }); and hide it so it will not show between pages:
$("#jqxChart").jqxChart(settings);
$("#jqxChart").hide();
-finaly: just copy the div with the plot inside your page:
<script>
$('#page_ID').bind('pageshow', function(data) {
$("#jqxChart").appendTo("#ID_of_DIV_you_want");
$("#jqxChart").show();
$('#jqxChart').jqxChart('refresh');
});
</script>
Hope this helps!!!