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        "load": function( options, chart ) {
31          // Here the data is already loaded and set to the chart.
32          // We can iterate through it and add proper graphs
33          for ( var key in chart.dataProvider[ 0 ] ) {
34            if ( chart.dataProvider[ 0 ].hasOwnProperty( key ) && key != chart.categoryField ) {
35              var graph = new AmCharts.AmGraph();
36              graph.valueField = key;
37              graph.type = "line";
38              graph.title = key,
39              graph.lineThickness = 2;
40              chart.addGraph( graph );
41            }
42          }
43        }
44      },
45     "rotate": false,
46     "marginTop": 10,
47     "categoryField": "year",
48     "categoryAxis": {
49       "gridAlpha": 0.07,
50       "axisColor": "#DADADA",
51       "startOnAxis": false,
52       "title": "Year",
53       "guides": [{
54         "category": "2001",
55         "lineColor": "#CC0000",
56         "lineAlpha": 1,
57         "dashLength": 2,
58         "inside": true,
59         "labelRotation": 90,
60         "label": "fines for speeding increased"
61       }, {
62         "category": "2007",
63         "lineColor": "#CC0000",
64         "lineAlpha": 1,
65         "dashLength": 2,
66         "inside": true,
67         "labelRotation": 90,
68         "label": "motorcycle fee introduced"
69       }]
70     },
71     "valueAxes": [{
72       "stackType": "regular",
73       "gridAlpha": 0.07,
74       "title": "Traffic incidents"
75     }],
76     "graphs": [],
77     "legend": {
78       "position": "bottom",
79       "valueText": "[[value]]",
80       "valueWidth": 100,
81       "valueAlign": "left",
82       "equalWidths": false,
83       "periodValueText": "total: [[value.sum]]"
84     },
85     "chartCursor": {
86       "cursorAlpha": 0
87     },
88     "chartScrollbar": {
89       "color": "FFFFFF"
90     }
91
92    });
93    </script>
94  </head>
95
96  <body>
97    <div id="chartdiv"></div>
98  </body>
99
100</html>