JSFiddle - React, Tailwind, and code Playground

by dont_panic

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<button class="btn btn-success view_sales_year_btn">Generate Chart!</button>

<div id="chart_div1"></div>

JavaScript

// You can set up everything about your Google charts *before*
// you click the button.  Then the only thing you need to actually
// draw the chart are the values.
google.load('visualization', '1', {packages: ['corechart']});

// We don't want to draw the chart when Charts JS is loaded,
// so I commented out this line:
// google.setOnLoadCallback(drawChart1);

// Now modify your drawChart1() function to accept a parameter
// with the actual data to plot.  values will be the JSON data
// we got back from our AJAX call.
function drawChart1(values) {

  // Convert the JSON values to an array, as Google's DataTable
  // requires that.
	array = [];
	for (var i in values) {
  	array.push([i, values[i]]);
  }
  
  // Set up the DataTable with the array of data we got.  Add the
  // axix labels separately.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('number', 'Sales');
  data.addRows(array);

  var options = {
    title: 'Awesome Sales',
    hAxis: {
      title: 'Amounts may differ from Stripe',
      titleTextStyle: {
        color: 'blue'
      }
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
  chart.draw(data, options);
}

$(window).resize(function() {
  drawChart1();
});

$(document).on('click', '.view_sales_year_btn', function() {
    // This is JSFiddle's way of simulating an AJAX call - we get
    // the data we specify back.  This is just faking your AJAX to
    // your PHP.  Obviously I just made up some dummy data.
    $.ajax({
      type: "POST",
      url: "/echo/json/",
      dataType: 'json',
      data: {
      	json: '{"Jan": 1, "Feb": 2, "Mar": 3, "Apr": 5, "May": 4, "Jun": 4, "Jul": 5, "Aug": 6, "Sep": 5, "Oct": 5, "Nov": 7, "Dec": 8}'
      },
      success: function(values) {
        // values is the JSON data your PHP sends us.  So now we have
        // the genrated data, and Google Charts was already set up on
        // the page,...