Two Dashboards

by cmill

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>


<div id="dashboardA">
    <div id="categoryPicker_A"></div><br />
    <div id="proxyTable_A" style="display:none;"></div>
    <div id="table_A"></div><br /><br />
</div>

<div id="dashboard_B">
    <div id="categoryPicker_B"></div><br />
    <div id="proxyTable_B" style="display:none;"></div>
    <div id="table_B"></div><br /><br />
</div>

JavaScript

google.charts.load('current', {
        'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
    });

    $(document).ready(function () {
        //console.log("ready!");
        renderChart_onPageLoad();
    });

    function renderChart_onPageLoad() {
        google.charts.setOnLoadCallback(function () {
            //console.log("renderChart_onPageLoad");
            drawDashboard_A("A");
            drawDashboard_B("B");
        });
    }

    function drawDashboard_A(suffix) {
        //console.log("drawDashboard");

        var data = google.visualization.arrayToDataTable([
            ['Name', 'RoolNumber', 'Gender', 'Age', 'DonutsEaten'],
            ['Michael', 1, 'Male', 12, 5],
            ['Elisa', 2, 'Female', 20, 7],
            ['Robert', 3, 'Male', 7, 3],
            ['John', 4, 'Male', 54, 2],
            ['Jessica', 5, 'Female', 22, 6],
            ['Aaron', 6, 'Male', 3, 1],
            ['Margareth', 7, 'Female', 42, 8],
            ['Miranda', 8, 'Female', 33, 6]
        ]);

        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_' + suffix));

        var categoryPicker = new google.visualization.ControlWrapper({
            controlType: 'CategoryFilter',
            containerId: 'categoryPicker_' + suffix,
            options: {
                filterColumnLabel: 'Gender',
                ui: {
                    labelStacking: 'vertical',
                    allowTyping: false,
                    allowMultiple: false
                }
            }
        });

        var proxyTable = new google.visualization.ChartWrapper({
            chartType: 'Table',
            containerId: 'proxyTable_' + suffix,
            options: {
                width: '500px'
            }
        });

        var table = new google.visualization.ChartWrapper({
            chartType: 'Table',
            containerId: 'table_' + suffix,
            options: {
                sort: 'event', // <-- set...