Google charts only appear after clicking on a validation item

Question

I use Google Charts to display a pie chart on my web page. I show charts pulling data from my database using JavaScript and PHP.

However, I ran into a problem when my chart only displayed when I right-clicked to check the item. I'm not sure if something is wrong with my codes.

Here is the code for JavaScript:

google.charts.load("current", {packages:["corechart"]});        
google.setOnLoadCallback(drawChart);
  function drawChart() {
    var jsonData = 
        $.ajax({
            type: "POST",
            url: "./handle/getChartsInfo.php",
            dataType: 'json',
            async: false
        }).responseText; 

    var chartData = new google.visualization.DataTable(jsonData);

    var options = {
      title: 'My Policies',
      pieHole: 0.5,
      pieSliceText: 'none',
      tooltip: {isHtml: true},
      backgroundColor: 'none',
      colors: ["#F7464A", "#46BFBD", "#FDB45C"]
    };

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

I also get a Chrome warning saying:

The synchronous XMLHttpRequest in the main thread is deprecated due to its detrimental effects on the end user. For more help, check out https://xhr.spec.whatwg.org/ .

Thanks in advance for any help!

Answer 1

async: false Synchronous XMLHttpRequest

google.charts.load('current', {
  callback: function () {
    $.ajax({
      type: 'POST',
      url: './handle/getChartsInfo.php',
      dataType: 'json'
    }).done(function (jsonData) {
      var chartData = new google.visualization.DataTable(jsonData);
      var options = {
        title: 'My Policies',
        pieHole: 0.5,
        pieSliceText: 'none',
        tooltip: {isHtml: true},
        backgroundColor: 'none',
        colors: ['#F7464A', '#46BFBD', '#FDB45C']
      };
      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(chartData, options);
    }).fail(function (jq, text, errMsg) {
      console.log(errMsg);
    });
  },
  packages:['corechart']
});