JSFiddle - React, Tailwind, and code Playground

by Jereman

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<form id="chartOptions" name="chartOptions">
<select id="chartRounds" name="rounds" onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
<label><input type="checkbox" id = "labelCheck" checked="checked" onclick="showLabels = !showLabels; renderChart();">Show labels</label>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>

JavaScript

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
var chart;
var chartOptions;
var chartData = [];					//Stores all data for the chart to display
var currentRound = 0;				//Stores the current displayed round
var criteriaSelected = [];
var chartText = [];
var chartRange = [];	//Stores selected criteria to display
window.onresize = function(){renderChart()};

//Display Options
var showLabels = true;
var barColors = [
		'#a90201',
    '#018701',
    '#016565',
    '#A94D01'
];

function getData(){
  chartData = $('.chartdata_information').data('chartdata');
  chartText = $('.text_information').data('text');
  chartRange = $('.minmax_information').data('minmax');
  // chartData.push(round);
  for (var i = 0; i < chartData.length; i++){
    var criteria = [];
    for (var j = 0; j < chartData[i].length; j++){
      criteria.push(true);
    }
    criteriaSelected.push(criteria);
  }
}

function generateData() {	//Generates random data for testing
  var rounds = 4;
  for(var i = 0; i < rounds; i++) {
    var criteriaNum = Math.floor(Math.random() * 5 + 5);
    var round = [];
    var criteria = [];
    var text = [];
    for(var j = 0; j < criteriaNum; j++) {
      round.push(Math.random() * 5);
      criteria.push(true);
      text.push("");
    }
    chartData.push(round);
    criteriaSelected.push(criteria);
    chartRange.push([0, 5]);
    chartText.push(text);
  }
}

function drawBasic() {	//Initializes all google chart information
  generateData();
  chartOptions = {		//Render options for the chart
    title: 'Class Average on Criteria',
    titleTextStyle: {
      fontName: 'arial',	//Fonts to be changed to Helvetica when implemented
      fontSize: 18,
      italic: false,
      bold: true
    },
    legend: 'none',
    bar: {
      groupWidth: 'default'
    },
    hAxis: {
      title: 'Criterion',
      titleTextStyle: {
        fontName: 'arial',
        fontSize: 14,
        italic: false,
       ...