JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<div id="chart"></div>
<button onclick="refresh_graph();">GO</button>

JavaScript

function draw_chart(array) {
    var data = new google.visualization.arrayToDataTable(array);    
    
    var chart = new google.visualization.PieChart(document.getElementById('chart'));
    chart.draw(data);
}

function on_load(){
    draw_chart([["Gender","Total"],["F",89],["M",88]]);
}
function refresh_graph(){
    new Request.JSON({
        url: '/echo/json/',
        data: {
            json: JSON.encode({
                array: [["Gender","Total"],["F",58],["M",82 ]]
            }),
            delay : 1
        },
        onSuccess: function(response) {
            show_response(response);
        },
        onFailure: function(xhr){
            console.log('FAIL',xhr);
        },
        onError: function(text,error){
            console.log('ERROR',text,error);
        }
    }).send();
}

show_response = function (obj) {
    console.log('SUCCESS',obj);
    draw_chart(obj.array);
};

google.load("visualization", "1", {packages:["corechart"]});
// this is to simulate what happen on my website
// the function to draw the chart is called the first time after the onload event
setTimeout(on_load,1000);