JSFiddle - React, Tailwind, and code Playground

by Joviano Dias

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="marketingChartHolder">
	<div id="marketingChartControl" style="width: 100%"></div>
	<div id="marketingChart"></div>
	<div id='png'></div>
  <div id="totalHolder">
    <p>
    Placeholder
    </p>
  </div>
</div>

JavaScript

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
	var data = google.visualization.arrayToDataTable([
  ["Date", "Total"],
  [new Date("1/1/17"), 13],
  [new Date("1/2/17"), 15],
  [new Date("1/3/17"), 15],
  [new Date("1/4/17"), 23],
  [new Date("1/5/17"), 51],
  [new Date("1/6/17"), 17],
  [new Date("1/7/17"), 11],
  [new Date("1/8/17"), 18],
  [new Date("1/9/17"), 8],
  [new Date("1/10/17"), 34],
  [new Date("1/11/17"), 13],
  [new Date("1/12/17"), 21]
]);
  
  var dashboard = new google.visualization.Dashboard(document.getElementById('marketingChartHolder'));
	
	var dateSlider = new google.visualization.ControlWrapper({
		'controlType': 'DateRangeFilter',
		'containerId': 'marketingChartControl',
		'options': {
			'filterColumnLabel': 'Date',
		}
	});
	  
	var stockChart = new google.visualization.ChartWrapper({
		chartType: 'ColumnChart',
		containerId: 'marketingChart',
		options: {
			theme: 'material',
			legend: {
				position: 'bottom',
			},
			focusTarget: 'category',
			chartArea: {
				width: '95%',
				height: '90%',
			},
			width: $(document).width() * 0.98,
			height: $(document).height() * .70,
			vAxis: {
				viewWindow: {
					min: 0,
				},
			},
		}
	});
	
	google.visualization.events.addListener(stockChart, 'ready', function() {
      document.getElementById('png').innerHTML = '<button><a target="_blank" href="' + stockChart.getChart().getImageURI() + '">Get Image</a></button>';
			
			var dt = stockChart.getDataTable();
			console.log(dt);
	});
		
	dashboard.bind(dateSlider, stockChart);
	
	dashboard.draw(data);
}