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/gantt.js"></script> 11 <script src="http://www.amcharts.com/lib/3/themes/light.js"></script> 12 <script src="../dataloader.min.js"></script> 13 <style> 14 body, html { 15 font-family: Verdana; 16 font-size: 12px; 17 } 18 #chartdiv { 19 width: 100%; 20 height: 500px; 21 } 22 </style> 23 <script> 24 AmCharts.useUTC = true; 25 var chart = AmCharts.makeChart("chartdiv", { 26 "type": "gantt", 27 "theme": "light", 28 "dataLoader": { 29 "url": "data/gantt.json" 30 }, 31 "dataProvider": [], 32 "period": "hh", 33 "dataDateFormat": "YYYY-MM-DD", 34 "balloonDateFormat": "JJ:NN", 35 "columnWidth": 0.5, 36 "valueAxis": { 37 "type": "date", 38 "minimum": 7, 39 "maximum": 31 40 }, 41 "brightnessStep": 10, 42 "graph": { 43 "fillAlphas": 1, 44 "balloonText": "<b>[[task]]</b>: [[open]] [[value]]" 45 }, 46 "rotate": true, 47 "categoryField": "category", 48 "segmentsField": "segments", 49 "colorField": "color", 50 "startDate": "2015-01-01", 51 "startField": "start", 52 "endField": "end", 53 "durationField": "duration", 54 "chartScrollbar": {}, 55 "chartCursor": { 56 "valueBalloonsEnabled": false, 57 "cursorAlpha": 0.1, 58 "valueLineBalloonEnabled": true, 59 "valueLineEnabled": true, 60 "fullWidth": true 61 } 62 }); 63 </script> 64 </head> 65 66 <body> 67 <div id="chartdiv"></div> 68 </body> 69 70</html>