CODEWITHSUNDEEP
javascriptjqueryarrayschartsgoogle-visualization
Ramzes
Ramzes

Reputation: 93

Pass the array to the google chart dataset in flask application

I have flask app with

@app.route('/dash_data')
def dash_data():
    ***
        return jsonify({'key' : dashDetails})

which return nice json string

{"key":[["Food",50],["Health",10],["Restaurants",2],["Sports",20],["Taxi",5]]}

My google chart script expects

 [
     ['Food',     50],
     ['Health',    10],
     ['Restaurants', 2],
     ['Sports',    20],
     ['Taxi',  5]
 ]

and it has the following way to pass this data to the chart:

var testData = $.get('/dash_data');
  var tm = test_data.done(function (resp){ return resp;})
  var dataArray = tm.responseJSON.key

  var data = google.visualization.arrayToDataTable(dataArray);

However, the console output is

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

Where is my mistake? The full google-chart js file:

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var test_data = $.get('/dash_data');
  var tm = test_data.done(function (resp){return resp;})
  var t = tm.responseJSON.key

  var data = google.visualization.arrayToDataTable(t);
 
  var options = {
    title: 'Expences 12.2020',
    pieHole: 0.4,
    width: 380,
    height: 200
  };

  var chart = new google.visualization.PieChart(document.getElementById('exp_month_chart'));
  chart.draw(data, options);
}

Thank you.

Upvotes: 2

Views: 96

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

$.get runs asynchronously,
so you need to wait for the done callback before trying to draw the chart...

google.charts.load("current", {
  packages: ["corechart"]
}).then(function () {
  $.get('/dash_data').done(function (resp) {
    var data = google.visualization.arrayToDataTable(resp.key);

    var options = {
      title: 'Expences 12.2020',
      pieHole: 0.4,
      width: 380,
      height: 200
    };

    var chart = new google.visualization.PieChart(document.getElementById('exp_month_chart'));
    chart.draw(data, options);
  });
});

in the post above,

var t = tm.responseJSON.key

runs before

var tm = test_data.done(function (resp){return resp;})

is finished...

Upvotes: 1

Related Questions