angular chart pie-chart data click event

Question

Angular JS chart is awesome, But i need to implement click event in the piechart which i have created.. Here is the coding..

This is the JavaScript Coding...

  $scope.pied = [{
          value: 4,
          color: "#FF5A5E",
          highlight: "#FF5A5E",
          label: "Prospective"
        }, {
          value: 0,
          color: "#46BFBD",
          highlight: "#46BFBD",
          label: "Pending"
        }, {
          value: 0,
          color: "#FDB45C",
          highlight: "#FDB45C",
          label: "CallBacks"
        }, {
          value: 4,
          color: "#e6e6fa",
          highlight: "#e6e6fa",
          label: "FollowUp"
        }, {
          value: 1,
          color: "#cc5229",
          highlight: "#cc5229",
          label: "Not Interested"
        }, {
          value: 0,
          color: "#556b2f",
          highlight: "#556b2f",
          label: "Close"
        }]

        var pieOptions = {
          //Boolean - Whether we should show a stroke on each segment
          segmentShowStroke: true,

          //String - The colour of each segment stroke
          segmentStrokeColor: "#fff",

          //Number - The width of each segment stroke
          segmentStrokeWidth: 2,

          //Boolean - Whether we should animate the chart
          animation: true,

          //Number - Amount of animation steps
          animationSteps: 100,

          //String - Animation easing effect
          animationEasing: "easeOutBounce",

          //Boolean - Whether we animate the rotation of the Pie
          animateRotate: true,

          //Boolean - Whether we animate scaling the Pie from the centre
          animateScale: false,

          //Function - Will fire on animation completion.
          onAnimationComplete: null

        }
        var ctx = document.getElementById("pieChart").getContext("2d");
        var myPieChart = new Chart(ctx).Pie($scope.pied, pieOptions);
        ctx.onclick = function(evt){
        var activePoints = myPieChart.getPointsAtEvent(evt);
        console.log("active: "+activePoints);
        // => activePoints is an array of points on the canvas that are at the same position as the click event.
    };
        document.getElementById('js-legend').innerHTML = myPieChart.generateLegend();

This is the HTML Coding..
 <canvas id="pieChart" width="440" height="200" ></canvas>
   <div id="js-legend" class="chart-legend"></div>

This is the image of the above program.. i have wrote coding that when i click on The FollowUP it must the datas related to it.. But the click event is not working..??

Please see to the above code and picture and guide me to get the exact output what i expect. Thanks in advance guys...

score 1 · Accepted Answer · answered Feb 27 '16 at 05:53

1

I have Used angular-chart.js instead this chart.js Angular JS Documentation is here . Angular Chart is little bit easy than chart.js..

Thanks for the support guys.. :)

answered Feb 27 '16 at 05:53

Om Bala

169
3
18

does'nt understand the solution u used eventually, by using angular-chart – netalex Nov 22 '16 at 15:11
I was trying with chart.js to get the clicked contents, I can't get the contents by then. So, used angular-chart.js . I got output as expected. :) – Om Bala Nov 23 '16 at 05:42
with same code? interesting, it's more complex than the one in the examples of angular-chart – netalex Nov 23 '16 at 11:34
1

no the code above used in chart.js i used some easy codes from angular-chart.js and it worked :) – Om Bala Nov 23 '16 at 13:41

angular chart pie-chart data click event

1 Answers1