JSFiddle - React, Tailwind, and code Playground

by forssux

HTML

<!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart', 'controls']}]}"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['annotationchart']}]}"></script>
  <body>
    <div id="dashboard">
<div id="negeri"></div>
<div id="chart_div"></div>
</div>
  </body>

JavaScript

// Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['controls']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

        function drawChart() {
    // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Foo');
    data.addColumn('number', 'Bar');
    data.addColumn('number', 'Baz');
    data.addColumn('number', 'Cad');
    data.addRows([
        ['2005',  45, 60, 89, 100],
        ['2006',  155, 50, 79, 24],
        ['2007',  35, 31, 140, 53],
        ['2008',  105, 23, 43, 82],
        ['2009',  120, 56, 21, 67],
        ['2010',  65, 19, 34, 134],
        ['2011',  80, 23, 130, 40],
        ['2012',  70, 140, 83, 90]
    ]);

    var columnsTable = new google.visualization.DataTable();
    columnsTable.addColumn('number', 'colIndex');
    columnsTable.addColumn('string', 'colLabel');
    var initState= {selectedValues: []};
    // put the columns into this data table (skip column 0)
    for (var i = 1; i < data.getNumberOfColumns(); i++) {
        columnsTable.addRow([i, data.getColumnLabel(i)]);
        // you can comment out this next line if you want to have a default selection other than the whole list
        initState.selectedValues.push(data.getColumnLabel(i));
    }

    var countryPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'negeri',
        dataTable: data,
        options: {
            filterColumnLabel: 'Negeri',
            ui: {
                labelStacking: 'vertical',
                allowTyping: false,
                allowMultiple: true
            }
        },
        // Define an initial state, i.e. a set of metrics to be initially selected.
        state: {'selectedValues': ['Kedah', 'Johor']}
    });

    var...