title: Google Chart is not rendering and display " Data table is not defined " instead
body: <p>I'm not why my Google chart is not rendering and instead, it display</p>
  <p><img src="https://i.stack.imgur.com/3XBcA.png" alt="enter image description here" /></p>
  <p>I also notice I got this error message on my console.</p>
  <blockquote>
  <p><strong>Uncaught TypeError: Cannot read property 'danger' of undefined</strong></p>
  </blockquote>
  <p>Then, I checked my JSON file, <strong>danger</strong> is there. which danger is it referring to ?</p>
  <hr />
  <h1>JS</h1>
  <pre><code>'use strict';
  
  define(['jquery'], function($) {
  
    $(function() {
  
      var danger       = $('#pc-danger');
      var warning      = $('#pc-warning');
      var success      = $('#pc-success');
      var danger_list  = $('#pc-danger-list');
      var warning_list = $('#pc-warning-list');
      var success_list = $('#pc-success-list');
  
      var basePath = &quot;/BIM/resources/js/reports/student/section-exercise/&quot;;
  
      $.ajax({
  
        url: basePath + &quot;data.json&quot;,
        type: &quot;GET&quot;,
        dataType : &quot;json&quot;,
  
        success: function( objects ) {
  
  
          function updateInfo(x) {
  
            danger.html(objects[x].danger);
            warning.html(objects[x].warning);
            success.html(objects[x].success);
  
            danger_list.html(objects[x].danger_list);
            warning_list.html(objects[x].warning_list);
            success_list.html(objects[x].success_list);
  
          }
  
           // Load the Visualization API and the piechart package.
           google.load(&quot;visualization&quot;, &quot;1&quot;, {packages:[&quot;corechart&quot;]});
           google.setOnLoadCallback(drawChart());
  
           function drawChart() {
  
             var options = {
              width: 160,
              height: 160,
              chartArea: {
                left: 10,
                top: 20,
                width: &quot;100%&quot;,
                height: &quot;100%&quot;
              },
  
  
              colors: ['#F46E4E',  '#F9C262' , '#ADB55E',],
              legend: 'none',
              enableInteractivity: false,
              pieSliceText: 'none',
  
            };
  
            var data = {};
            var chart = {};
  
            for (var object in objects) {
  
              var total = objects[object].danger + objects[object].warning + objects[object].success ;
  
              data[object] = google.visualization.arrayToDataTable([
  
                ['Piechart' , 'Number of Skills'],
                ['danger'   , ( objects[object].danger/total )  * 100  ],
                ['warning'  , ( objects[object].warning/total ) * 100  ],
                ['success'  , ( objects[object].success/total ) * 100  ],
  
  
                ]);
  
              object = object.toLowerCase();
  
              // piechart object
              var $el = $('#sa-piechart-' + object  );
  
              // button
              var button = $('.sa-report-btn-'+ object );
  
              // append
              var $el = $('#sa-piechart-' + object ).length ? $('#sa-piechart-' + object ) : $('&lt;div id=&quot;sa-piechart-' + object +'&quot;&gt;&lt;/div&gt;').appendTo($('#sa-piechart-'+ object ));
  
  
              chart[object] = new google.visualization.PieChart($el[0]);
  
              chart[object].draw(data[object]);
  
              // attach click handler to the button
              button.click(function() {
                updateInfo(object);
                chart[object].draw(data[object]);
  
              });
  
            }
  
          }
  
        },
  
        error: function( xhr, status, errorThrown ) {
          alert( &quot;Sorry, there was a problem!&quot; );
  
          console.log( &quot;Error: &quot; + errorThrown );
          console.log( &quot;Status: &quot; + status );
          console.dir( xhr );
        },
  
  
      });
  
  });
  
  });
  </code></pre>
  <hr />
  <h1>JSON</h1>
  <pre><code>{
  
      &quot;A&quot;: {
  
          &quot;report_type&quot;: &quot;chapter test&quot;,
          &quot;section_num&quot;: &quot;2&quot;,
          &quot;assignment&quot;: &quot;algebra 1&quot;,
          &quot;date&quot;: &quot;2/10/2015&quot;,
          &quot;correct_num&quot;: &quot;15&quot;,
          &quot;avg_score&quot;: &quot;89&quot;,
          &quot;danger&quot;: &quot;5&quot;,
          &quot;danger_list&quot;: &quot;5,10,15,19,23&quot;,
          &quot;warning&quot;: &quot;8&quot;,
          &quot;warning_list&quot;: &quot;3,7,11,13,14,16,21,22&quot;,
          &quot;success&quot;: &quot;12&quot;,
          &quot;success_list&quot;: &quot;1,2,4,6,8,9,12,17,18,20,24,25&quot;
      },
  
      &quot;B&quot;: {
  
          &quot;report_type&quot;: &quot;section exercise&quot;,
          &quot;section_num&quot;: &quot;2.2&quot;,
          &quot;assignment&quot;: &quot;algebra 1&quot;,
          &quot;date&quot;: &quot;2/09/2015&quot;,
          &quot;correct_num&quot;: &quot;11&quot;,
          &quot;avg_score&quot;: &quot;44&quot;,
          &quot;danger&quot;: &quot;12&quot;,
          &quot;danger_list&quot;: &quot;11,12,13,14,15,16,17,18,19,20,3,4&quot;,
          &quot;warning&quot;: &quot;2&quot;,
          &quot;warning_list&quot;: &quot;1,2&quot;,
          &quot;success&quot;: &quot;11&quot;,
          &quot;success_list&quot;: &quot;21,21,23,24,25,5,6,7,8,9,10&quot;
      },
  
      &quot;C&quot;: {
  
          &quot;report_type&quot;: &quot;test&quot;,
          &quot;section_num&quot;: &quot;1&quot;,
          &quot;assignment&quot;: &quot;algebra 1&quot;,
          &quot;date&quot;: &quot;1/10/2015&quot;,
          &quot;correct_num&quot;: &quot;15&quot;,
          &quot;avg_score&quot;: &quot;75&quot;,
          &quot;danger&quot;: &quot;0&quot;,
          &quot;danger_list&quot;: &quot;&quot;,
          &quot;warning&quot;: &quot;10&quot;,
          &quot;warning_list&quot;: &quot;1,2,3,4,5,6,7,8,9,10&quot;,
          &quot;success&quot;: &quot;15&quot;,
          &quot;success_list&quot;: &quot;11,12,13,14,15,16,17,18,19,20,21,22,23,24,25&quot;
      },
  
      &quot;D&quot;: {
  
          &quot;report_type&quot;: &quot;practice test&quot;,
          &quot;section_num&quot;: &quot;1&quot;,
          &quot;assignment&quot;: &quot;algebra 1&quot;,
          &quot;date&quot;: &quot;1/09/2015&quot;,
          &quot;correct_num&quot;: &quot;15&quot;,
          &quot;avg_score&quot;: &quot;79&quot;,
          &quot;danger&quot;: &quot;5&quot;,
          &quot;danger_list&quot;: &quot;1,2,3,4,5&quot;,
          &quot;warning&quot;: &quot;0&quot;,
          &quot;warning_list&quot;: &quot;&quot;,
          &quot;success&quot;: &quot;20&quot;,
          &quot;success_list&quot;: &quot;6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25&quot;
      }
  }
  </code></pre>
  <hr />
  <p>Any help / hints / suggestions will mean a lot to me.</p>
  <p>Thank-you !</p>