Trying to push data in syncfusion Doughnut chart but not working.

[Shalini]

Hi,
I'm trying to push data dynamically in AngularJS controller to Doughnut type ejChart but it is not responsive. Means on clicking the option in legend, it doesn't vanished from the Doughnut. Can you please help ?

here is my code:

for(some number of times){

 chart_data.push({

                            x: applicationList[i].jobHiringStageName,

                            y: applicationList[i].applicationCount,

                            text: ((applicationList[i].applicationCount))

                        });

}

  $("#container").ejChart(

                    {

                        //Initializing Series

                        series:

                        [

                            {

                                points: chart_data,

                                marker:

                                {

                                    dataLabel:

                                    {

                                        visible: true,

                                        font: { size: '20px', fontWeight: 'lighter' },

                                        enableContrastColor: true

                                    }

                                },

                                name: 'Newyork',

                                type: 'doughnut',

                                explode: true,

                                doughnutSize: 0.7,

                                labelPosition: 'inside',

                                enableAnimation: true

                            }

                        ],

                        load: "loadTheme",

                        isResponsive: true,

                        legend: { visible: true, position: 'bottom' }

                    });

[Baby Palanidurai]

Hi Shalini, 

Thanks for using syncfusion products, 

       We have analyzed your query and as per your requirement, we have prepared a sample to update the chart data on button click. 

https://jsplayground.syncfusion.com/2dtnloto 

Screenshot: 

Before adding data: 

 

After adding the data: 

 

After adding the data and legend click: 

 

And also, we are able to collapse the points from doughnut on legend click. 

Kindly revert us with more information, if the above provided sample doesn’t meet your requirement. 

Thanks, 

Baby. 

[Shalini]

That's exactly what I've done as well but it is not responding as it should.

 var chart_data = [];

                for (n times) {

                    if (applicationList[i].applicationCount == 0) {

                        chart_data.push({

                            x: applicationList[i].jobHiringStageName,

                            y: applicationList[i].applicationCount,

                            text: ((''))

                        });

                    }

                    else {

                        chart_data.push({

                            x: applicationList[i].jobHiringStageName,

                            y: applicationList[i].applicationCount,

                            text: ((applicationList[i].applicationCount))

                        });

                    }

                }

[Baby Palanidurai]

Hi Shalini, 

We have analyzed your query. If you are binding data for chart from scope variable in AngularJS, then only the onpropertychanged method will get called to refresh the charts. But in your code snippet, you are updating chart_data in script. If you are updating the data which is not in scope variable, then the chart will not update.  Declare the variable under $scope and assign that to chart dataSource, then only when updating the scope variable, the chart will get updated automatically.  

<div id="container" ej-chart> 

          <e-series> 

              <e-series  e-points="Data"> 

                </e-series> 

        </e-series> 

        </div> 

    angular.module('ChartApp', ['ejangular']) 

                .controller('ChartCtrl', function ($scope) { 

                  $scope.Data = [obj[0]]; 

                   $scope.changeData = function() { 

                     if ($scope.Data.length !== obj.length) 

                       $scope.Data.push(obj[$scope.Data.length]) 

                    } 

                 }); 

In the previous sample we have update the data in the scope function, then automatically, chart will get updated. kindly find the below sample link for your reference, 

https://jsplayground.syncfusion.com/2dtnloto 

Declare chart_data in angular scope and assign that to chart. Revert us with your sample, if you reproduce the issue even after declaring the variable in scope. 

Thanks, 

Baby.