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>