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>
</form>
<form id="chartCriteria" name="chartCriteria">
</form>

JavaScript

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

var chart;
var chartOptions;

var chartData = [];
var currentRound = 0;
var criteriaSelected = [];

function generateData() {
	var rounds = 3;

	for(var i = 0; i < rounds; i++) {
    var criteriaNum = Math.floor(Math.random() * 5 + 5);
  	
		var round = [];
    var criteria = [];
    for(var j = 0; j < criteriaNum; j++) {
    	round.push(Math.floor(Math.random() * 101));
      criteria.push(true);
    }
 		chartData.push(round);
    criteriaSelected.push(criteria);
  }
}

function drawBasic() {
	generateData();
  
  chartOptions = {		//Render options for the chart
  	title: 'Average Scores',
    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,
        bold: false
      },
      viewWindow: {
      	min: 0,
     		max: 10
      }
    },
    vAxis: {
    	title: 'Average Score',
      titleTextStyle: {
      	fontName: 'arial',
        fontSize: 14,
      	italic: false,
        bold: false
      },
      viewWindow: {
      	min: 0,
        max: 100
      }
    }
  };
  
  chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  updateChart(currentRound);
	loadOptions();
}

function updateChart(roundNum) {
  currentRound = roundNum;
  renderChart();
  loadCriteria();
}

function renderChart() {
	var data = loadData();
  chart.draw(data, chartOptions);
}


function loadData() {
	var data = new google.visualization.DataTable();
  data.addColumn('number', 'Criterion');
	data.addColumn('number', 'Average Score');
  data.addColumn({type: 'string', role: 'style'});	//column for specifying the bar color

  for(var i = 0; i <...