Get segment properties in amcharts gantt by doubleclicking - amcharts

Question

I want to set a hidden ID for each segment in an am-charts gantt chart. So when the user double clicks a segment i want to retrieve data using that ID and show in a popup window.
"dataProvider": [ {
"category": "John",
"segments": [ {
"start": "2018-01-01",
"end": "2018-01-10",
"color": "#f00",
"task": "Task #1",
"key": "1000"
}, {
"start": "2018-01-12",
"end": "2018-01-20",
"color": "#00f",
"task": "Task #2",
"key": "1001"
}, {
"start": "2018-01-25",
"end": "2018-02-10",
"color": "33800F",
"task": "Task #3",
"key": "1002"
} ]
} ]
I am able to get the Category value but don't know how to get Segments values.
Any example would be a great help

Answer 1

If you're using clickGraphItem for your double-click functionality, you can access the segment information through the graph's segmentData property in the event object:
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
alert(e.graph.segmentData.key)
}
}]
Demo below:
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "gantt",
"theme": "light",
"marginRight": 70,
"period": "hh",
"dataDateFormat": "YYYY-MM-DD",
"balloonDateFormat": "JJ:NN",
"columnWidth": 0.5,
"valueAxis": {
"type": "date",
"minimum": 7,
"maximum": 31
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "<b>[[task]]</b>: [[open]] [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2015-01-01",
"startField": "start",
"endField": "end",
"durationField": "duration",
"dataProvider": [{
"category": "John",
"segments": [{
"start": 7,
"duration": 2,
"color": "#46615e",
"task": "Task #1",
"key": "1001"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1002"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3",
"key": "1003"
}]
}, {
"category": "Smith",
"segments": [{
"start": 10,
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1004"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3",
"key": "1005"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1",
"key": "1006"
}]
}, {
"category": "Ben",
"segments": [{
"start": 12,
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1007"
}, {
"start": 16,
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4",
"key": "1008"
}]
}],
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
alert("key: " + e.graph.segmentData.key)
}
}]
});
body,
html {
width: 100%;
height: 100%;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/gantt.js"></script>
<div id="chartdiv"></div>