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 Data Loader 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="../dataloader.min.js"></script> 11 <style> 12 body, html { 13 font-family: Verdana; 14 font-size: 12px; 15 } 16 #chartdiv { 17 width: 100%; 18 height: 500px; 19 } 20 </style> 21 <script> 22 var chart = AmCharts.makeChart("chartdiv", { 23 "type": "serial", 24 "dataLoader": { 25 "url": "data/serial.csv", 26 "format": "csv", 27 "showCurtain": true, 28 "showErrors": true, 29 "async": true, 30 "reload": 10, 31 "timestamp": true, 32 "delimiter": ",", 33 "useColumnNames": true 34 }, 35 "rotate": false, 36 "marginTop": 10, 37 "categoryField": "year", 38 "categoryAxis": { 39 "gridAlpha": 0.07, 40 "axisColor": "#DADADA", 41 "startOnAxis": false, 42 "title": "Year", 43 "guides": [{ 44 "category": "2001", 45 "lineColor": "#CC0000", 46 "lineAlpha": 1, 47 "dashLength": 2, 48 "inside": true, 49 "labelRotation": 90, 50 "label": "fines for speeding increased" 51 }, { 52 "category": "2007", 53 "lineColor": "#CC0000", 54 "lineAlpha": 1, 55 "dashLength": 2, 56 "inside": true, 57 "labelRotation": 90, 58 "label": "motorcycle fee introduced" 59 }] 60 }, 61 "valueAxes": [{ 62 "stackType": "regular", 63 "gridAlpha": 0.07, 64 "title": "Traffic incidents" 65 }], 66 "graphs": [{ 67 "id": "g1", 68 "type": "column", 69 "title": "Cars", 70 "valueField": "cars", 71 "bullet": "round", 72 "lineAlpha": 0, 73 "fillAlphas": 0.6 74 }, { 75 "id": "g2", 76 "type": "column", 77 "title": "Motorcycles", 78 "valueField": "motorcycles", 79 "lineAlpha": 0, 80 "fillAlphas": 0.6 81 }, { 82 "id": "g3", 83 "type": "column", 84 "title": "Bicycles", 85 "valueField": "bicycles", 86 "lineAlpha": 0, 87 "fillAlphas": 0.6 88 }], 89 "legend": { 90 "position": "bottom", 91 "valueText": "[[value]]", 92 "valueWidth": 100, 93 "valueAlign": "left", 94 "equalWidths": false, 95 "periodValueText": "total: [[value.sum]]" 96 }, 97 "chartCursor": { 98 "cursorAlpha": 0 99 }, 100 "chartScrollbar": { 101 "color": "FFFFFF" 102 } 103 104 }); 105 </script> 106 </head> 107 108 <body> 109 <div id="chartdiv"></div> 110 </body> 111 112</html>