Michael Dombrowski Michael Dombrowski - 6 months ago 173
Javascript Question

Javascript amcharts stacked bar chart click handler

I need something like this javascript amCharts graph item click event
I am using AmCharts.makeChart, and cannot seem to integrate that previous answer.
Can someone please help in making the click handler work properly with this method of making amcharts?
Any help would be greatly appreciated.

Code I'm currently using:

AmCharts.makeChart("0",
{
"type": "serial",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"categoryField": "Not set",
"rotate": true,
"colors": [
"#45C40E",
"#E82323"
],
"startDuration": 1,
"startEffect": "easeOutSine",
"handDrawScatter": 4,
"handDrawThickness": 11,
"categoryAxis": {
"gridPosition": "start",
"position": "left",
"axisThickness": 0,
"labelFrequency": 0,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]]:[[value]]",
"bulletField": "Not set",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "Yes",
"type": "column",
"valueField": "column-1",
"visibleInLegend": false
},
{
"balloonText": "[[title]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "No",
"type": "column",
"valueField": "column-2",
"visibleInLegend": false
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"stackType": "100%",
"axisThickness": 0,
"gridThickness": 0,
"labelFrequency": 0,
"labelsEnabled": false,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0,
"title": ""
}
],
"allLabels": [],
"balloon": {},
"legend": {
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 22,
"text": ""

}
],
"dataProvider": [
{
"category": "category 1",
"column-1": "53",
"column-2": "13"
}
]
}
);

Answer

You must store chart in a variable and then add listener for clickGraphItem event:


var chart = AmCharts.makeChart("0", {
      "type": "serial",
      "pathToImages": "http://cdn.amcharts.com/lib/3/images/",
      "categoryField": "Not set",
      "rotate": true,
      "colors": [
          "#45C40E",
          "#E82323"
      ],
      "startDuration": 1,
      "startEffect": "easeOutSine",
      "handDrawScatter": 4,
      "handDrawThickness": 11,
      "categoryAxis": {
          "gridPosition": "start",
          "position": "left",
          "axisThickness": 0,
          "labelFrequency": 0,
          "showFirstLabel": false,
          "showLastLabel": false,
          "tickLength": 0
      },
      "trendLines": [],
      "graphs": [{
          "balloonText": "[[title]]:[[value]]",
          "bulletField": "Not set",
          "fillAlphas": 1,
          "id": "AmGraph-1",
          "title": "Yes",
          "type": "column",
          "valueField": "column-1",
          "visibleInLegend": false
      }, {
          "balloonText": "[[title]]:[[value]]",
          "fillAlphas": 1,
          "id": "AmGraph-2",
          "title": "No",
          "type": "column",
          "valueField": "column-2",
          "visibleInLegend": false
      }],
      "guides": [],
      "valueAxes": [{
          "id": "ValueAxis-1",
          "stackType": "100%",
          "axisThickness": 0,
          "gridThickness": 0,
          "labelFrequency": 0,
          "labelsEnabled": false,
          "showFirstLabel": false,
          "showLastLabel": false,
          "tickLength": 0,
          "title": ""
      }],
      "allLabels": [],
      "balloon": {},
      "legend": {
          "useGraphSettings": true
      },
      "titles": [{
          "id": "Title-1",
          "size": 22,
          "text": ""

      }],
      "dataProvider": [{
          "category": "category 1",
          "column-1": "53",
          "column-2": "13"
      }]
  });


chart.addListener("clickGraphItem", handleClick)

function handleClick(event){
    console.log(event);
}