<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="../responsive.min.js"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script>
var chartData = [];
generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": chartData,
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"gridAlpha": 0.15,
"minorGridEnabled": true,
"axisColor": "#DADADA"
},
"valueAxes": [{
"axisAlpha": 0.2,
"id": "v1"
}],
"graphs": [{
"title": "red line",
"id": "g1",
"valueAxis": "v1",
"valueField": "visits",
"bullet": "round",
"bulletBorderColor": "#FFFFFF",
"bulletBorderAlpha": 1,
"lineThickness": 2,
"lineColor": "#b5030d",
"negativeLineColor": "#0352b5",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"
}],
"chartCursor": {
"fullWidth": true,
"cursorAlpha": 0.1
},
"chartScrollbar": {
"scrollbarHeight": 40,
"color": "#FFFFFF",
"autoGridCount": true,
"graph": "g1"
},
"mouseWheelZoomEnabled": true,
"responsive": {
"enabled": true
}
});
chart.addListener("dataUpdated", zoomChart);
// generate some random data, quite different range
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);
for (var i = 0; i < 500; i++) {
// we create date objects here. In your data, you can have date strings
// and then set format of your dates using chart.dataDateFormat property,
// however when possible, use date objects, as this will speed up chart rendering.
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var visits = Math.round(Math.random() * 40) - 20;
chartData.push({
date: newDate,
visits: visits
});
}
}
// 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);
}
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>