一个COMBOCHART，通过控制和仪表板进行控制

我可以看到我的（var control=new google.visionation.ControlWrapper（｛controlType:'ChartRangeFilter'，containerId:'control'，），但我看不到我的（varComboChart=new google.Visionation.SchartWrapperUne chaîne vide aététransmiseà«getElementById（））

这是我的代码：

!function($) { 
    //google.load('visualization', '1.0', {'packages':['table']});
    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 <data.length;i++){
        $select.append($("<option>").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 control = new google.visualization.ControlWrapper({
                    controlType: 'ChartRangeFilter',
                    containerId: 'control',
                    options: {
                        // Filter by the date axis.
                        filterColumnLabel: 'cost_reportings_timestamp',
                        ui: {
                            chartType: 'LineChart',
                            chartOptions: {
                                chartArea: {
                                    width: '90%'
                                },
                                hAxis: {
                                    baselineColor: 'none'
                                }
                            },
                            // Display a single series that shows the closing value of the stock.
                            // Thus, this view has two columns: the date (axis) and the stock value (line series).
                            chartView: {
                                columns: [0,1]
                            }
                        }
                    },
                    //Initial range: 2010 to 2021
                    state: {
                        range: {
                            start: new Date(2012),
                            end: new Date(2019)
                        }
                    }
                })
             // Define a bar chart
                var ComboChart = new google.visualization.ChartWrapper({
                    chartType: 'ComboChart',
                    containerId: 'ComboChart',
                    options: {
                        width: 400,
                        height: 300,
                        seriesType: 'bars',
                        isStacked:'True',
                        hAxis: {
                            minValue: 0,
                            maxValue: 60
                        },
                        chartArea: {
                            top: 0,
                            right: 0,
                            bottom: 0
                        },
                    },
                    view: {columns: [0, 1, 2, 3]}
                });
             // 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 = $('<div>').attr('id','ComboChart');            
            $('#ComboChart').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 () {
            $('#ComboChart').toggle(); //If it is visible hide it or vice versa
              //..
        });
    function getTable() {
            $.getJSON('call/json/mytables', {}, function (response){
            console.log(response);
            populateSelectWithOptions("groupe", response);
        })
        }
}(jQuery);