CODEWITHSUNDEEP
angularjsonclickamcharts
user3335796
user3335796

Reputation: 1237

Am charts on click event using angularjs

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,
        }]
    }

});

Upvotes: 0

Views: 1004

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

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/

Upvotes: 1

Related Questions