one COMBOCHART that control by Controls and dashboards

Question

i can see my (var control = new google.visualization.ControlWrapper({ controlType: 'ChartRangeFilter', containerId: 'control',) and i can't see my ( var ComboChart = new google.visualization.ChartWrapper({ chartType: 'ComboChart', containerId: 'chart1',) i have this error in my page (One or more participants failed to draw()) and this error in console ([15:34:41,596] Une chaîne vide a été transmise à « getElementById())

this is my code :

!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);

asgallant asgallant · Accepted Answer · 2013-08-06T16:11:38

This appears to be a duplicate of the issue posted in the Google Visualization API forums (here), but for the StackOverflow crowd, here is my response:

I see a few potential issues here:

you are populating a <select> element with options and then immediately firing the "change" event handler, which expects there to be a selected <option>, but you don't set a default selected option, so this will return null (or undefined, or error out, depending on how picky the browser is).
you are creating a new div with the id "ComboChart" and appending it to a div with the id "ComboChart". If "ComboChart" already exists, you are breaking the HTML rules that require elements to have unique IDs (which could cause this problem); if "ComboChart" doesn't already exist, then you are failing to append the new div to your DOM, and thus the chart has nowhere to draw.
the Visualization API has problems when loaded within another function call. Leave the google.load and google.setOnLoadCallback calls outside of any other functions to be safe
you are trying to load the Visualization API twice:
```
google.load('visualization', '1', {packages: ['corechart']});
google.load('visualization', '1.1', {packages: ['controls']});
```
when you should only load it once. You need the "controls" package to use the dashboard features, ControlWrappers, and ChartWrappers; and unless you have some specific need to use the release candidate, you should load version 1:
```
google.load('visualization', '1', {packages: ['controls']});
```

one COMBOCHART that control by Controls and dashboards

1 Answers