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/pie.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    AmCharts.makeChart("chartdiv", {
23      "type": "pie",
24      "dataLoader": {
25        "url": "data/pie.csv",
26        "format": "csv",
27        "delimiter": ",",
28        "useColumnNames": true
29     },
30      "titleField": "country",
31      "valueField": "litres",
32      "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
33      "innerRadius": "30%",
34      "legend": {
35        "align": "center",
36        "markerType": "circle"
37      },
38      "responsive": {
39        "enabled": true,
40        "addDefaultRules": true,
41        "rules": [
42          {
43            "minWidth": 500,
44            "overrides": {
45              "innerRadius": "50%",
46            }
47          }
48        ]
49      }
50    });
51  </script>
52</head>
53
54<body>
55  <div id="chartdiv"></div>
56</body>
57
58</html>