JSFiddle - React, Tailwind, and code Playground

by forssux

HTML

Before manual pivot:
<div id="table1"></div>After manual pivot:
<div id="table2"></div>
<script type="text/javascript" src="http://www.google.com/jsapi">
    
</script>
<body style="font-family: Arial;border: 0 none;"></body>
    <div id="dashboard">  </div>
        <tr style='vertical-align: top'>
            <td style='width: 300px; font-size: 0.9em;'>
                <div id="control1"></div>
                <div id="control2"></div>
                <!-- <div id="control3" style="display:none"></div> -->
                <div id="control3" style></div>
            </td>
            <div style="float: left;" id="chart1"></div>
            <div style="float: left;" id="chart2"></div>
            <div id="dashboard1">    </div>
            <div id="dashboard2">    </div>
            <div style="float: left;" id="chart3"></div>
            <div style="float: left;" id="chart4"></div>

JavaScript

google.load('visualization', '1.1', {
    packages: ['controls', 'table']
});
      function drawVisualization() {
		control1 = createDashboard1();
		control2 = createDashboard2();
		
		google.visualization.events.addListener(control1, 'statechange', function() {
			control2.setState(control1.getState());
			control2.draw();
		});
	  }
	  
	  function createDashboard1() {
        // Prepare the data.

    var data = google.visualization.arrayToDataTable([
        ['TimeStamp', 'Name', 'IngName', 'Level', 'DateStarted', 'Region'],
        ['20140101', 'Guy', 'Forssux', 14, '20130101', 'Antwerp'],
        ['20140102', 'Bart', 'MisterB', 11, '20120101', 'Antwerp'],
        ['20140103', 'Elu', 'Fly', 10, '20130201', 'Antwerp'],
        ['20140104', 'Lilie', 'WSHere', 8, '20130401', 'Antwerp'],
        ['20140105', 'Maaike', 'Neutster', 7, '20130501', 'Antwerp'],
        ['20140106', 'Peter', 'erazer', 14, '20130601', 'Antwerp'],
        ['20140107', 'Gunther', 'TheBeast', 14, '20121101', 'Antwerp'],
        ['20140108', 'Fred', 'scp4ever', 16, '20150101', 'Antwerp']
    ]);
          
        // Define a StringFilter control for the 'Name' column
        var stringFilter = new google.visualization.ControlWrapper({
          'controlType': 'StringFilter',
          'containerId': 'control1',
          'options': {
            'filterColumnLabel': 'Name'
          }
        });
            var ingnamePicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
            'containerId': 'ingnamePicker_div',
            'options': {
            'filterColumnLabel': 'IngName',
                'ui': {
                'labelStacking': 'vertical',
                    'allowTyping': false,
                    'allowMultiple': true,
                    'allowNone': false
            }
        },
            'state': {
            selectedValues: ['Forssux']
        }
    });
        // Define a table visualization
        var table = new...