JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="categoryFilter_dashboard_div">
    <br/>
    <div id="categoryFilter_control_div" style="padding-left: 2em"></div>
    <br/>
    <div id="categoryFilter_chart_div"></div>
</div>

JavaScript

google.load('visualization', '1.0', {
     'packages': ['corechart', 'table', 'gauge', 'controls']
 });
 google.setOnLoadCallback(drawCategoryFilter);

 function drawCategoryFilter() {

     var dashboard = new google.visualization.Dashboard(
     document.getElementById('categoryFilter_dashboard_div'));

     var control = new google.visualization.ControlWrapper({
         'controlType': 'CategoryFilter',
             'containerId': 'categoryFilter_control_div',

             'options': {
             'filterColumnIndex': 1,
                 'useFormattedValue': true,
                 'ui': {
                 'allowTyping': false,
                     'allowMultiple': true,
                     'selectedValuesLayout': 'belowStacked',
                 label: 'String'
             }
         }
     });

     var chart = new google.visualization.ChartWrapper({
         'chartType': 'Table',
             'containerId': 'categoryFilter_chart_div',
             'options': {
             'width': 400,
                 'height': 180,
         },
          'view': {
            'columns': [0,2]
        }
     });


     var response = [
         ['CPU', 1, 12],
         ['Memory', 2, 20],
         ['Disk', 3, 7],
         ['Network', 4, 54]
     ];

     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Metric');
     data.addColumn('number', 'id');
     data.addColumn('number', 'Value');

     data.addRows(response);

     for (var i = 0; i < data.getNumberOfRows(); i++) {
         data.setFormattedValue(i, 1, data.getValue(i, 0));
     }
     google.visualization.events.addListener(chart, 'ready', function () {
         if (control.getState().selectedValues.length > 0) {
             alert(control.getState().selectedValues);
         }

     });

     dashboard.bind(control, chart);
     dashboard.draw(data);
 }