JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?dummy=.js"></script>
<div id="chart_div" width="800px" height="600px"></div>
JavaScript
google.load('visualization', '1.0', {
'packages': ['table', 'corechart']
});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = google.visualization.arrayToDataTable([
['Thing', 'String', 'Num'],
['Mushrooms', 'foo', 42],
['Onions', 'bar', 50],
['Olives', 'foo', 42],
['Zucchini', 'foo', 50],
['Pepperoni', 'bar', 42]
]);
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{column: 2, test: function(value, row, column, table) {
return (value === 42 || value === 50) && table.getValue(row, 1) === 'bar'
}}]));
// Set chart options
var options = {
showRowNumbers: true
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Table(document.getElementById('chart_div'));
chart.draw(view, options);
};