JSFiddle - React, Tailwind, and code Playground

by Todd Levy

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="http://www.toddlevy.com/md/js/jquery.throttledresize.js"></script>
<div id="chart"></div>

CSS

body {background:#e6e6e6; width:80%; margin:1.5em auto;}

JavaScript

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Revenue');
    data.addColumn('number', 'Average Revenue');
    data.addRows([
      ['2004', 1000, 630],
      ['2005', 1170, 630],
      ['2006', 660, 630],
      ['2007', 1030, 630]
    ]);
    
    var options = {
      title: 'Revenue by Year',
      seriesType: "bars",
      series: {1: {type: "line"}},  
      vAxis: {title: 'Year',
              titleTextStyle:{color: 'red'}},
        colors:['red','black']
    };
    
    var chart = new google.visualization.ComboChart(document.getElementById('chart'));
    chart.draw(data, options);
}





      $(window).on("throttledresize", function( event ) {
				 initCharts();
			});

      function drawChart(data,options,elementId) {
        var chart = new google.visualization.PieChart(document.getElementById(elementId));
        chart.draw(data, options);
      }
      
           	
      	
      function initCharts() {	
	      var options = {
	        title: '',
	        legend: {position: 'none'},
         	width: '100%',
         	height: '100%',
	        pieSliceText: 'percentage',
	        colors: ['#0598d8', '#f97263'],
	        chartArea:{left:0,top:0,height:"100%",width:"100%"}
	        //pieSliceTextStyle: {color: '#ffffff', fontSize: 12}
	      };  
	      
	      
	      
	      
       	var data = google.visualization.arrayToDataTable([
          ['Gender', 'Overall'],
          ['M', 110],
          ['F', 20]
        ]);       	

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