JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>

JavaScript

function drawChart() {
    /*
    var jsonData = $.ajax({
        url:"getData.php",
        dataType:"json",
        async:false
    }).responseText;
    */
    // use the example json instead, for this demonstration
    var jsonData = '{"cols":[{"label":"User ID","type":"string"},{"label":"Group Name","type":"string"},{"label":"Requested Nodes","type":"number"},{"label":"Actual PE","type":"number"}],"rows":[{"c":[{"v":"user 1"},{"v":"ufhpc"},{"v":1},{"v":5.000}]},{"c":[{"v":"user 2"},{"v":"ufhpc"},{"v":1},{"v":7.000}]}]}';
    
    //Create our data table out of JSON data loaded from server
    var data=new google.visualization.DataTable(jsonData);
    
    // PieCharts expect 2 columns of data: a label and a value, so we need to use a DataView to restrict to 2 columns
    var view = new google.visualization.DataView(data);
    view.setColumns([0, 3]);
    
    //Instantiate and draw our chart, passing in some options
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(view, {
        width:400,
        height:240
    });
}

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);