Click here to Skip to main content
14,428,072 members
Rate this:
Please Sign up or sign in to vote.
I am showing doughnut chart using Chart.js, on slice click i want value in PopUp.


This is my HTML Code
<canvas id="chart-area" height="200" width="300"></canvas>


Code to fill and show data
<script src="assets/js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="assets/js/Chart.js"></script>
    <script type="text/javascript">

         var Accepted = 0;
         var Denied = 0;
         var InProgress = 0;

     $(document).ready(function () {   
     
      var obj = {};
            obj.FinYear = $.trim($("[id*=ddlFinYear]").val());
              
                  $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Dashboard.aspx/GetClaimStatusCnt",
                     data: JSON.stringify(obj),
                     async: false,
                    // data: "{}",
                    dataType: "json",
                    success: function (Sdata) {                      
                        Accepted = Sdata.d[0].Accepted;
                        Denied = Sdata.d[0].Denied;
                        InProgress = Sdata.d[0].InProgress; 
                         },
                    error: function (result) {
                        alert("Claim Status Error");                                          
                    }
                });

                });

 var doughnutData = {
    labels: [
        "Accepted",
        "In Progress",
        "Denied"       
    ],
    datasets: [{
                data: [
                 Accepted,// randomScalingFactor(),
                  InProgress,//randomScalingFactor()  
                 Denied//randomScalingFactor(),
                                  
                ],
                backgroundColor: [
                    window.chartColors.green,
                    window.chartColors.blue,
                    window.chartColors.orange                    
                ],
                label: 'Dataset 1'
            }]
            
};
 
jQuery(document).ready(function() {
var ctz = document.getElementById("chart-area").getContext("2d");
 
    window.myDoughnutChart = new Chart(ctz, {
        type: 'doughnut',
        data: doughnutData,
        options: {
            responsive: true,
            elements: {
                arc: {
                   // borderColor: "#333"
                }
            },
            //cutoutPercentage: 50
			//onClick:graphClickEvent,
			legend: {
                position: 'bottom',
            },
            title: {
                display: true,
                text: ''
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
			
        },
      
		
    });
    
});
    </script>



Thanks in advance....

What I have tried:

I had given code which tried please check the code
Posted
Updated 9-Feb-17 4:06am
Comments
Richard Deeming 9-Feb-17 6:54am
   
And what is the problem with the code you have tried?
Ravi Sargam 9-Feb-17 6:55am
   
it is working fine but how to show alert/popup on chat slice click...

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

hi chap, i hope you are referring this jquery library.
this library says that you can configure the click event on legand. visit the link and search for "legend.onClick" keyword. this will give you the event and legandItem.
Now you have to write the logic to identify your leganditem and proceed.

so the modified code will somewhat look like

legend: {
                position: 'bottom',
            },
            title: {
                display: true,
                text: ''
            },
            animation: {
                animateScale: true,
                animateRotate: true
            },
            onClick:function(event,item){
                    your logic to show value in popup;
                    }


second solution can be found here
javascript - Click events on Pie Charts in Chart.js - Stack Overflow[^]
   
v3
Comments
Ravi Sargam 9-Feb-17 23:13pm
   
thank you for answer i got the click event but i want value of clicked slice... please tell how can i achive that...
Ravi Sargam 10-Feb-17 3:37am
   
On legend click working fine with this code

onClick: function(e, legendItem) {
var index = legendItem.index;
alert(myDoughnutChart.data.labels[[index]]+" "+myDoughnutChart.data.datasets[0].data[[index]]);
}

but how can i get value if i click on Chart Slice.....
sachin.vishwa90 10-Feb-17 4:02am
   
for getting the value it seems you have to generate own legand template by using
"legend.labels.generateLabels" function. This function will return the label html. in that HTML you can have your custom attribute with desired value.
After that on click function -> legantItem you can read the custom attribute value.
This is what i can suggest. Give it a try

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100