JSFiddle - React, Tailwind, and code Playground

by Hiramoto Makiko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

JavaScript

function getJSONData(url, callback) {
  var xhr = new XMLHttpRequest();

  xhr.onerror = function() {
    console.log('error');
  }

  xhr.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      var response = this.response;
      if (typeof response === 'string') {
        response = JSON.parse(response);
      }

      callback(response, header);
    }
  };

  xhr.open('GET', url, true);
  console.log(xhr);
  return false; 
  
  xhr.responseType = 'json';
  xhr.send();
}
getJSONData("https://script.googleusercontent.com/macros/echo?user_content_key=4K8Gv2mgc-Xrwfr2wlsTY3Sd753gf4tMcVh3ALMNcwUQpnsQPvjhcMD3xm8UhIGD6U-8HsRnnE20kTMKhO8Nx2Bs8v15YGv0m5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnNfioblxsCpZjrw33v_uzGgpIuoZJq_VXLwTaZfbpa52dH0zvyGA1_d_rxe2sx9tHA&lib=McWIEl89q7rHDpjbGWUlflCytQL6T7oHE", function(json) {
    console.log(json);
});


var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            /* borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 2 */
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});