ElementStacks

by hfrntt

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script src="http://highcharts.com/js/testing.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<div data-role="page" id="main"> 
    
    <div data-role="header">
        <h1>Highcharts with jQuery Mobile</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>
            <a href="#chart" data-role="button">Open the chart</a>
        </p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div>

<!-- Start of second page -->
<div data-role="page" id="chart">

    <div data-role="header">
        <h1>Bar</h1>
    </div><!-- /header -->

    <div data-role="content">
        <div class="chart-container">
            <div id="container"></div>
        </div>
        <a href="#chart" data-role="button" data-rel="back">Back</a>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

CSS

.chart-container {
    width: 100%;
}

JavaScript

var chart, options = {
    chart: {
        renderTo: 'container'
    },
    
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 
               135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
};

$(function(){
    
    $( document ).bind( "pagechange", function( event, data ){
        if (data.toPage[0].id === 'chart')
            chart = new Highcharts.Chart(options);
    });
});