JSFiddle - React, Tailwind, and code Playground

by Abhishek Garg

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = new google.visualization.DataTable();
    data.addColumn('number', 'Day');
    data.addColumn('number', 'Avengers2');
    data.addColumn('number', 'Guardians of the Galaxy');
    data.addColumn('number', 'Captain America : The Winter Soldier');
    data.addColumn('number', 'Average');
    
 data.addRows([
        
        [2,  80, 15, 10,32.4],
        
     
        [6,    80, 35, 30, 7.7],
        [7,    80, 40,  35,9.6],
        
        [10,  80, 55, 50,11.6],
        [11,   80,  60,  55,4.7],
        [12,   80,  65,  60,5.2],
      
        [14,   80,  75,  70,3.4]
      ]);

  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {title: "Collections"},
    hAxis: {title: "Day of the week"},
    
    series: {
        0:{type: "area", areaOpacity: 1.0, color: '#f00'},
        1:{type: "area", areaOpacity: 1.0, color: '#ff0'},
        2:{type: "area", areaOpacity: 1.0, color: '#0f0'},
        3: {type: "line", color: '#000'}}
  };

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