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="http://www.amcharts.com/lib/3/amstock.js"></script>
11    <script src="../dataloader.min.js"></script>
12    <style>
13    body, html {
14      font-family: Verdana;
15      font-size: 12px;
16      background: #000;
17    }
18    #chartdiv {
19      width: 100%;
20      height: 500px;
21      position: relative;
22    }
23    #chartdiv .amChartsPeriodSelector {
24      padding-left: 35px;
25    }
26    .amChartsButtonSelected {
27      font-weight: bold;
28    }
29    .amChartsButton {
30      color: #fff;
31      background: transparent;
32      opacity: 0.7;
33      border: 1px solid rgba(255,255,2555,.3);
34      -moz-border-radius: 5px;
35      border-radius: 5px;
36      margin: 1px;
37      outline: none;
38      box-sizing: border-box;
39    }
40    .amChartsInputField {
41      color: #000;
42    }
43    </style>
44    <script>
45    var chart = AmCharts.makeChart("chartdiv", {
46      "type": "stock",
47      "color": "#fff",
48      "dataSets": [{
49      "title": "MSFT",
50        "fieldMappings": [{
51          "fromField": "Open",
52          "toField": "open"
53        }, {
54          "fromField": "High",
55          "toField": "high"
56        }, {
57          "fromField": "Low",
58          "toField": "low"
59        }, {
60          "fromField": "Close",
61          "toField": "close"
62        }, {
63          "fromField": "Volume",
64          "toField": "volume"
65        }],
66        "compared": false,
67        "categoryField": "Date",
68
69        /**
70         * data loader for data set data
71         */
72        "dataLoader": {
73          "url": "data/MSFT.csv",
74          "format": "csv",
75          "showCurtain": true,
76          "showErrors": true,
77          "async": true,
78          "reverse": true,
79          "delimiter": ",",
80          "useColumnNames": true
81       },
82
83       /**
84        * data loader for events data
85        */
86        "eventDataLoader": {
87          "url": "data/MSFT_events.csv",
88          "format": "csv",
89          "showCurtain": true,
90          "showErrors": true,
91          "async": true,
92          "reverse": true,
93          "delimiter": ",",
94          "useColumnNames": true,
95          "postProcess": function ( data ) {
96            for ( var x in data ) {
97              switch( data[x].Type ) {
98                case 'A':
99                  var color = "#85CDE6";
100                  break;
101                default:
102                  var color = "#cccccc";
103                  break;
104              }
105              data[x].Description = data[x].Description.replace( "Upgrade", "<strong style=\"color: #0c0\">Upgrade</strong>" ).replace( "Downgrade", "<strong style=\"color: #c00\">Downgrade</strong>" );
106              data[x] = {
107                type: "pin",
108                graph: "g1",
109                backgroundColor: color,
110                date: data[x].Date,
111                text: data[x].Type,
112                description: "<strong>" + data[x].Title + "</strong><br />" + data[x].Description
113              };
114            }
115            return data;
116          }
117       }
118
119      }, {
120      "title": "TXN",
121        "fieldMappings": [{
122          "fromField": "Open",
123          "toField": "open"
124        }, {
125          "fromField": "High",
126          "toField": "high"
127        }, {
128          "fromField": "Low",
129          "toField": "low"
130        }, {
131          "fromField": "Close",
132          "toField": "close"
133        }, {
134          "fromField": "Volume",
135          "toField": "volume"
136        }],
137        "compared": true,
138        "categoryField": "Date",
139        "dataLoader": {
140          "url": "data/TXN.csv",
141          "format": "csv",
142          "showCurtain": true,
143          "showErrors": true,
144          "async": true,
145          "reverse": true,
146          "delimiter": ",",
147          "useColumnNames": true
148       }
149      }],
150      "dataDateFormat": "YYYY-MM-DD",
151
152      "panels": [{
153          "title": "Value",
154          "percentHeight": 70,
155
156          "stockGraphs": [{
157            "type": "candlestick",
158            "id": "g1",
159            "openField": "open",
160            "closeField": "close",
161            "highField": "high",
162            "lowField": "low",
163            "valueField": "close",
164            "lineColor": "#fff",
165            "fillColors": "#fff",
166            "negativeLineColor": "#db4c3c",
167            "negativeFillColors": "#db4c3c",
168            "fillAlphas": 1,
169            "comparedGraphLineThickness": 2,
170            "columnWidth": 0.7,
171            "useDataSetColors": false,
172            "comparable": true,
173            "compareField": "close",
174            "showBalloon": false,
175            "proCandlesticks": true
176          }],
177
178          "stockLegend": {
179            "valueTextRegular": undefined,
180            "periodValueTextComparing": "[[percents.value.close]]%"
181          }
182
183        },
184
185        {
186          "title": "Volume",
187          "percentHeight": 30,
188          "marginTop": 1,
189          "columnWidth": 0.6,
190          "showCategoryAxis": false,
191
192          "stockGraphs": [{
193            "valueField": "volume",
194            "openField": "open",
195            "type": "column",
196            "showBalloon": false,
197            "fillAlphas": 1,
198            "lineColor": "#fff",
199            "fillColors": "#fff",
200            "negativeLineColor": "#db4c3c",
201            "negativeFillColors": "#db4c3c",
202            "useDataSetColors": false
203          }],
204
205          "stockLegend": {
206            "markerType": "none",
207            "markerSize": 0,
208            "labelText": "",
209            "periodValueTextRegular": "[[value.close]]"
210          },
211
212          "valueAxes": [{
213            "usePrefixes": true
214          }]
215        }
216      ],
217
218      "panelsSettings": {
219        "color": "#fff",
220        "plotAreaFillColors": "#333",
221        "plotAreaFillAlphas": 1,
222        "marginLeft": 60,
223        "marginTop": 5,
224        "marginBottom": 5
225      },
226
227      "chartScrollbarSettings": {
228        "graph": "g1",
229        "graphType": "line",
230        "usePeriod": "WW",
231        "backgroundColor": "#333",
232        "graphFillColor": "#666",
233        "graphFillAlpha": 0.5,
234        "gridColor": "#555",
235        "gridAlpha": 1,
236        "selectedBackgroundColor": "#444",
237        "selectedGraphFillAlpha": 1
238      },
239
240      "categoryAxesSettings": {
241        "equalSpacing": true,
242        "gridColor": "#555",
243        "gridAlpha": 1
244      },
245
246      "valueAxesSettings": {
247        "gridColor": "#555",
248        "gridAlpha": 1,
249        "inside": false,
250        "showLastLabel": true
251      },
252
253      "chartCursorSettings": {
254        "pan": true,
255        "valueLineEnabled": true,
256        "valueLineBalloonEnabled": true
257      },
258
259      "legendSettings": {
260        "color": "#fff"
261      },
262
263      "stockEventsSettings": {
264        "showAt": "high",
265        "type": "pin"
266      },
267
268      "balloon": {
269        "textAlign": "left",
270        "offsetY": 10
271      },
272
273      "periodSelector": {
274        "position": "bottom",
275        "periods": [{
276          "period": "DD",
277          "count": 10,
278          "label": "10D"
279        }, {
280          "period": "MM",
281          "count": 1,
282          "label": "1M"
283        }, {
284          "period": "MM",
285          "count": 6,
286          "label": "6M"
287        }, {
288          "period": "YYYY",
289          "count": 1,
290          "label": "1Y"
291        }, {
292          "period": "YYYY",
293          "count": 2,
294          "selected": true,
295          "label": "2Y"
296        }, {
297          "period": "YTD",
298          "label": "YTD"
299        }, {
300          "period": "MAX",
301          "label": "MAX"
302        }]
303      }
304    });
305    </script>
306  </head>
307
308  <body>
309    <div id="chartdiv"></div>
310  </body>
311
312</html>