JSFiddle - React, Tailwind, and code Playground

by jarben

HTML

<html>
  <body>
    <script type="text/javascript" src="https://cdn.datamatic.io/runtime/echarts/3.5.4_160/api/api.js"></script>
    <script>
      var datamatic = new Datamatic("117670017722819924657");
      var chart = datamatic.chart("0B3wq5VFn9PllWjcybkkxUWFPTXc", {
        width: 577,
        height: 527
      });

      var sheetID = "1CY7M1luNinkN9mIQTO8rf_CDgGe-3bgs1-3r1TxWL9A";
      var getData = function() {
        return Datamatic.ajax.json("https://spreadsheets.google.com/feeds/list/" + sheetID + "/od6/public/values?alt=json");
      }

      chart.render(document.body).then(getData).then(function(sheet) {
        var data = [["category",	"value", "color"]];
        sheet.feed.entry.forEach(function(row) {
          data.push([
            row.gsx$category.$t,
            row.gsx$value.$t,
            row.gsx$color.$t
          ]);
        });
       	chart.setData(data);
      });

    </script>
  </body>
</html>