1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3
4<head>
5  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7  <title>amCharts Responsive Example</title>
8  <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
9  <script src="http://www.amcharts.com/lib/3/serial.js"></script>
10  <script src="../responsive.min.js"></script>
11  <style>
12  body, html {
13    height: 100%;
14    padding: 0;
15    margin: 0;
16  }
17  </style>
18  <script>
19
20    var chartData = [];
21    generateChartData();
22
23    var chart = AmCharts.makeChart("chartdiv", {
24      "type": "serial",
25      "dataProvider": chartData,
26      "categoryField": "date",
27      "categoryAxis": {
28        "parseDates": true,
29        "gridAlpha": 0.15,
30        "minorGridEnabled": true,
31        "axisColor": "#DADADA"
32      },
33      "valueAxes": [{
34        "axisAlpha": 0.2,
35        "id": "v1"
36      }],
37      "graphs": [{
38        "title": "red line",
39        "id": "g1",
40        "valueAxis": "v1",
41        "valueField": "visits",
42        "bullet": "round",
43        "bulletBorderColor": "#FFFFFF",
44        "bulletBorderAlpha": 1,
45        "lineThickness": 2,
46        "lineColor": "#b5030d",
47        "negativeLineColor": "#0352b5",
48        "balloonText": "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"
49      }],
50      "chartCursor": {
51        "fullWidth": true,
52        "cursorAlpha": 0.1
53      },
54      "chartScrollbar": {
55        "scrollbarHeight": 40,
56        "color": "#FFFFFF",
57        "autoGridCount": true,
58        "graph": "g1"
59      },
60      "mouseWheelZoomEnabled": true,
61      "responsive": {
62        "enabled": true
63      }
64    });
65
66    chart.addListener("dataUpdated", zoomChart);
67
68
69    // generate some random data, quite different range
70    function generateChartData() {
71      var firstDate = new Date();
72      firstDate.setDate(firstDate.getDate() - 500);
73
74      for (var i = 0; i < 500; i++) {
75        // we create date objects here. In your data, you can have date strings
76        // and then set format of your dates using chart.dataDateFormat property,
77        // however when possible, use date objects, as this will speed up chart rendering.
78        var newDate = new Date(firstDate);
79        newDate.setDate(newDate.getDate() + i);
80
81        var visits = Math.round(Math.random() * 40) - 20;
82
83        chartData.push({
84            date: newDate,
85            visits: visits
86        });
87      }
88    }
89
90    // this method is called when chart is first inited as we listen for "dataUpdated" event
91    function zoomChart() {
92      // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
93      chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
94    }
95
96  </script>
97</head>
98
99<body>
100  <div id="chartdiv" style="width: 100%; height: 100%;"></div>
101</body>
102
103</html>