Google Chart is not rendering and display " Data table is not defined " instead

Question

I'm not why my Google chart is not rendering and instead, it display

I also notice I got this error message on my console.

Uncaught TypeError: Cannot read property 'danger' of undefined

Then, I checked my JSON file, danger is there. which danger is it referring to ?

---

JS

'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 = "/BIM/resources/js/reports/student/section-exercise/";

    $.ajax({

      url: basePath + "data.json",
      type: "GET",
      dataType : "json",

      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("visualization", "1", {packages:["corechart"]});
         google.setOnLoadCallback(drawChart());

         function drawChart() {

           var options = {
            width: 160,
            height: 160,
            chartArea: {
              left: 10,
              top: 20,
              width: "100%",
              height: "100%"
            },


            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 ) : $('<div id="sa-piechart-' + object +'"></div>').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( "Sorry, there was a problem!" );

        console.log( "Error: " + errorThrown );
        console.log( "Status: " + status );
        console.dir( xhr );
      },


    });

});

});

---

JSON

{

    "A": {

        "report_type": "chapter test",
        "section_num": "2",
        "assignment": "algebra 1",
        "date": "2/10/2015",
        "correct_num": "15",
        "avg_score": "89",
        "danger": "5",
        "danger_list": "5,10,15,19,23",
        "warning": "8",
        "warning_list": "3,7,11,13,14,16,21,22",
        "success": "12",
        "success_list": "1,2,4,6,8,9,12,17,18,20,24,25"
    },

    "B": {

        "report_type": "section exercise",
        "section_num": "2.2",
        "assignment": "algebra 1",
        "date": "2/09/2015",
        "correct_num": "11",
        "avg_score": "44",
        "danger": "12",
        "danger_list": "11,12,13,14,15,16,17,18,19,20,3,4",
        "warning": "2",
        "warning_list": "1,2",
        "success": "11",
        "success_list": "21,21,23,24,25,5,6,7,8,9,10"
    },

    "C": {

        "report_type": "test",
        "section_num": "1",
        "assignment": "algebra 1",
        "date": "1/10/2015",
        "correct_num": "15",
        "avg_score": "75",
        "danger": "0",
        "danger_list": "",
        "warning": "10",
        "warning_list": "1,2,3,4,5,6,7,8,9,10",
        "success": "15",
        "success_list": "11,12,13,14,15,16,17,18,19,20,21,22,23,24,25"
    },

    "D": {

        "report_type": "practice test",
        "section_num": "1",
        "assignment": "algebra 1",
        "date": "1/09/2015",
        "correct_num": "15",
        "avg_score": "79",
        "danger": "5",
        "danger_list": "1,2,3,4,5",
        "warning": "0",
        "warning_list": "",
        "success": "20",
        "success_list": "6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25"
    }
}

---

Any help / hints / suggestions will mean a lot to me.

Thank-you !

Answer 1

You are pushing DataTable to data[object] which are A,B,C.. and after that you conver it to lowerCase by this line:-

 object = object.toLowerCase();

so after that when you get that object it return null in this line:-

chart[object].draw(data[object]);

so you just need to remove this line:-

object = object.toLowerCase();

here is demo( i just use one div for demo purpose) Demo

hope this will help you.