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>