CODEWITHSUNDEEP
javascriptphpajaxchartsgoogle-visualization
Saachi
Saachi

Reputation: 33

GoogleChart JSON

Trying to create a google GANTT Chart using JSON Data via PHP and AJAX in a local host. I am getting the following error. I am unable to understand the error and how it's loaded.: 

Uncaught TypeError: Cannot read property '3' of undefined
    at gvjs_Tba (jsapi_compiled_default_module.js:132)
    at new gvjs_R (jsapi_compiled_default_module.js:131)
    at Object.<anonymous> (ganttchart.html:23)
    at c (jquery.min.js:4)
    at Object.fireWith [as resolveWith] (jquery.min.js:4)
    at k (jquery.min.js:6)
    at XMLHttpRequest.r (jquery.min.js:6)
gvjs_Tba @ jsapi_compiled_default_module.js:132
gvjs_R @ jsapi_compiled_default_module.js:131
(anonymous) @ ganttchart.html:23
c @ jquery.min.js:4
fireWith @ jquery.min.js:4
k @ jquery.min.js:6
r @ jquery.min.js:6
XMLHttpRequest.send (async)
send @ jquery.min.js:6
ajax @ jquery.min.js:6
drawChart @ ganttchart.html:18
Promise.then (async)
google.G.K.U.hl @ loader.js:231
(anonymous) @ ganttchart.html:11

My HTML DOC where I do an AJAX reference to the PHP page. I changed the AJAX call from the previous version to include done

  <html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

    google.charts.load('current', {'packages':['gantt']});

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      $.ajax({
        url: "getGanttData.php", // make this url point to the data file
        dataType: "json"
      }).done(function (jsonData) {
        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var options = {
          //explorer: {axis: 'horizontal'}
          height: 275,
          gantt: {
            defaultStartDateMillis: new Date(2019, 1, 1)
          }
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
        chart.draw(data, options);
      });
    }
    </script>
  </head>

  <body>

  <div id="intro">
    <h1>Supervisor's Dashbaord</h1>
    </div>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

PHP Script - This reads teh sample gantt details string and pulls the data: getGanttData.php

<?php 

$string = file_get_contents("sampleGanttData.json");
echo $string;

?>

My JSON Data: sampleGanttData.json

    {
  "cols": [{"id": "ID", "label": "Task ID", "type": "string"},
         {"id": "Name", "label": "Task Name", "type": "string"},
         {"id": "Resource", "label": "Resource", "type": "string"},
         {"id": "Start", "label": "Start Date", "type": "date"},
         {"id": "End", "label": "End Date", "type": "date"},
         {"id": "Duration", "label": "Duration", "type": "number"},
         {"id": "Percent", "label": "Percentage complete", "type": "number"},
         {"id": "Dependencies", "label": "Dependencies", "type": "string"}
  ],
  "rows": [
            {"c":[{"v": "T101"},
             {"v": "WO:1 - create Design"},
             {"v": "Engineer"},
             {"v":"null"},
             {"v":"null"},
             {"v": 2.0},
             {"v": 2.0},
             {"v":"null"}
        ]},

        [{"c":[{"v": "T102"},
             {"v": "WO:1 - Gain Design Approval"},
             {"v": "Engineer"},
             {"v":"null"},
             {"v":"null"},
             {"v": 3.0},
             {"v": 0.0},
             {"v":"T101"}
        ]}
        ]
  ]  
 }

Upvotes: 1

Views: 981

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

yes, you will need to remove async: false to remove the deprecation warning

however, this will cause the rest of the chart code to run before the data has returned,
which will cause a different error

since the success function has also been deprecated,
move the rest of the code to the done promise to correct the issue,
as follows... 

// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['gantt']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function toMilliseconds(hour) {
  return hour * 60 * 1000 *60;
}

function drawChart() {
  $.ajax({
    url: "getGanttData.php", // make this url point to the data file
    dataType: "json"
  }).done(function (jsonData) {
    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);

    var options = {
      //explorer: {axis: 'horizontal'}
      height: 275,
      gantt: {
        defaultStartDateMillis: new Date(2019, 1, 1)
      }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
    chart.draw(data, options);
  });
}

UPDATE

the json data is malformed. there is an extra opening and closing array brace in the second row, see comments. 

{
  "cols": [{"id": "ID", "label": "Task ID", "type": "string"},
         {"id": "Name", "label": "Task Name", "type": "string"},
         {"id": "Resource", "label": "Resource", "type": "string"},
         {"id": "Start", "label": "Start Date", "type": "date"},
         {"id": "End", "label": "End Date", "type": "date"},
         {"id": "Duration", "label": "Duration", "type": "number"},
         {"id": "Percent", "label": "Percentage complete", "type": "number"},
         {"id": "Dependencies", "label": "Dependencies", "type": "string"}
  ],
  "rows": [
            {"c":[{"v": "T101"},
             {"v": "WO:1 - create Design"},
             {"v": "Engineer"},
             {"v":"null"},
             {"v":"null"},
             {"v": 2.0},
             {"v": 2.0},
             {"v":"null"}
        ]},

        // the following opening brace ([) should be removed
        [{"c":[{"v": "T102"},
             {"v": "WO:1 - Gain Design Approval"},
             {"v": "Engineer"},
             {"v":"null"},
             {"v":"null"},
             {"v": 3.0},
             {"v": 0.0},
             {"v":"T101"}
        ]}
        ]  // <-- one of these closing braces should be removed
  ]  // <-- one of these closing braces should be removed
}

also, if you're going to use a null value, it should not be in quotes. 

{"v":"null"}  // <-- bad
{"v":null}    // <-- good

however, at least one row should have a start and end date,
in the data sample supplied, both rows have null for the dates.

cleaning up the json should allow the chart to draw,
see following working snippet... 

google.charts.load('current', {
  packages: ['gantt']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id": "ID", "label": "Task ID", "type": "string"},
      {"id": "Name", "label": "Task Name", "type": "string"},
      {"id": "Resource", "label": "Resource", "type": "string"},
      {"id": "Start", "label": "Start Date", "type": "date"},
      {"id": "End", "label": "End Date", "type": "date"},
      {"id": "Duration", "label": "Duration", "type": "number"},
      {"id": "Percent", "label": "Percentage complete", "type": "number"},
      {"id": "Dependencies", "label": "Dependencies", "type": "string"}
    ],
    "rows": [
      {"c":[
        {"v": "T101"},
        {"v": "WO:1 - create Design"},
        {"v": "Engineer"},
        {"v": null},
        {"v": null},
        {"v": 2.0},
        {"v": 2.0},
        {"v": null}
      ]},
      {"c":[
        {"v": "T102"},
        {"v": "WO:1 - Gain Design Approval"},
        {"v": "Engineer"},
        {"v": "Date(2019, 1)"},
        {"v": "Date(2019, 2)"},
        {"v": 3.0},
        {"v": 0.0},
        {"v": "T101"}
      ]}
    ]
  });

  var options = {
    height: 275,
    gantt: {
      defaultStartDateMillis: new Date(2019, 1, 1)
    }
  };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions