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>