JSFiddle - React, Tailwind, and code Playground

by Ankit Mittal

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
  <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <table>
	  <tr>
    <td><div id="control3" align="center"></div></td>
	  </tr>
      <tr>
      <td><div id="filter_div"></div></td>
      <td><div id="filter_div1"></div></td>
      </tr>
      </table>
      <div id="chart1"></div>
      <div id="chart3"></div>
	  <div id="chart2" align="center"></div>
    </div>

JavaScript

google.charts.load('current', {'packages':['corechart', 'table', 'controls']});
      google.charts.setOnLoadCallback(drawDashboard);
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
['Location Type','Period','M602','M525','Average'],
['Branch','Nov-2015',75,120,97.5],
['Non-Branch','Nov-2015',200,85,142.5],
['Campus','Nov-2015',328,30,179],
['Branch','Dec-2015',30,100,65],
['Non-Branch','Dec-2015',50,100,75],
['Campus','Dec-2015',55,65,60]
        ]);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'M602'
          }
        });

        // Create a range slider, passing some options
        var donutRangeSlider1 = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div1',
          'options': {
            'filterColumnLabel': 'M525'
          }
        });

		var categoryPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'control3',
        state: {selectedValues: ['Non-Branch']},
        options: {
            filterColumnLabel: 'Location Type',
            ui: {
                labelStacking: 'vertical',
                allowTyping: false,
                allowMultiple: false,
                allowNone: false
        	    }
    	    }
	    });
        // Create a column chart, passing some options
        var ColumnChart = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'chart1',
          'options': {
          	'width': '900px',
        ...