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