1
Answer

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

G Y

G Y

5y
2.3k
1
Donut charts are not getting displayed. Getting Table has no columns error on page refresh and loading.
 
Html code
  1. <div class="col-md-12 text-center" ng-if="!vm.donutChartSpinner && vm.donutChartData">  
  2. <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;">  
  3. <div>  
  4. <h3 class="text-center" style="margin-bottom: 5px;">{{row.Name}}</h3>  
  5. <h4 class="text-center" style="font-size: 0.85em; margin: 0px;">  
  6. <span ng-if="row.Id==2 || row.Id==4">Not submittedspan>  
  7. </h4>  
  8. <div style="display:block; width: auto;" google-chart chart="row.chartData.chart" agc-on-select="vm.selectDonutSection(selectedItem, chartWrapper, chart, row)"></div>  
  9. </div>  
  10. </div>  
  11. </div>  
JS CODE
  1. google.charts.load('current', { packages: ['corechart']});  
  2. function loadDonutChart() {  
  3. var charts = [  
  4. { Id: 1, Name: 'Actions', chartData: '', IsActive: true },  
  5. { Id: 2, Name: 'CQC Notifications', chartData: '', IsActive: true }  
  6. ];  
  7. if (!featureToggle.isEnabled('actions')) {  
  8. charts[0].IsActive = false  
  9. }  
  10. if (!featureToggle.isVersion('notifications', '1.0.0')) {  
  11. charts[1].IsActive = false  
  12. }  
  13. vm.donutChartData = {  
  14. hasData: true,  
  15. charts: charts  
  16. }  
  17. /* 1. Actions */  
  18. if (featureToggle.isEnabled('actions')) {  
  19. dashboardTrackerService.getActionsDonutChartCount().then(function (response) {  
  20. if (vm.homeIds.length > 0)  
  21. getImmediatePriorityDonutChart(vm.donutChartData.charts[0], response.data);  
  22. vm.donutChartSpinner = false;  
  23. }, function (err) {  
  24. vm.donutChartSpinner = false;  
  25. });  
  26. }  
  27. /* 2. Notifications */  
  28. if (featureToggle.isVersion('notifications', '1.0.0')) {  
  29. dashboardTrackerService.getNotificationsDonutChartCount().then(function (response) {  
  30. if (vm.homeIds.length > 0)  
  31. getImmediatePriorityDonutChart(vm.donutChartData.charts[1], response.data);  
  32. vm.donutChartSpinner = false;  
  33. }, function (err) {  
  34. vm.donutChartSpinner = false;  
  35. });  
  36. }  
  37. }  
  38. function getImmediatePriorityDonutChart(result, data) {  
  39. var dataTable = new google.visualization.DataTable();  
  40. dataTable.addColumn('string', 'Score');  
  41. dataTable.addColumn('number', 'Score Count');  
  42. result.chartData = { chart: {}, assets: {} };  
  43. result.chartData.chart.type = "PieChart";  
  44. result.chartData.chart.options = {  
  45. chartArea: { 'width': '100%', 'height': '90%' },  
  46. pieHole: 0.4,  
  47. legend: { position: 'none' },  
  48. tooltip: { text: 'value' },  
  49. pieSliceText: 'value'  
  50. }  
  51. switch (result.Id) {  
  52. case 1: // Actions  
  53. result.chartData.chart.options.colors = ['#dc3912', '#ff9900', '#3366cc']; // red, orange, blue  
  54. var section = data;  
  55. temp.push([section.Section1, section.Section1Count]);  
  56. temp.push([section.Section2, section.Section2Count]);  
  57. temp.push([section.Section3, section.Section3Count]);  
  58. dataTable.addRows(temp);  
  59. result.chartData.chart.data = dataTable;  
  60. break;  
  61. case 2: // Notifications  
  62. var section = data;  
  63. temp.push([section.Section1, section.Section1Count]);  
  64. temp.push([section.Section2, section.Section2Count]);  
  65. temp.push([section.Section3, section.Section3Count]);  
  66. temp.push([section.Section4, section.Section4Count]);  
  67. temp.push([section.Section5, section.Section5Count]);  
  68. dataTable.addRows(temp);  
  69. result.chartData.chart.data = dataTable;  
  70. break;  
  71. }  
  72. return result;  
  73. }  
Someone please support me in resolving this error.
Answers (1)
Next Recommended Forum