Gantt chart with external data
This demo shows a Gantt chart with externally-loaded JSON data.
It uses built-in net.load utility to load and parse data, as well as a data processor to parse dates and color codes in data.
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");root.dateFormatter.setAll({ dateFormat: "yyyy-MM-dd", dateFields: ["valueX", "openValueX"]});
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: "panX", wheelY: "zoomX", layout: root.verticalLayout }));
// Add legend// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/var legend = chart.children.push( am5.Legend.new(root, { centerX: am5.p50, x: am5.p50 }));
var colors = chart.get("colors");
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var yAxis = chart.yAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "category", renderer: am5xy.AxisRendererY.new(root, { inversed: true }), tooltip: am5.Tooltip.new(root, { themeTags: ["axis"], animationDuration: 200 }) }));
var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "minute", count: 1 }, renderer: am5xy.AxisRendererX.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var series = chart.series.push( am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis, openValueXField: "fromDate", valueXField: "toDate", categoryYField: "category", sequencedInterpolation: true }));
series.columns.template.setAll({ templateField: "columnSettings", strokeOpacity: 0, tooltipText: "{category}: {openValueX.formatDate('yyyy-MM-dd HH:mm')} - {valueX.formatDate('yyyy-MM-dd HH:mm')}"});
series.data.processor = am5.DataProcessor.new(root, { dateFields: ["fromDate", "toDate"], dateFormat: "yyyy-MM-dd HH:mm", colorFields: ["columnSettings.fill"]});
// Add scrollbarschart.set( "scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
am5.net .load("https://docs.amcharts.com/assets/gantt_data.json") .then(function (result) { var data = am5.JSONParser.parse(result.response); var categories = []; am5.array.each(data, function (item) { if (categories.indexOf(item.category) == -1) { categories.push(item.category); } }); am5.array.each(categories, function (category, index) { categories[index] = { category: category }; }); yAxis.data.setAll(categories); series.data.setAll(data); }) .catch(function (result) { // Error console.log("Error loading " + result.xhr.responseURL); });
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/series.appear();chart.appear(1000, 100);<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 95vh;}{ "type": "XYChart", "settings": { "panX": false, "panY": false, "wheelX": "panX", "wheelY": "zoomX", "layout": { "type": "VerticalLayout" }, "scrollbarX": { "type": "Scrollbar", "settings": { "orientation": "horizontal" } } }, "properties": { "series": [ "#series-0" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ] }, "children": [ { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 50 }, "x": { "type": "Percent", "value": 50 } }, "properties": { "data": [] } } ], "refs": [ { "data-0": [ { "category": "John", "fromDate": 1514786400000, "toDate": 1514793600000, "columnSettings": { "fill": { "type": "Color", "value": "#67b7dc" }, "__parse": true }, "__parse": true }, { "category": "John", "fromDate": 1514800800000, "toDate": 1514811600000, "columnSettings": { "fill": { "type": "Color", "value": "#75c5ea" }, "__parse": true }, "__parse": true }, { "category": "John", "fromDate": 1514813400000, "toDate": 1514835000000, "columnSettings": { "fill": { "type": "Color", "value": "#83d3f8" }, "__parse": true }, "__parse": true }, { "category": "Jane", "fromDate": 1514790000000, "toDate": 1514800800000, "columnSettings": { "fill": { "type": "Color", "value": "#6771dc" }, "__parse": true }, "__parse": true }, { "category": "Jane", "fromDate": 1514804400000, "toDate": 1514818800000, "columnSettings": { "fill": { "type": "Color", "value": "#757fea" }, "__parse": true }, "__parse": true }, { "category": "Peter", "fromDate": 1514797200000, "toDate": 1514815200000, "columnSettings": { "fill": { "type": "Color", "value": "#a367dc" }, "__parse": true }, "__parse": true }, { "category": "Peter", "fromDate": 1514815200000, "toDate": 1514826000000, "columnSettings": { "fill": { "type": "Color", "value": "#b175ea" }, "__parse": true }, "__parse": true }, { "category": "Katie", "fromDate": 1514815200000, "toDate": 1514829600000, "columnSettings": { "fill": { "type": "Color", "value": "#dc67ce" }, "__parse": true }, "__parse": true }, { "category": "Katie", "fromDate": 1514831400000, "toDate": 1514844000000, "columnSettings": { "fill": { "type": "Color", "value": "#ea75dc" }, "__parse": true }, "__parse": true }, { "category": "Michael", "fromDate": 1514804400000, "toDate": 1514844000000, "columnSettings": { "fill": { "type": "Color", "value": "#dc6788" }, "__parse": true }, "__parse": true } ] }, { "data-1": [ { "category": "John" }, { "category": "Jane" }, { "category": "Peter" }, { "category": "Katie" }, { "category": "Michael" } ] }, { "axis-0": { "type": "DateAxis", "settings": { "baseInterval": { "timeUnit": "minute", "count": 1 }, "renderer": { "type": "AxisRendererX" } } } }, { "axis-1": { "type": "CategoryAxis", "settings": { "categoryField": "category", "renderer": { "type": "AxisRendererY", "settings": { "inversed": true } }, "tooltip": { "type": "Tooltip", "settings": { "themeTags": [ "axis" ], "animationDuration": 200 } } }, "properties": { "data": "#data-1" } } }, { "series-0": { "type": "ColumnSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-1", "openValueXField": "fromDate", "valueXField": "toDate", "categoryYField": "category", "sequencedInterpolation": true }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "templateField": "columnSettings", "strokeOpacity": 0, "tooltipText": "{category}: {openValueX.formatDate('yyyy-MM-dd HH:mm')} - {valueX.formatDate('yyyy-MM-dd HH:mm')}" } } } } } } } ], "root": { "properties": { "dateFormatter": { "settings": { "dateFormat": "yyyy-MM-dd", "dateFields": [ "valueX", "openValueX" ] } } } }}gantt-chart-with-external-data