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/themes/dark.js"></script> 11 <script src="../dataloader.min.js"></script> 12 <style> 13 body, html { 14 font-family: Verdana; 15 font-size: 12px; 16 background-color:#282828; 17 } 18 #chartdiv { 19 width: 100%; 20 height: 500px; 21 } 22 </style> 23 <script> 24 var chart = AmCharts.makeChart("chartdiv", { 25 "type": "serial", 26 "theme": "dark", 27 "dataLoader": { 28 "url": "data/serial2.json", 29 "showErrors": true, 30 "complete": function ( chart ) { 31 console.log( "Loading complete" ); 32 }, 33 "load": function ( options, chart ) { 34 console.log( "File loaded: ", options.url ); 35 }, 36 "error": function ( options, chart ) { 37 console.log( "Error occured loading file: ", options.url ); 38 } 39 }, 40 "categoryField": "year", 41 "startDuration": 1, 42 "rotate": true, 43 "categoryAxis": { 44 "gridPosition": "start" 45 }, 46 "valueAxes": [{ 47 "position": "top", 48 "title": "Million USD", 49 "minorGridEnabled": true 50 }], 51 "graphs": [{ 52 "type": "column", 53 "title": "Income", 54 "valueField": "income", 55 "fillAlphas":1, 56 "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>" 57 }, { 58 "type": "line", 59 "title": "Expenses", 60 "valueField": "expenses", 61 "lineThickness": 2, 62 "bullet": "round", 63 "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>" 64 }], 65 "legend": { 66 "useGraphSettings": true 67 }, 68 "creditsPosition": "top-right", 69 "responsive": { 70 "enabled": true 71 } 72 }); 73 74 function reloadData() { 75 chart.dataLoader.loadData(); 76 } 77 </script> 78 </head> 79 80 <body> 81 <div id="chartdiv"></div> 82 <input type="button" value="Trigger data reload" onclick="reloadData();" /> 83 </body> 84 85</html>