JSFiddle - React, Tailwind, and code Playground

by Sub Taper

HTML

<script src="loader.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  ...
</script>
<form action="">
   <input type="checkbox" id="removeSeriesOnSelect" name="removeSeriesOnSelect" value="Bike">Remove series on deselect
   <br>
</form>

<div id="chart_div"></div>
<button id='b1'>Switch</button>

JavaScript

var button = document.getElementById('b1');
var current = 0;
var data = [];
var chart;
var options;
var ms2 = [{
   "LOCAL_ID": "W-133",
   "Class1": 29,
   "Class2": 3628,
   "Class3": 159,
   "Class4": 24,
   "Class5": 65,
   "Class6": 12,
   "Class7": 0,
   "Class8": 12,
   "Class9": 110,
   "Class10": 41,
   "Class11": 0,
   "Class12": 0,
   "Class13": 0
}, {
   "LOCAL_ID": "14-6A-060",
   "Class1": 19,
   "Class2": 290,
   "Class3": 224,
   "Class4": 0,
   "Class5": 0,
   "Class6": 0,
   "Class7": 0,
   "Class8": 2,
   "Class9": 0,
   "Class10": 0,
   "Class11": 1,
   "Class12": 0,
   "Class13": 0
}, {
   "LOCAL_ID": "45-5-006",
   "Class1": 7,
   "Class2": 191,
   "Class3": 165,
   "Class4": 0,
   "Class5": 6,
   "Class6": 3,
   "Class7": 0,
   "Class8": 4,
   "Class9": 18,
   "Class10": 11,
   "Class11": 0,
   "Class12": 0,
   "Class13": 10
}];



google.charts.load('current', {
   'packages': ['line']
});

google.charts.setOnLoadCallback(init);


button.onclick = function() {
   current = 1 - current;
   button.disabled = true;
   options.chart['subtitle'] = (current ? 'View 1' : 'View 2');
   chart.draw(data[current], options);
};


function getData() {
   var data = new google.visualization.DataTable();

   data.addColumn('number', 'Class');
   ms2.forEach(function(masterLocation, index) {
      data.addColumn('number', masterLocation.LOCAL_ID);
   });

   for (var i = 0; i < 13; i++) {
      var arr = [i];
      ms2.forEach(function(masterLocation, index) {
         arr.push(masterLocation['Class' + i]);
      });

      data.addRow(arr);
   }

   return data;
}

function getRandomData(base) {
   var data = new google.visualization.DataTable();
   data.addColumn('number', 'Class');
   data.addColumn('number', ms2[0].LOCAL_ID);
   data.addColumn('number', ms2[1].LOCAL_ID);
   data.addColumn('number', ms2[2].LOCAL_ID);


   // add random data
   var y1 = base,
      y2 = base,
      y3 = base;
   for (var i = 0; i < 13; i++) {
      y1 +=...