JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<div id="chart"></div>
<button id="refresh">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 show_response (obj) {
        console.log('SUCCESS',obj);
        data = new google.visualization.arrayToDataTable(obj.array);
        chart.draw(data);
    };
    
    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();
    }
    
    var refresh = document.querySelector('#refresh');
    if (document.addEventListener) {
        refresh.addEventListener('click', refresh_graph);
    }
    else if (document.attachEvent) {
        refresh.attachEvent('onclick', refresh_graph);
    }
    else {
        refresh.onclick = refresh_graph;
    }
}
if (typeof(console) == 'undefined') {
    // add a console dummy in IE8 so it won't complain
    console = {log: function () {}};
}

function on_load(){
    draw_chart([["Gender","Total"],["F",89],["M",88]]);
}
google.load("visualization", "1", {packages:["corechart"], callback: on_load});