Laziale Laziale - 1 month ago 32
AngularJS Question

chart.js chart-click pass parameter in angular controller

I'm using chart.js/angular-chart.js to display some data in pie charts.

I need functionality where when a user will click on a label within the chart pie the click event will copy over the selected chart value.

I'm able to trigger the event by this action:

$scope.chartClick = function() {
alert('ok');
}


And this is the markup I have:

<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" display="true" chart-click="chartClick()" chart-options="options"></canvas>


Any idea how I can pass some parameter to that event to actually get the value?

Thanks in advance, Laziale

EDIT:

Full controller:

.controller('InvestorLtvReportController', [
'$scope', '$http', '$state', function ($scope, $http, $state) {
$scope.labels = [];
$scope.data = [];
$scope.options = {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: 'rgb(255, 99, 132)'
}
}
};

$scope.chartClick = function (points, evt) {
console.log(points, evt);
};

$http({
url: 'http://myapi/api/Manage/GetUserRole',
method: "GET"
}).success(function (data, status) {
$scope.isInvestor = false;
angular.forEach(data, function (value, key) {
if (value == 'Investor') {
$scope.isInvestor = true;
}
});

if (!$scope.isInvestor) {
$state.go('accountlogin');
} else {
$http({
url: 'http://myapi/api/investor/GetInvestorLtvReport',
method: "GET"
}).success(function (data, status) {

angular.forEach(data, function (value, key) {
$scope.labels.push(value.Amortisation);
$scope.data.push(value.PercOfFund);
});
}).error(function (data, status) {
console.log(data);
});
}
})
}
])

Answer

You can do this,

<canvas id="pie" chart-click="onClick" class="chart chart-pie"chart-data="data" chart-labels="labels"></canvas> 

Controller:

app.controller('AppCtrl', ['$scope', function($scope){
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
   $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
}]); 

DEMO