How to add event handlers to dahsboard setup?

[Missy]

Hello, 

I am writing to seek help into, how do I merge the following event handler into my code further below:

            // When the table is selected, update the orgchart.

  google.visualization.events.addListener(TableContainer, 'select', function() {

    PieChartContainer.setSelection(TableContainer.getSelection());

  });

   google.visualization.events.addListener(PieChartContainer, 'select', function() {

    TableContainer.setSelection(PieChartContainer.getSelection());

==============================================================================

<title>Google Charts Example</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="//www.google.com/jsapi"></script>

    <script type="text/javascript">

        google.load('visualization', '1.1', { packages: ['controls'] });

    </script>

    <script type="text/javascript">

        function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {

            if (dataValues.length < 1)

                return;

            var data = new google.visualization.DataTable();

            data.addColumn('string', columnNames.split(',')[0]);

            data.addColumn('number', columnNames.split(',')[1]);

            data.addColumn('string', columnNames.split(',')[2]);

            data.addColumn('number', columnNames.split(',')[3]);

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

                data.addRow([dataValues[i].ColumnName, dataValues[i].Value1, dataValues[i].Value2, dataValues[i].Value3]);

            }

            // Define a category picker control for the Gender column

            var categoryPicker = new google.visualization.ControlWrapper({

                'controlType': 'CategoryFilter',

                'containerId': 'CategoryPickerContainer',

                'options': {

                    'filterColumnLabel': columnNames.split(',')[2],

                    'ui': {

                        'labelStacking': 'horizontal',

                        'allowTyping': false,

                        'allowMultiple': false,

                        'caption': categoryCaption,

                        'label': columnNames.split(',')[2]

                    }

                }

            });

            // Define a Pie chart

            var pie = new google.visualization.ChartWrapper({

                'chartType': 'PieChart',

                'containerId': 'PieChartContainer',

                'options': {

                    'width': 600,

                    'height': 350,

                    'legend': 'right',

                    'title': chartTitle,

                    'chartArea': { 'left': 50, 'top': 15, 'right': 0, 'bottom': 0 },

                    'pieSliceText': 'label',

                    'tooltip': { 'text': 'percentage' }

                },

                'view': { 'columns': [0, 1] }

            });

            // Define a table

            var table = new google.visualization.ChartWrapper({

                'chartType': 'Table',

                'containerId': 'TableContainer',

                'options': {

                    'width': '300px'

                }

            });

            // Define a StringFilter control for the 'Name' column

            var stringFilter = new google.visualization.ControlWrapper({

                'controlType': 'StringFilter',

                'containerId': 'control1',

                'options': {

                    'filterColumnLabel': columnNames.split(',')[0],

                }

            });

            // Define a slider control for the Age column.

            var slider = new google.visualization.ControlWrapper({

                'controlType': 'NumberRangeFilter',

                'containerId': 'SliderContainer',

                'options': {

                    'filterColumnLabel': columnNames.split(',')[3],

                    'ui': { 'labelStacking': 'horizontal' }

                }

            });

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

            

            // When the table is selected, update the orgchart.

  google.visualization.events.addListener(TableContainer, 'select', function() {

    PieChartContainer.setSelection(TableContainer.getSelection());

  });

   google.visualization.events.addListener(PieChartContainer, 'select', function() {

    TableContainer.setSelection(PieChartContainer.getSelection());

        }

         

    </script>

any help would be very much appreciated.

Many thanks.

[asgallant]

You should add the event listeners after you create the ChartWrappers but before you call the Dashboard's draw method.  Also, you need to pass the wrappers to the event handlers, not the container id's, and you need to call the #getChart method of each wrapper to get/set selections.  The event handlers would be set up like this:

google.visualization.events.addListener(table, 'select', function() {

    pie.getChart().setSelection(table.getChart().getSelection());

});

    

google.visualization.events.addListener(pie, 'select', function() {

    table.getChart().setSelection(pie.getChart().getSelection());

});