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>