current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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);
                    });
                }
            })
    }
])
share|improve this question
up vote 0 down vote accepted

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

share|improve this answer
    
Hi @sajeetharan thx for your help, I'm getting undefined undefined although I have labels as you can see from the screenshots i.gyazo.com/946c26eea34b0c027f78426864547607.png – Laziale Oct 31 '16 at 19:54
    
@Laziale did you check the demo i attached? – Sajeetharan Oct 31 '16 at 19:56
    
I see that it works fine thx, I'm getting the labels dynamically, do you think that might make a difference? – Laziale Oct 31 '16 at 19:58
    
if you have the data in chart, it should work either way. Mark as answer if it has helped – Sajeetharan Oct 31 '16 at 19:59
    
I just updated my question with full controller code, can you pls check and let me know if I'm missing something, Thanks – Laziale Oct 31 '16 at 20:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.