Table Chart with Query

by dlaliberte

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1', {
        packages: ['table']
    });
</script>
<div id="visualization" style="height:400px; width:400px"></div>
<a href="https://docs.google.com/spreadsheets/d/1Hu1xJ-87QbyPyqe4iwxDVxmOl7pFYpLsn6hlOquFttQ/gviz/tq?tqx=out:html&amp;tq=select+B&amp;gid=2">
sheet</a>

JavaScript

var visualization;

function drawVisualization() {
    var query = new google.visualization.Query(
        //'https://docs.google.com/spreadsheets/tq?' +
        //'key=1Hu1xJ-87QbyPyqe4iwxDVxmOl7pFYpLsn6hlOquFttQ&gid=1'
        'http://spreadsheets.google.com/pub?key=rh_6pF1K_XsruwVr_doofvw'
    );
    query.setQuery('SELECT B');
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    if (response.isError()) {
        alert('error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var data = response.getDataTable();
    visualization = new google.visualization.Table(
            document.getElementById('visualization'));
    visualization.draw(data, null);
}
google.setOnLoadCallback(drawVisualization);