Trouble loading a Highcharts on divs that are in different pages

Question

Well i am developing an application with phonegap, i´m using media query to identify the different resolution of the cellphones and tablets. My views are different depends if it is a cellphone or tablet, when the device is a cellphone i want to show a highcharts chart in a different page that is load with a navbar, and when i`m in a tablet i want that the chart appears in the first page.

I don´t know what is the best way to do this and get the best performance. The chart i`m using is the example give it by Highcharts:

function graph(){
$(function() {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container' 
            },
            rangeSelector : {
                selected : 1
            },
            title : {
                text : 'AAPL Stock Price'
            },
            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
      });
    });
}

I want that chart to be loaded in a div called container in the first page(if it is a tablet) or to be loaded in a div with the same name but in other page (if it is a smartphone).

Actually the chart is loaded only for the tablets in the first page and not in the second one, i don´t want to call the function 2 times if it is a better way to do it. Hope you can help me. Regards.

Answer 1

Don't how exactly you are changing the html of the page for tablet and cellphone. Check if you do have html of both page even if you are not showing. That might be the issue here.

However, what you can do is, change he name of both containers for cellphone page and tablet page(ex. containerCellPhone , containerTablet ). And after detecting device type run the highchart code with renderTo property changed accordingly.

Hope i have understood your problem correctly.