This exmpl works for 3 Columns

by forssux

HTML

<div id="dashboard_div"></div>Before manual pivot:
<div id="table1"></div>
<div id="namePicker_div"></div>
<div id="dashboardTable_div"></div>
<div id="lineChart_div"></div>
After manual pivot:
<div id="table2"></div>
<script type="text/javascript" src="http://www.google.com/jsapi">
    
</script>
<body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
        <table>
            <tr style='vertical-align: top'>
                <td style='width: 300px; font-size: 0.9em;'>
                    <div id="control1"></div>
                    <div id="control2"></div>
                    <!-- <div id="control3" style="display:none"></div> -->
                    <div id="control3" </div>
                </td>
                <td style='width: 600px'>
                    <div style="float: left;" id="chart1"></div>
                    <div style="float: left;" id="chart2"></div>
                </td>
            </tr>
        </table>
        <div id="dashboard1" />
        <div id="dashboard2" /></div>
</body>
    <script type="text/javascript">
    google.load('visualization', '1.1', { packages: ['controls']});
        // google.load('visualization', '1.1', {'packages':['controls','linechart']});

google.setOnLoadCallback(getData);
google.setOnLoadCallback(drawVisualization);
google.setOnLoadCallback(drawChart);
function getData() {
    ///// getting the data ////////

    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XGqGIs36krgKbRjufKJJNRdu1NUBZlgIJek2ojnOo2Y/edit#gid=967698286');

    // Apply query language statement.
    query.setQuery('SELECT A,B,C  ORDER BY C');

    // Send the query with a callback function.
    query.send(drawChart);


}

function drawChart(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var data = response.getDataTable();
    var table1 = new...