title: Google charts: identify a specific control
body: <p>Is there a way to identify which control in a set of bound controls is changed by the user?</p>
  
  <p>In this instance I want to know that in a set of 5 bound controls, the user just changed control 3.</p>
  
  <p>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.</p>
  
  <p>So, something like:</p>
  
  <pre><code> 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&gt;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 &lt;(control / revs); i++) {
                  if(i&gt;0)newh = newh+25;
              }
              newh + "px";
              $(div).height(newh);
          }
      }
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>H.</p>