Google charts with angular js (Table has no columns error)

Question

Donut charts are not getting displayed. Getting Table has no columns error on page refresh and loading.

 

Html code

<div class="col-md-12 text-center" ng-if="!vm.donutChartSpinner && vm.donutChartData">
<div class="text-center col-md-3 pie-charts-placement" ng-repeat="row in vm.donutChartData.charts | filter:{ IsActive: true } track by $index" style="width: 25% !important;">
<div>
<h3 class="text-center" style="margin-bottom: 5px;">{{row.Name}}</h3>
<h4 class="text-center" style="font-size: 0.85em; margin: 0px;">
<span ng-if="row.Id==2 || row.Id==4">Not submittedspan>
</h4>
<div style="display:block; width: auto;" google-chart chart="row.chartData.chart" agc-on-select="vm.selectDonutSection(selectedItem, chartWrapper, chart, row)"></div>
</div>
</div>
</div>

JS CODE

google.charts.load('current', { packages: ['corechart']});
function loadDonutChart() {
var charts = [
{ Id: 1, Name: 'Actions', chartData: '', IsActive: true },
{ Id: 2, Name: 'CQC Notifications', chartData: '', IsActive: true }
];
if (!featureToggle.isEnabled('actions')) {
charts[0].IsActive = false
}
if (!featureToggle.isVersion('notifications', '1.0.0')) {
charts[1].IsActive = false
}
vm.donutChartData = {
hasData: true,
charts: charts
}
/* 1. Actions */
if (featureToggle.isEnabled('actions')) {
dashboardTrackerService.getActionsDonutChartCount().then(function (response) {
if (vm.homeIds.length > 0)
getImmediatePriorityDonutChart(vm.donutChartData.charts[0], response.data);
vm.donutChartSpinner = false;
}, function (err) {
vm.donutChartSpinner = false;
});
}
/* 2. Notifications */
if (featureToggle.isVersion('notifications', '1.0.0')) {
dashboardTrackerService.getNotificationsDonutChartCount().then(function (response) {
if (vm.homeIds.length > 0)
getImmediatePriorityDonutChart(vm.donutChartData.charts[1], response.data);
vm.donutChartSpinner = false;
}, function (err) {
vm.donutChartSpinner = false;
});
}
}
function getImmediatePriorityDonutChart(result, data) {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Score');
dataTable.addColumn('number', 'Score Count');
result.chartData = { chart: {}, assets: {} };
result.chartData.chart.type = "PieChart";
result.chartData.chart.options = {
chartArea: { 'width': '100%', 'height': '90%' },
pieHole: 0.4,
legend: { position: 'none' },
tooltip: { text: 'value' },
pieSliceText: 'value'
}
switch (result.Id) {
case 1: // Actions
result.chartData.chart.options.colors = ['#dc3912', '#ff9900', '#3366cc']; // red, orange, blue
var section = data;
temp.push([section.Section1, section.Section1Count]);
temp.push([section.Section2, section.Section2Count]);
temp.push([section.Section3, section.Section3Count]);
dataTable.addRows(temp);
result.chartData.chart.data = dataTable;
break;
case 2: // Notifications
var section = data;
temp.push([section.Section1, section.Section1Count]);
temp.push([section.Section2, section.Section2Count]);
temp.push([section.Section3, section.Section3Count]);
temp.push([section.Section4, section.Section4Count]);
temp.push([section.Section5, section.Section5Count]);
dataTable.addRows(temp);
result.chartData.chart.data = dataTable;
break;
}
return result;
}

Someone please support me in resolving this error.