Question

Is there a way to identify which control in a set of bound controls is changed by the user?

In this instance I want to know that in a set of 5 bound controls, the user just changed control 3.

I want to resize the div that the control is within, based on the number of distinct values the user has chosen. I can get these, but I cannot identify which control has been changed.

So, something like:

 var controlPicker1 = new google.visualization.ControlWrapper({
            "controlType": "CategoryFilter",
            "containerId": "control1",
            "options": {
            "filterColumnLabel": "Media source",
            "ui": {
                "labelStacking": "horizontal",
                "allowTyping": true,
                "allowMultiple": true
            }
            }
        });

        var view = new google.visualization.DataView(data);

        barChart = new google.visualization.ChartWrapper({
            "chartType": "BarChart",
            "containerId": "chart_div",
            "options": {
            "width": "100%",
            "height": "120%",
            "vAxis": {title: "Media source (Branch - Dialled number)"},
            "hAxis": {title: "Number of calls"},
            "fontSize": 14,
            "chartArea": {top: 0, right: 0, bottom: 0, height:"100%", width:"70%"}
            },
            "view": {"columns": [0,6,7,8,9,10,11]}
        });

        google.visualization.events.addListener(dashboard, "ready", function() {

                barChart.draw();

 resizeControl("control1", 50, barChart.getDataTable().getDistinctValues(1), 500);


            }

        });

        dashboard.bind(controlPicker1, controlPicker2);
        dashboard.bind(controlPicker2, controlPicker3);
        dashboard.bind(controlPicker3, controlPicker4);
        dashboard.bind(controlPicker4, controlPicker5);
        dashboard.bind(controlPicker5, barChart);
        dashboard.draw(view);
    }



    function resizeControl(name, total, div1, length) {
        var control=div1.length;
        if(total>control){
            var div=document.getElementById(name);
            var w=parseInt(div.style.width);
            var revs=($(this).width()/length);
            var newh = 35;
            for (var i=0; i <(control / revs); i++) {
                if(i>0)newh = newh+25;
            }
            newh + "px";
            $(div).height(newh);
        }
    }

Thanks,

H.

Answer 1

There’s not a lot of information in your post. So I’ll show you how to responder to a sort event in a Table.

google.visualization.events.addListener(table, 'sort',
  function(event) {
    data.sort([{column: event.column, desc: !event.ascending}]);
    chart.draw(view);
  });

So depending on your chart type:

google.visualization.events.addListener(map, 'select',
        function() {
          table.setSelection(map.getSelection());
        });

Find the event you want, add the listener to the chart.