JSFiddle - React, Tailwind, and code Playground

by Daniel Buttery

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('41', {packages: ['corechart', 'map', 'controls', 'table']});
</script>

<div id="filtername_div"></div>
<div id="dashboard_div">
    <div id="map1_div" style="height: 500px;"></div>
    <div id="chart2_div"></div>
    <div id="proxytable_div"></div>
</div>

JavaScript

var map1;
var chart1;

function getAllData() {
    //normaly this gets JSON data from a URL and then sends it to setTable for parsing
    console.log('getAllData');
    setTable();
}

function setTable() {
    console.log('setTable');
    var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [51.500667, -0.174566, 'Science Museum'],
          [51.518001, -0.125955, 'British Museum'],
          [51.523536, -0.070258, 'The Geffrye'],
          [51.519227, -0.058501, 'Dennis Severs\' House']
        ]);
    
    doCharts(data);
}

function doCharts(data) {
	console.log('doCharts');
    //-------------------Set default chart options------------------------     
    console.log('...chart options');
    var chartOptions = {
        colors: ['#fd7244', '#4d4d4f', '#69c96f', '#1b428d', '#623f99'],
        backgroundColor: 'transparent'
    };

    var mapOptions = {
        //zoomLevel: 2,
        showTip: true
    };

    //------------------------Setup each chart----------------------------          
    console.log('...create chart objects');
    map1 = new google.visualization.ChartWrapper({
        'chartType': 'Map',
        'containerId': 'map1_div',
        'options': mapOptions,
        // Set the columns to use
        'view': { 'columns': [0, 1, 2] }
    });

    chart2 = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'chart2_div',
        'options': chartOptions,
        // Set the columns to use
        'view': { 'columns': [2] }
    });

    //-----------------------Create Filter--------------------------------          
	console.log('...create filter');
    var varFName = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'filtername_div',
        'options': {
            'filterColumnLabel': 'Name',
            'ui': {
                'label': 'Name',
                'labelStacking': 'vertical',
               ...