Am charts on click event using angularjs

Question

I was working on Am-charts and I want to trigger a function on clicking on each graph and display its value in alert. I am not able to find on which graph I am clicking. Please some one suggest me way to get its value on click. See JSFiddle here

angular.module('amChartsDirectiveExample',['amChartsDirective']).controller('amChartsController', function ($scope) {
    $scope.amChartOptions = {
        data: [{
            year: 2005,
            income: 23.5,
            expenses: 18.1
        }, {
            year: 2006,
            income: 26.2,
            expenses: 22.8
        }, {
            year: 2007,
            income: 30.1,
            expenses: 23.9
        }, {
            year: 2008,
            income: 29.5,
            expenses: 25.1
        }, {
            year: 2009,
            income: 24.6,
            expenses: 25
        }],
        type: "serial",
        theme: 'black',
        categoryField: "year",
        rotate: true,
        pathToImages: 'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/images/',
        legend: {
            enabled: true
        },
        chartScrollbar: {
            enabled: true,
        },
        categoryAxis: {
            gridPosition: "start",
            parseDates: false
        },
        valueAxes: [{
            position: "top",
            title: "Million USD"
        }],
        graphs: [{
            type: "column",
            title: "Income",
            valueField: "income",
            fillAlphas: 1,
        }]
    }

});

tasseKATT · Accepted Answer · 2017-01-08 15:20:29Z

1

Add the following listener to your config:

listeners: [{
  event: "clickGraphItem",
  method: function(e) {

    console.log('Event object:', e);
    console.log('Clicked item:', e.item);
    console.log('Income:', e.item.dataContext.income);
  }
}]

Note that if you do something inside the event listener that interacts with Angular (scope modification for example), you need to call $scope.$apply() to trigger the digest loop manually.

Demo: http://jsfiddle.net/aggn062r/

answered Jan 8, 2017 at 15:20

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3335796 Over a year ago

This is working well with bar charts. Why i can not apply for stacked area charts. I mean i was implementing this listener for below link but event is not triggered. jsfiddle.net/sqt2Lb8c/1

tasseKATT Over a year ago

That is because an area is not a graph item. Bullets are graph items. Try clicking the bullets here: jsfiddle.net/na2L5dc1

Collectives™ on Stack Overflow

Am charts on click event using angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related