JSFiddle - React, Tailwind, and code Playground

by willcom

HTML

<html>
<head>
<!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
  // Create and populate the data table.
google.charts.load('current', {'packages':['corechart', 'table']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
     
var members= ["MemberA","MemberB","MemberA","MemberA","MemberB","MemberA","MemberC"];
var events= ["Event1","Event1","Event1","Event2","Event2","Event3","Event3"];
var sales= [500,300,1000,4000,3000,3000,1000];

// Specify your colors here for each member
var vColours = {"MemberA": "red", "MemberB": "green", "MemberC": "blue"}; // in Bubble, replace this with a search for Members and format as text, with the text being 'Member's name': 'Member's colour'

var data = new google.visualization.DataTable();
data.addColumn('string', 'Event');
data.addColumn('string', 'Member');
data.addColumn('number', 'Sales');

for(i = 0; i < members.length; i++)
  data.addRow([events[i], members[i], sales[i]]);

var distinctMembers = data.getDistinctValues(1);

var viewColumns = [0];
var groupColumns = [];
for (var i = 0; i < distinctMembers.length; i++) {
    viewColumns.push({
        type: 'number',
        label: distinctMembers[i],
        calc: (function (x) {
            return function (dt, row) {
                return (dt.getValue(row, 1) == x) ? dt.getValue(row, 2) : 0;
            }
        })(distinctMembers[i])
    });
    groupColumns.push({
        column: viewColumns.length - 1,
        type: 'number',
        aggregation: google.visualization.data.sum
    });
}

var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);

var pivotedData = google.visualization.data.group(view, [0], groupColumns);

new google.visualization.ChartWrapper({
  chartType: 'Table',
  containerId: 'table-div',
  dataTable: pivotedData
}).draw();

var options = {
  vAxis: {title: 'Sales (totals)'},
  hAxis:...