One or more participants failed to draw()

[Alireza MOUSSAEI]

hello

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.batisense.com/batisense/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);

and i have this error

One or more participants failed to draw()×

janv. 2013janv. 2013févr. 2013févr. 2013mars 2013mars 2013avr. 2013avr. 2013mai 2013mai 2013juin 2013juin 2013juil. 2013juil. 2013août 2013août 2013

i can't see my ComboChart, could you help me???

[asgallant]

I see two potential issues here:

1) 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).

2) 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.

[asgallant]

Also, you shouldn't load the API twice:

google.load('visualization', '1', {packages: ['corechart']});
google.load('visualization', '1.1', {packages: ['controls']});

You need only the "controls" package here, and unless you specifically need to use the release candidate version, you should use version 1:

google.load('visualization', '1', {packages: ['controls']});

[Alireza MOUSSAEI]

hello, @asgallant thanks

but could you explain me here http://jsfiddle.net/armon000/ZQ9w3/2/


thanks

[armon000]

@asgallant  Again i test it with this code but i have the same error :

-----------------------------------------------------------------------------------------------------------------------------------------------------

!function($) {
   
   
    google.load('visualization', '1.1', {packages: ['corechart']});
    google.load('visualization', '1', {packages: ['controls']});
    google.setOnLoadCallback(initialize);
   
   

       function initialize(cityName) {

            // You can manipulate the variable response
            // Success! 

            var query = new google.visualization.Query('http://api.XXX.com/XXX/datasource?table=montmorin');

             
            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(drawDashboard);
        //console.log(response);
        }
      
       function drawDashboard(response) {
            // it's a good idea to include something like this to catch errors

            if (response.isError()) {
                alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                return;
            }
           
            var data = response.getDataTable();
            console.log(data);

            var namePicker= new google.visualization.ControlWrapper({
                controlType: 'ChartRangeFilter',
                containerId: 'filter_div',

                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 pieChart = new google.visualization.ChartWrapper({
                chartType: 'ComboChart',
                containerId: 'chart_div',

                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]}
            });
           

            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
            bind(namePicker, pieChart).
            draw(data);
           
       }         
}(jQuery);


could you explain me ??????

and this is the format of my JSON :   

