Google Charts Not Showing When Called Through Jquery Ajax

I am trying to use google chart to show the chart.My json data is coming when I am checking through the alert option to check the data are pushed into list but overall the chart is

Solution 1:

in order to create the data table directly from json, the json must be in a specific format, found here...

otherwise, the data can be loaded manually, see following snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  $.ajax({
    url: 'http://localhost:8080/FRA-UI/api/report19graph/all',
    dataType: 'json'
  }).done(function (jsonData) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Range');
    data.addColumn('number', 'Value');

    $.each(jsonData, function (index, row) {
      data.addRow([
        row.rangeLab,
        row.rangeVal
      ]);
    });

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240});
  });
});