<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawSheetName);
function drawSheetName() {
var queryString = encodeURIComponent('SELECT B, C where B='Alabama'');
var magicIncantation = '/gviz/tq?sheet=Selector&headers=1&tq=';
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1xfb9trifQA5KDPc9Nh5hBL4MJ290Mxcc1Uod2VTPzYI' +
magicIncantation + queryString);
query.send(handleSampleDataQueryResponse);
}
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var optionsColumnChart = {
height: 400,
title: 'This is the title On Column Chart',
};
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('Columnchart_div'));
chart.draw(data, optionsColumnChart);
}
</script>
</head>
<body>
<div id="Columnchart_div" style="width: 100%;"></div>
</body>
</html>