Javascript amcharts stacked bar chart click handler

Question

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"
}
]
    }
);

score 5 · Accepted Answer · answered Jul 09 '14 at 12:39

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);
}

Javascript amcharts stacked bar chart click handler

1 Answers1