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());
});
On Tuesday, December 10, 2013 12:03:11 PM UTC-5, Missy wrote:
>
> 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.
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
