title: how we can connecte combochart with"Controls and dashboards"
body: <p>i have combochart </p>
  
  <pre><code>!function($) { 
      google.load('visualization', '1', {packages: ['corechart']});
      google.setOnLoadCallback(initialize);
  
      function populateSelectWithOptions(target, data)
      {
          console.log(data, typeof(data));
          var $select =$("#"+target);
          $select.empty();
          for(var i=0; i &lt;data.length;i++){
          $select.append($("&lt;option&gt;").attr("value", data[i]).text(data[i]));
          }
  
          $select.prop('disabled', false);
          $select.change(function (){
              var e = document.getElementById("groupe");
              var strUser = e.options[e.selectedIndex].value;
              //alert(strUser);
              sendQuery(strUser)
  
          });
  
          // baraie inke vaghti bara avalin bar safe lod mishavad dar chekbox chizi vojod dashte bashad
          $select.trigger('change');
          //console.log(populateSelectWithOptions(target, data));
          };
  
  
         function sendQuery(cityName) {
              // You can manipulate the variable response
              // Success!  
            var query = new google.visualization.Query('http://api.XXX.com/XXX/datasource?table='+cityName);
              query.setQuery("select (cost_reportings_timestamp), sum (cost_reportings_cost) group by (cost_reportings_timestamp)  pivot ecoadmin_zone_name");
              //Send the query with a callback function.
            query.send(drawChart);
          console.log(response);
          }
  
         function drawChart(response) {
               if (response.isError()) {
               alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
               return;
          }   
               var data = response.getDataTable();
               console.log(data);
               var options = {'title':'XXXXX ........',
  
                             'width':1000,
                             'height':600,
                             'seriesType': 'bars',
                             'isStacked':'True' 
                            };
               var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
               chart.draw(data, options);
               var chart2 = new google.visualization.Table(document.getElementById('chart_table'));
               chart2.draw(data, options);
  
  
               // clickabale        
         } 
          function initialize() {
              var $newDiv = $('&lt;div&gt;').attr('id','chart_div');            
              $('#reportingContainer').append($newDiv);
  
              $($newDiv).hide();  //hide the div here
  
              // Replace the data source URL on next line with your data source URL.
              // Specify that we want to use the XmlHttpRequest object to make the query.
              getTable();
          } 
               // baraie inke vaghti ro elemenha click mikonim piecharto ieshon bede
              $("#groupe").change( function () {
              $('#chart_div').toggle(); //If it is visible hide it or vice versa
                //..
          });
  
      function getTable() {
              $.getJSON('call/json/mytables', {}, function (response){
              console.log(response);
              populateSelectWithOptions("groupe", response);
          })
          }
      // request the data
      getTable();
  
  }(jQuery);
  </code></pre>
  
  <p>and kow i want to controls my ComboChart with one Controls and Dashborards, this is the codes: </p>
  
  <pre><code>!function($) { 
      google.load('visualization', '1', {packages: ['corechart']});
      google.load('visualization', '1.1', {packages: ['controls']});
      google.setOnLoadCallback(initialize);
  
      function populateSelectWithOptions(target, data)
      {
          console.log(data, typeof(data));
          var $select =$("#"+target);
          $select.empty();
          for(var i=0; i &lt;data.length;i++){
          $select.append($("&lt;option&gt;").attr("value", data[i]).text(data[i]));
          }
  
          $select.prop('disabled', false);
          $select.change(function (){
              var e = document.getElementById("groupe");
              var strUser = e.options[e.selectedIndex].value;
              //alert(strUser);
              sendQuery(strUser)
  
          }); 
          $select.trigger('change');
          };
         function sendQuery(cityName) {
  
            var query = new google.visualization.Query('http://api.XXX.com/XXX/datasource?table='+cityName);
  
            query.setQuery("select (cost_reportings_timestamp), sum (cost_reportings_cost) group by (cost_reportings_timestamp)  pivot ecoadmin_zone_name");
              //Send the query with a callback function.
            query.send(drawChart);
          console.log(response);
          }
  
         function drawChart(response) {
               if (response.isError()) {
               alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
               return;
          }   
               var data = response.getDataTable();
  
               var control = new google.visualization.ControlWrapper({
                      controlType: 'ChartRangeFilter',
                      containerId: 'control',
                      options: {
                          // Filter by the date axis.
                          filterColumnIndex: 0,
                          ui: {
                              chartType: 'LineChart',
                              chartOptions: {
                                  chartArea: {
                                      width: '90%'
                                  },
                                  hAxis: {
                                      baselineColor: 'none'
                                  }
                              },
  
                              chartView: {
                                  columns: [0,1]
                              }
                          }
                      },
                      //Initial range: 2010 to 2021
                      state: {
                          range: {
                              start: new Date(2012),
                              end: new Date(2019)
                          }
                      }
                  })
  
               // Define a bar chart
                  var barChart = new google.visualization.ChartWrapper({
                      chartType: 'ComboChart',
                      containerId: 'chart1',
                      options: {
                          width: 400,
                          height: 300,
                          hAxis: {
                              minValue: 0,
                              maxValue: 60
                          },
                          chartArea: {
                              top: 0,
                              right: 0,
                              bottom: 0
                          },
                      },
                      view: {columns: [0, 1]}
                  });
  
               // Create the dashboard.    
                  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
                  // Configure the slider to affect the bar chart
                  bind([control], [ComboChart]).
                  // Draw the dashboard
                  draw(data);
  
         } 
          function initialize() {
              var $newDiv = $('&lt;div&gt;').attr('id','chart_div');            
              $('#reportingContainer').append($newDiv);
  
              $($newDiv).hide();  //hide the div here
  
              // Replace the data source URL on next line with your data source URL.
              // Specify that we want to use the XmlHttpRequest object to make the query.
              getTable();
          } 
               // baraie inke vaghti ro elemenha click mikonim piecharto ieshon bede
              $("#groupe").change( function () {
              $('#chart_div').toggle(); //If it is visible hide it or vice versa
                //..
          });
  
      function getTable() {
              $.getJSON('call/json/mytables', {}, function (response){
              console.log(response);
              populateSelectWithOptions("groupe", response);
          })
          }
      // request the data
      getTable();
  
  }(jQuery);
  </code></pre>
  
  <p>and this is Structure of my  " var data = response.getDataTable(); "</p>
  
  <p>cost_reportings_timestamp, Bureau de M. le Maire, Salle de réunion, Secrétariat /accueil </p>
  
  <p>8 déc. 2012, 0.4536628723144531, 2.1034255027770996, 1.1031612157821655         </p>
  
  <p>but it doesn't works????!!!!!!</p>