google.visualization.Query.setResponse({"version":"0.6","status":"ok","sig":"266867977","table":{"cols":[{"id":"ecoadmin_building_name","label":"ecoadmin_building_name","type":"string","pattern":""},{"id":"ecoadmin_zone_name","label":"ecoadmin_zone_name","type":"string","pattern":""},{"id":"cost_reportings_cost","label":"cost_reportings_cost","type":"number","pattern":""},{"id":"cost_reportings_timestamp","label":"cost_reportings_timestamp","type":"date","pattern":""}],"rows":[{"c":[{"v":"Mairie de Montmorin"},{"v":"Bureau de M. le Maire"},{"v":0.0},{"v":new Date(2012,11,8)}]},{"c":[{"v":"Mairie de Montmorin"},{"v":"Bureau de M. le Maire"},{"v":0.0},{"v":new Date(2012,11,9)}]},{"c":[{"v":"Mairie de Montmorin"},{"v":"Bureau de M. le Maire"},{"v":0.453663},{"v":new Date(2012,11,10)}]},{"c":[{"v":"Mairie de Montmorin"},{"v":"Bureau de M. le Maire"},{"v":0.458649},{"v":new Date(2012,11,11)}]},{"c":[{"v":"Mairie de Montmorin"},{"v":"Bureau de M. le Maire"},{"v":0.44573},{"v":new Date(2012,11,12)}]},{"c":[{"v":"Mairie de Montmorin"},{"v":"Bureau de M. le Maire"},{"v":1.09863},{"v":new Date(2012,11,13)}]},{"c":[{"v":"Mairie de Montmorin"},{"v":"Bureau de M. le Maire"},{"v":0.429977},{"v":new Date(2012,11,14)}]},{"c":[{"v":"Mairie de Montmorin"},{"v":"Bureau de M. le Maire"},{"v":1.13331E-4},{"v":new Date(2012,11,15)}]},{"c":[{"v":"Mairie de Montmorin"},{"v":"Bureau de M. le Maire"},{"v":0.0},{"v":new Date(2012,11,16)}]},{"c":[{"v":"Mairie de Montmorin"},{"v":"Bureau de M. le Maire"},{"v":0.471569},{"v":new Date(2012,11,17)}]}

-----------------------------------------------------------------------------------------------------------------------------------------------------

[asgallant]

You need to fix your JSON dates.  The proper format is "Date(year, month, day)" (as a string), not new Date(year, month, day).  This is because JSON does not support dates, so the API has a predefined string format that it uses to create Date objects.  I'll look into the rest of your code when I get the chance.

[armon000]

but you know before this i test this code and i don't use the format  "Date(year, month, day)" :

!function($) {
   
    //google.load('visualization', '1.0', {'packages':['table']});

    //google.load('visualization', '1.1', {packages: ['corechart']});

    google.load('visualization', '1', {packages: ['controls']});
    google.setOnLoadCallback(initialize);
 

            // console.log(data);

                    containerId: 'chart_div',
                    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','chart_div');           

            $('#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);

and it work so good....!!!!!!!!!!!!

[asgallant]

I'm glad you got it working.

[armon000]

:) , no it dosn't work with dashbord and controls.

[armon000]

@ asgallant  please look at the code carefully, i need to this it's so important for me, thanks a lot before this you help me.

[armon000]

@asgallant  could you give me an example?

[armon000]

it don't work, there is no one to help me !!!!!!!!!!!!!!!!!

[asgallant]

I've looked at the code, and I don't see anything else that is obviously problematic.  If it isn't working, I need to see it failing.  Do you have it up on a webserver where I can test it? 

[armon000]

merci, you know last night you said to me that the problem is for the format of my data but at last i can't do it so i don't test it, could you explain it for me in here http://jsfiddle.net/armon000/ZQ9w3/2/ like i can be sur that we don't have any solution and after that i can send in your mail on files and you can test it, also i must to tell you that the format of my JSON is like this :

{id:"cost_reportings_timestamp", label:"cost_reportings_timestamp", type:"date", pattern:""}, {id:"Bureau de M. le Maire min-sum-cost_reportings_cost", label:"Bureau de M. le Maire", type:"number", pattern:""}, {id:"Salle de r\xE9union min-sum-cost_reportings_cost", label:"Salle de r\xE9union", type:"number", pattern:""}, {id:"Secr\xE9tariat / accueil min-sum-cost_reportings_cost", label:"Secr\xE9tariat / accueil", type:"number", pattern:""}], K:[{c:[{v:(new Date(1354921200000))}, {v:0}, {v:1.8221145868301392}, {v:1.0604355335235596}]}, {c:[{v:(new Date(1355007600000))}, {v:0}, {v:2.288118362426758}, {v:0}]}, {c:[{v:(new Date(1355094000000))}, {v:0.4536628723144531}, {v:2.1034255027770996}, {v:1.1031612157821655}]}, {c:[{v:(new Date(1355180400000))}, {v:0.4586494266986847}, {v:2.0204458236694336}, {v:1.9794343709945679}]}, {c:[{v:(new Date(1355266800000))}, {v:0.44572973251342773}, {v:2.406118154525757}, {v:1.0900148153305054}]}, {c:[{v:(new Date(1355353200000))}, {v:1.0 […]........

thanks a lot ....

[asgallant]

This format:

(new Date(1355094000000))

is not valid JSON, as JSON does not allow date objects.  You must convert it to a string like this:

"Date(1355094000000)"

Your code will fail if you don't make this change.

[armon000]

@asgallant could you tell me ow i ca do it ????

[armon000]

hello asgallant, i found it, the problem isn't for the format of data, actually i forget to add  "series"       series: {
                        0: {  // set the options for the first series (columns)
                            type: 'bars',
                            targetAxisIndex: 0
                        },
                        3: {  // set the options for the second series (line)
                            type: 'line',
                            targetAxisIndex: 1

                        }
                    }

On Tuesday, August 6, 2013 5:28:56 PM UTC+2, armon000 wrote: