Jqplot Conflict With Jquerymobile
in a same html page i need to use jquerymobile (www.jquerymobile.com) and plot a simple chart with the jqplot js library (www.jqplot.com). I think i have a conflict issue between j
Solution 1:
Is a common issue, the workaround it´s buggy...
Don´t use document ready with jquerymobile, use pageInit()
In jquery forum found this thread, its works with static data but i never make it work jqplot with a json call on jquerymobile.
http://forum.jquery.com/topic/ajax-problem-jquery-mobile-with-jqplot
Good luck!
Solution 2:
Am loving jqplot, to use with jqmobile try this try this:
<script>
$('#thirdpage').live('pageshow', function() {
$.jqplot('chart1', [[[1, 4],[3,7.10],[5,6],[7,3],[9,95.9],[121,416]]]);
});
</script>
<!-- Page Three -->
<section id="thirdpage" data-role="page">
<header data-role="header">
<h1>Charts</h1>
</header>
<div data-role="content">
<a href="#firstpage" id="firstpage">PageOne</a>
<a href="#secondpagepage" id="secondpage">Page2</a>
<div id="chart1" style="height:300px; width:500px;"></div>
</div>
</section>
Solution 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!!!
Post a Comment for "Jqplot Conflict With Jquerymobile"