How can delay the load of a Google Charts Chart

Question

I have a html website and Id like to do a little survey for the users and show the live result of the survey using a pie-chart from google charts. but once I load the page the pie-chart gets automatically loaded and it doesn't include the user's data(obviously because he didn't answer the survey form yet) how can I load the pie-chart once the user answered the survey form and not before. I tried using event listeners but it doesn't seems to solve the problem. this is the code for initiating the chart:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['result', 'number of people'],
            ['1',<%=Application["A1"]%>],
            ['2', <%=Application["A2"]%>],
            ['3', <%=Application["A3"]%>],
            ['4', <%=Application["A4"]%>],
        ]);

        var options = {
            title: 'תוצאות הסקר'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
        
    }
</script>

I have changed the code like you suggested and now it looks like this

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });

    let googleReady = false;
    let dataReady = false;

    google.charts.setOnLoadCallback(() => {
        console.log("google redy")
        googleReady = true;
        tryDraw();
    });


    const form = document.getElementById("form");
    form.addEventListener('submit', function () {
        console.log("data redy")
        dataReady = true;
        tryDraw();
    })
    
    function tryDraw() {

        if (googleReady && dataReady) {
            console.log("everything good")
            drawChart();
        }
    }
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['result', 'number of people'],
            ['1',<%=Application["A1"]%>],
            ['2', <%=Application["A2"]%>],
            ['3', <%=Application["A3"]%>],
            ['4', <%=Application["A4"]%>],
        ]);

        var options = {
            title: 'תוצאות הסקר'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);

    }
</script>

when I summitted the form and looked an the console all 3 logs were there which means everything runs perfectly the chart starts to load but the page refreshes right when i press submit and the chart disappears. can you offer a solution to the page refreshing?

Answer 1

The google.charts.setOnLoadCallback(drawChart); statement invokes the draw function as soon as the charts library is ready, regardless of whether user data is ready.

One solution, not particularly sleek but explains the logic, is to set boolean variables that become true when the charts library is loaded and when user data is received.

Notably, instead of calling drawChart directly from the chart callback, set the callback to change the googleReady boolean and attempt a draw via another function tryDraw. Likewise, the boolean for user data being ready is set true when whatever event listener you have for it is triggered and a call to tryDraw is made. When both booleans are true, drawChart will be called from inside tryDraw

let googleReady = false;
let dataReady = false;

google.charts.setOnLoadCallback(() => {
  googleReady = true;
  tryDraw();
});


// whatever listener for user data present {
  dataReady = true;
  tryDraw();
  }
} // end listener

function tryDraw() {
  if(googleReady && dataReady) {
    drawChart();
  }
}