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