How to add listener event to controls

问题:

I am trying to figure out how I can get the controls ([categoryPicker, stringFilter]), trigger to draw table, instead of table loading by itself when the page loads.

I am little unsure, if I should be using (ready event) or (select event), to trigger this behavior. I could not find any examples online for rendering charts/table using controls. if anyone could provide some guide or example, that would be very much appreciated. I have started by declaring the listener events so far, in the code below:

  function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
        if (dataValues.length < 1)
            return;

        var data = new google.visualization.DataTable();
        data.addColumn('string', columnNames.split(',')[0], 'name');
        data.addColumn('number', columnNames.split(',')[1], 'price');
        data.addColumn('string', columnNames.split(',')[2], 'type');
        data.addColumn('datetime', columnNames.split(',')[3], 'date');

        for (var i = 0; i < dataValues.length; i++) {

            var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));

            data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);
        }


        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'TableContainer',
            'options': {
                'width': '900px'
            }
        });

        var categoryPicker = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'control2',
            'options': {
                'filterColumnLabel': columnNames.split(',')[3],
                'filterColumnIndex': '3',

                'ui': {
                    'labelStacking': 'horizontal',
                    'allowTyping': false,
                    'allowMultiple': false,
                    'caption': categoryCaption,
                    'label': 'Date',
                }
            }
        });

        // Define a StringFilter control for the 'Name' column
        var stringFilter = new google.visualization.ControlWrapper({
            'controlType': 'StringFilter',
            'containerId': 'control1',
            'options': {
                'filterColumnLabel': columnNames.split(',')[0]
            }
        });


        new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker, stringFilter], [table]).draw(data);

        google.visualization.events.addListener(categoryPicker, 'ready', selectHandler);
        function selectHandler() {
            var selection = categoryPicker.getSelection();

            //display table 

        };

        google.visualization.events.addListener(stringFilter, 'ready', selectHandler);
        function selectHandler() {
            var selection = stringFilter.getSelection();

            //display table

        };

    }

Please advise. Thanks in advance.

回答1:

There are a few ways you can handle this. The simple way is to start with the Table's container div hidden, and unhide it when the user first interacts with the controls. Add this code before you create your Dashboard object:

// create a one-time "ready" event handler for the table
// this fires when the table first draws
google.visualization.events.addOneTimeListener(table, 'ready', function () {
    // create a one-time "ready" event handler for the table that unhides the table
    // this fires when the user first interacts with the controls
    google.visualization.events.addOneTimeListener(table, 'ready', function () {
        document.querySelector('#' + table.getContainerId()).style.display = 'block';
    });
});

I recommend this method only for Tables, as drawing charts inside hidden divs can result in other problems.

A more powerful way (which allows you to do other things like data manipulation, aggregation, etc) is to use a dummy chart in the Dashboard. Create a new ChartWrapper to hold a dummy chart or table (personally, I prefer tables for this):

var dummy = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'DummyTable',
    options: {
        sort: 'disable' // disable sorting on the dummy table to reduce the number of event handlers spawned
    },
    view: {
        rows: [] // remove all rows from the view so it doesn't waste time rendering them in HTML
    }
});

Add a div to your HTML to contain the dummy, and hide it (either via inline style or CSS):

<div id="DummyTable" style="display: none;"></div>

Create a variable to hold your Dashboard object:

var dashboard = new google.visualization.Dashboard(document.getElementById('PieChartExample'));

Then set up a "ready" event handler for the Dashboard that creates "ready" event handlers for the dummy. The dummy will fire a "ready" event after it is redrawn when the user interacts with the controls, but will also fire one when it is first drawn. You can use this to fetch the data for your real table, do any manipulation/aggregation if required, and draw the table:

// create a one-time "ready" event handler for the Dashboard
// this fires when the Dashboard first draws
google.visualization.events.addOneTimeListener(dashboard, 'ready', function () {
    // create a "ready" event handler for the dummy
    // this fires whenever the user interacts with the controls
    google.visualization.events.addOneTimeListener(table, 'ready', function () {
        // get the data for the table
        var dt = dummy.getDataTable();
        // do any manipulation/aggregation here
        // set the table's data
        table.setDataTable(dt);
        // draw the table
        table.draw();
    });
});

Change your Dashboard.bind call to use the dummy instead of the real table:

dashboard.bind([categoryPicker, stringFilter], [dummy]);
dashboard.draw(data);