JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>
JavaScript
function drawChart() {
var query = new google.visualization.Query('http://docs.google.com/spreadsheet/tq?key=0AhCv9Xu_eRnSdHBELWZoZHRaQTl5VXdRa3JLTzByUlE&gid=1');
query.setQuery('SELECT A, B, C, D');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
chartArea: {width: '70%', height: '50%'},
fontName: ["Arial"],
colors:['#274358','#5e87a5','#a2cdf6'],
curveType: ['none'],
fontSize: ['11'],
hAxis: {title: 'Pneumococcal Vaccination Provided', titleTextStyle: {italic: false, color: 'black', fontSize: 12}},
legend: {position: 'right', textStyle: {color: 'black', fontSize: 12}},
lineWidth: 2,
pointSize: 7,
tooltip: {textStyle: {color: 'Black'}, showColorCode: false}
});
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});