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.json", 26 "format": "json", 27 "showErrors": true, 28 "noStyles": true, 29 "async": true 30 }, 31 "rotate": false, 32 "marginTop": 10, 33 "categoryField": "year", 34 "categoryAxis": { 35 "gridAlpha": 0.07, 36 "axisColor": "#DADADA", 37 "startOnAxis": false, 38 "title": "Year", 39 "guides": [{ 40 "category": "2001", 41 "lineColor": "#CC0000", 42 "lineAlpha": 1, 43 "dashLength": 2, 44 "inside": true, 45 "labelRotation": 90, 46 "label": "fines for speeding increased" 47 }, { 48 "category": "2007", 49 "lineColor": "#CC0000", 50 "lineAlpha": 1, 51 "dashLength": 2, 52 "inside": true, 53 "labelRotation": 90, 54 "label": "motorcycle fee introduced" 55 }] 56 }, 57 "valueAxes": [{ 58 "stackType": "regular", 59 "gridAlpha": 0.07, 60 "title": "Traffic incidents" 61 }], 62 "graphs": [{ 63 "id": "g1", 64 "type": "column", 65 "title": "Cars", 66 "valueField": "cars", 67 "bullet": "round", 68 "lineAlpha": 0, 69 "fillAlphas": 0.6 70 }, { 71 "id": "g2", 72 "type": "column", 73 "title": "Motorcycles", 74 "valueField": "motorcycles", 75 "lineAlpha": 0, 76 "fillAlphas": 0.6 77 }, { 78 "id": "g3", 79 "type": "column", 80 "title": "Bicycles", 81 "valueField": "bicycles", 82 "lineAlpha": 0, 83 "fillAlphas": 0.6 84 }], 85 "legend": { 86 "position": "bottom", 87 "valueText": "[[value]]", 88 "valueWidth": 100, 89 "valueAlign": "left", 90 "equalWidths": false, 91 "periodValueText": "total: [[value.sum]]" 92 }, 93 "chartCursor": { 94 "cursorAlpha": 0 95 }, 96 "chartScrollbar": { 97 "color": "FFFFFF" 98 } 99 100 }); 101 </script> 102 </head> 103 104 <body> 105 <div id="chartdiv"></div> 106 </body> 107 108</html>