JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<div id="dashboard1">
    <table>
        <tr>
            <td style='width: 600px'>
                <div id="chart_div"></div>
            </td>
            <td></td>
            <td style='width: 500px'>
                <div id="piechart_div"></div>
            </td>
            <td>
                <div id="YearFilter_div"></div>
            </td>
        </tr>
    </table>
</div>
<div id="dashboard2">
    <table>
        <tr>
            <td style='width: 600px'>
                <div id="combochart_div"></div>
            </td>
            <td>
                <div id="YearFilter1_div"></div>
            </td>
        </tr>
    </table>
</div>

JavaScript

function drawChart() {
    /*
    var jsonData = $.ajax({
        url: "get_json_bar.php",
        dataType:"json",
        async: false
    }).responseText;
    */
    var jsonData = {"cols":[{"label":"year","type":"string"},{"label":"coursecode","type":"string"},{"label":"employed","type":"number"},{"label":"further_study","type":"number"},{"label":"unemployed","type":"number"},{"label":"unknown","type":"number"},{"label":"related job","type":"number"},{"label":"irrelevant job","type":"number"}],"rows":[{"c":[{"v":"2010"},{"v":"NDRTE"},{"v":16},{"v":8},{"v":12},{"v":3},{"v":13},{"v":3}]},{"c":[{"v":"2010"},{"v":"NDAVN"},{"v":10},{"v":0},{"v":0},{"v":0},{"v":10},{"v":0}]},{"c":[{"v":"2010"},{"v":"NDAIR"},{"v":10},{"v":0},{"v":0},{"v":0},{"v":10},{"v":0}]},{"c":[{"v":"2011"},{"v":"NDMEC"},{"v":4},{"v":2},{"v":1},{"v":0},{"v":1},{"v":3}]},{"c":[{"v":"2011"},{"v":"NDCTN"},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"2009"},{"v":"ndilm"},{"v":6},{"v":6},{"v":6},{"v":0},{"v":6},{"v":6}]},{"c":[{"v":"2009"},{"v":"NDAUT"},{"v":20},{"v":12},{"v":1},{"v":0},{"v":2},{"v":2}]},{"c":[{"v":"2009"},{"v":"ndcst"},{"v":4},{"v":4},{"v":4},{"v":0},{"v":4},{"v":4}]}]};
    var data = new google.visualization.DataTable(jsonData);
    
    var columnsTable = new google.visualization.DataTable();
    columnsTable.addColumn('number', 'colIndex');
    columnsTable.addColumn('string', 'colLabel');
    var initState= {selectedValues: []};
    
    for (var i = 2; i < data.getNumberOfColumns(); i++) {
        columnsTable.addRow([i, data.getColumnLabel(i)]);
        initState.selectedValues.push(data.getColumnLabel(i));
    }
    
    var YearFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'YearFilter_div',
        options: {
            filterColumnLabel: 'year',
            ui: {
                label: 'Year',
                allowTyping: false,
                allowMultiple: false,
               ...