CODEWITHSUNDEEP
javascriptajaxapichartsgoogle-visualization
abhi
abhi

Reputation: 93

Uncaught (in promise) TypeError: Cannot read property '0' of undefined at drawChart

//Ajax call
$(document).ready(function (data) {
  $("#btnGo").click(function () {
    console.log("ready!");
    $.ajax({
      url: '/api',
      type: 'POST',
      contentType: 'application/json',
      dataType: 'JSON',
      data: JSON.stringify({ startDate: $("#one").val(), endDate: $('#two').val() }),
      success: function (data) {
        
       
        var x = [data.x.count, data.x2.count, data.x3.count, data.x4.count]
        //data.x.count is getting from an api call where it will show count like 5
        drawChart(x)
        
      }

    });
  });
});
//bar chart
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart(x) {
  var data = google.visualization.arrayToDataTable([
    ['Tickets', 'Count', { role: "style" }],
    ['x1', x[0], "#b87333"],
    ['x2', x[1], "silver"],
    ['x3', x[2], "gold"],
    ['x4', x[3], "green"]    
  ]);
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2]);

  var options = {
    title: "Tickets",
    width: 750,
    height: 550,
    bar: { groupWidth: "95%" },
    legend: { position: "none" },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("chart"));
  chart.draw(view, options);
}
  1. i have defined this chart outside the ajax function
  2. whenever i am calling server i am getting error in developer console(script.js:96 Uncaught (in promise) TypeError: Cannot read property '0' of undefined at drawChart)
  3. after entering parameters and calling n number of times i am not seeing any errors in console 4)whenever i run server i dont want to see error.

Upvotes: 1

Views: 1023

Answers (4)

WhiteHat
WhiteHat

Reputation: 61230

as you've discovered, the function gets called from the callback method without the data.
however, it is not a good idea to remove the callback,
as it is possible that the function may be called before google charts has fully loaded.
which would cause other errors.

there are a few ways to ensure google charts has loaded.
we can use the promise the load method returns.

as well, the load method will wait for the page to load by default.
so we can use google's load method in place of jquery's ready method.

recommend the following changes to ensure google charts has fully loaded,
and that the data gets properly passed to the chart.

google.charts.load("current", {
  packages: ["corechart"]
}).then(function () {
  var options = {
    title: "Tickets",
    width: 750,
    height: 550,
    bar: { groupWidth: "95%" },
    legend: { position: "none" },
  };

  var chart = new google.visualization.ColumnChart(document.getElementById("chart"));

  $("#btnGo").click(function () {
    $.ajax({
      url: '/api',
      type: 'POST',
      contentType: 'application/json',
      dataType: 'JSON',
      data: JSON.stringify({ startDate: $("#one").val(), endDate: $('#two').val() })
    }).done(function (data) {
      var x = [data.x.count, data.x2.count, data.x3.count, data.x4.count];
      //data.x.count is getting from an api call where it will show count like 5
      drawChart(x);
    });
  });

  function drawChart(x) {
    var data = google.visualization.arrayToDataTable([
      ['Tickets', 'Count', { role: "style" }],
      ['x1', x[0], "#b87333"],
      ['x2', x[1], "silver"],
      ['x3', x[2], "gold"],
      ['x4', x[3], "green"]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    }, 2]);

    chart.draw(view, options);
  }
});

Upvotes: 0

abhi
abhi

Reputation: 93

i removed this google.charts.setOnLoadCallback(drawChart); now not showing error.

Upvotes: 0

Laurent Schwitter
Laurent Schwitter

Reputation: 464

Scratch what i wrote earlier... I did not see this line

google.charts.setOnLoadCallback(drawChart);

that gets called when the google chart is loaded but you're not passing x..

Upvotes: 0

Draeken
Draeken

Reputation: 380

Try to remove this line:

google.charts.setOnLoadCallback(drawChart);

This line will call your function drawChart without parameters. But it needs x to works properly, as you use it when you call google.visualization.arrayToDataTable.

You don't need it as you will call drawChart in your Ajax callback.

Upvotes: 1

Related Questions