JSFiddle - React, Tailwind, and code Playground

by Pierre LE ROUX

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="ex0"></div>

JavaScript

google.load("visualization", "1", {
          packages: ["corechart"]
      });
      google.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
          // Some raw data (not necessarily accurate)
          var data = google.visualization.arrayToDataTable([
              ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
              ['2004/05', 165, 938, 522, 998, 450, 614.6],
              ['2005/06', 135, 1120, 599, 1268, 288, 682],
              ['2006/07', 157, 1167, 587, 807, 397, 623],
              ['2007/08', 139, 1110, 615, 968, 215, 609.4],
              ['2008/09', 136, 691, 629, 1026, 366, 569.6]
          ]);

          var options = {
              title: 'Monthly Coffee Production by Country',
              vAxis: {
                  title: "Cups"
              },
              hAxis: {
                  title: "Month"
              },
              seriesType: "bars",
              isStacked: true,
              pointSize: 5,
              series: {
                  5: {
                      type: "line"
                  }
              }
          };

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