CODEWITHSUNDEEP
javascriptajaxchartsgoogle-visualization
Sam
Sam

Reputation: 47

Google Charts displays only after clicking on inspect element

I am using Google Charts to display a pie chart on my webpage. I display the charts by pulling data from my database, using JavaScript and PHP.

However, I encountered a problem whereby my chart only displays when I right-click to inspect element. I'm not sure if there's anything wrong with my codes.

Here's 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 am also getting a warning on Chrome whereby it says:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Thank you in advance for any help!

Upvotes: 4

Views: 545

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

removing async: false will prevent the Synchronous XMLHttpRequest warning 

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']
});

Upvotes: 1

Related Questions