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