am jqm

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div data-role="page" id="page1">
    <div id="header" data-role="header">
        <h1>Header 1</h1>
    </div>
    <div id="content" data-role="content"> <a href="#page2">Page 2</a>

    </div>
    <div id="footer" data-role="footer">
        <h1>Footer 1</h1>
    </div>
</div>
<div data-role="page" id="page2">
    <div id="header" data-role="header">
        <h1>Header 2</h1>
    </div>
    <div id="content" data-role="content">
        <p>am charts</p>
        <div id="chartdiv"></div>
    </div>
    <div id="footer" data-role="footer">
        <h1>Footer 2</h1>
    </div>
</div>

CSS

#chartdiv {
    width : 100%;
    min-height : 250px
}

JavaScript

$(document).on("pageshow", "#page2", function () {

     console.log("to load self swipe DATA");
     var chartData = generateChartData();
     var chart = AmCharts.makeChart("chartdiv", {
         "type": "serial",
             "panEventsEnabled": false,
             "pan": true,
             "theme": "light",
             "marginRight": 80,
             "autoMarginOffset": 20,
             "marginTop": 7,
             "dataProvider": chartData,
             "valueAxes": [{
             "axisAlpha": 0.2,
                 "dashLength": 1,
                 "position": "left"
         }],
             "mouseWheelZoomEnabled": true,
             "graphs": [{
             "id": "g1",
                 "balloonText": "[[category]]<br/><b><span style='font-size:14px;'>value: [[value]]</span></b>",
                 "bullet": "round",
                 "bulletBorderAlpha": 1,
                 "bulletColor": "#FFFFFF",
                 "hideBulletsCount": 50,
                 "title": "red line",
                 "valueField": "visits",
                 "useLineColorForBulletBorder": true
         }],
             "chartScrollbar": {
             "autoGridCount": true,
                 "graph": "g1",
                 "scrollbarHeight": 40
         },
             "chartCursor": {

         },
             "categoryField": "date",
             "categoryAxis": {
             "parseDates": true,
                 "axisColor": "#DADADA",
                 "dashLength": 1,
                 "minorGridEnabled": true
         },
             "export": {
             "enabled": true
         }
     });

     chart.addListener("rendered", zoomChart);
     zoomChart();


 });




 // this method is called when chart is first inited as we listen for "dataUpdated" event
 function zoomChart() {
     // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
     chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
 }


 // generate some random...