Highcharts and jQuery Mobile Pages

Question

I already tried everything from here.

Loading before, loading after

Using

$(document).delegate("#index", "pagecreate", function()

Using

$(document).on('pageshow', '#index', function()

But no luck at all, the charts does not show up after changing pages. For pages I'm using another html pages.

Like

<a href="mobile_page1.html" data-transition="slide">left</a>
<a href="mobile_page2.html" data-transition="slide">right</a>

I'm not using the same html page, the page changes but the charts does not open, only if I click to reload it

Does anyone know the secret for it?

Thanks :)

Answer 1

Have a look at this small example. http://jsfiddle.net/beRoberto/Mrgv2/

The container has to have a size

<div id="container" style="height:auto; width:95%;"></div>

The main idea is to include the proper libraries for the chart you are trying to implement. There is a difference between Highchart and Highstock so pick the appropriate library. Works like a charm.

Call the function to generate the chart on ready works well for me.

$(document).ready(function() {
var data = [];
for (var i = 0; i <= 20; i++) {
 data[i] = 20 + i;
}

//call th function to generate chart
makeChart(data);
});

UPDATE: Turn off AJAX navigation on the link by adding rel=external to the link

<a href="mobile_page1.html" data-transition="slide" rel=external>left</a>

Or by

<a href="mobile_page1.html" data-transition="slide" data-ajax="false">left</a>

The problem is that AJAX navigation is not loading your Highchart libraries, more on AJAX in this post: Remove ajax call from regular links with jQuery Mobile