ORGTable dashboard categorypicker

by forssux

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<div id="orgtable"></div>
<div id="dashboard_div" style="border: 3px solid #ccc">
    <br />
    <div id="chart_div">
        <!-- Line chart renders here -->
    </div>
    <div id="ChartRangecontrol_div">
        <!-- Controls renders here -->
    </div>
    <div id="linechart_div">
        <!-- Line chart renders here -->
    </div>
    <div id="namePicker_div">
        <!-- Table renders here -->
    </div>
    <div id="tablechart_div">
        <!-- Table renders here -->
    </div>
<div id="dashboard">
    <div id="control2"></div>
    <div id="chart2"></div>
    <div id="chart4"></div>
    <div id="categoryPick2"></div>
    <div id="lineChart"></div>
    <div id="table2"></div>
</div>

JavaScript

google.load('visualization', '1', {packages:['corechart','Table','controls'], callback: drawVisualization});
function drawVisualization() {
       ///// getting the data ////////

    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1mX7kQqfMNb1Fh8-NhwGUexsj1OgAlidTk4aXYaesvpE/edit#gid=0');

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

    // Send the query with a callback function.
    query.send(handleQueryResponse);
}
///// ----------------------- //////

function handleQueryResponse(response) {
    var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var data = response.getDataTable();

    var orgTable = new google.visualization.Table(document.getElementById('orgtable'));
    orgTable.draw(data, {});
    
    // Define a category picker control for the Gender column
    var categoryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Timestamp',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': true
            }
        }
    });
    
    // Define a category picker control for the Gender column
    var categoryPicker2 = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'categoryPick2',
        'options': {
            'filterColumnLabel': 'INGName',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': true
            }
        }
    });
    
    /*/Define a combo chart
    var combo = new google.visualization.ChartWrapper({
       ...