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"> 
    
    <div data-role="header">
        <h1>Highcharts &amp; jQuery Mobile</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <div data-role="controlgroup">
            <a href="#line" data-role="button">Line chart</a>
            <a href="#bar" data-role="button">Bar chart</a>
            <a href="#column" data-role="button">Column chart</a>
            <a href="#pie" data-role="button">Pie chart</a>
        </div>
    </div><!-- /content -->

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


<div data-role="page" id="line" data-add-back-btn="true">

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

    <div data-role="content">
        <div class="container"></div>
    </div><!-- /content -->

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



<div data-role="page" id="bar" data-add-back-btn="true">

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

    <div data-role="content">
        <div class="container"></div>
    </div><!-- /content -->

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



<div data-role="page" id="column" data-add-back-btn="true">

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

    <div data-role="content">
        <div class="container"></div>
    </div><!-- /content -->

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

JavaScript

var chart, options = {
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
    }]
};
$(function(){
    $( document ).bind("pagechange", function( event, data ){
        console.log('change');
        if ( $.inArray(data.toPage[0].id, ['line', 'pie', 'column', 'bar']) > -1 )
            chart = new Highcharts.Chart($.extend(true, {}, options, {
                chart: {
                    renderTo: $('.container', data.toPage[0])[0],
                    type: data.toPage[0].id
                }
            }));
    });
    
    $(document).triggerHandler('pagechange');
});