jqplot conflict with jquerymobile

StackOverflow https://stackoverflow.com/questions/8397651

Question

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 jqplot and jquerymobile, because the chart isn't displayed. But if i comment the jquerymobile script the chart became visible.

This is the part of my html code:

[...head...]
<link rel="stylesheet" type="text/css" href="jquery.jqplot.1.0.0b2_r792/dist/jquery.jqplot.css" /> 

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0/jquery.mobile-1.0.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script> 

[...script...]
$(document).ready(function () {
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

[...body...]
<div class="jqplot" id="chart1" style="height:300px;width:400px;"></div>

Any advise for overcome the conflict? maybe i miss something?

Thanks in advance, M.

Was it helpful?

Solution

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!

OTHER TIPS

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>

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!!!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top