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>