Click here to Skip to main content
16,021,823 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I am showing doughnut chart using Chart.js, on slice click i want value in PopUp.


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


Code to fill and show data
JavaScript
<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 3: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

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[^]
 
Share this answer
 
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, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900