How to add another graph to AmCharts Gantt to show custom icons - amcharts

Question

I have a gantt chart with a few minor tweaks but basically a clone of This gantt example with dates.
What I am trying to do is have a number of icons next to the segment based off some info included in the segment data. My case involves having 3 different binary variables and including different icons depending the values.
var chartData = [{
category: task.name,
segments: [
{
start: task.parallel ? lastStart : moment(latestEnd).format(string),
end: task.parallel ? moment(lastStart).add(time,'m').format(string) : moment(latestEnd).add(time,'m').format(string),
color: '#1C7DDB',
time: task.time,
indicator1: task.checkOne== 1 ? '../img/path_to_icon.svg' : '',
indicator2: task.checkTwo== 1 ? '../img/path_to_icon2.svg' : '',
indicator3: task.checkThree== 1 ? '../img/path_to_icon3.svg': ''
}
]
},
...
}]
So far this works OK when I set the customeBullet to one of the variables:
However I want to be able to have the ability to have all 3 (or none) of the icons shown.
I think what I need to do is add the segment data first then add the icons as three graphs to the gantt with no visible line.
My current chart init code is here, I tried changing graph: {} to graphs: [] but that causes an error.
var chart = AmCharts.makeChart( "plannerChart", {
"type": "gantt",
"marginRight": 70,
"period": "DD",
"dataDateFormat": "YYYY-MM-DD HH:mm",
"columnWidth": 0.75,
"addClassNames": true,
"valueAxis": {
"type": "date",
"guides": [
{
"value": AmCharts.stringToDate( start, "YYYY-MM-DD HH:NN"),
"toValue": AmCharts.stringToDate( moment(start).add(timeWindow,'h').format('YYYY-MM-DD HH:mm'), "YYYY-MM-DD HH:NN"),
"lineAlpha": 0.2,
"lineColor": guideColor,
"lineThickness": 3,
"fillAlpha": 0.1,
"fillColor": guideColor,
"label": "Available time",
"inside": false
}
]
},
"brightnessStep": 7,
"graph": {
"fillAlphas": 1,
"lineAlpha": 1,
"bulletOffset": 25,
"bulletSize": 20,
"customBulletField": "indicator1",
"lineColor": "#0F238C",
"fillAlphas": 0.85,
"balloonText": "<b>Start</b>: [[start]]<br /><b>Finish</b>: [[end]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDateField": "start",
"endDateField": "end",
"dataProvider": chartData,
"chartCursor": {
"cursorColor": "#0F238C",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable": false,
"valueZoomable": false
},
} );
}
Any help appreciated!
M

Answer 1

This isn't possible in a Gantt chart as it only takes a single graph object, as you noticed when trying to use an array.
You can emulate a Gantt chart by making a multi-segmented floating bar chart, using the graph's openField property to simulate where the column starts. You can extend this to add your additional graph objects for your indicators and use a date-based valueAxis for your values (note that valueAxes require date objects or millisecond timestamps, so strings won't work) or use relative values like in the demo. Note that this is a little clunker than the Gantt chart in that you have to define multiple graph objects to simulate the segments on the same category.