我可以看到我的 (var control = new google.visualization.ControlWrapper({ controlType: 'ChartRangeFilter', containerId: 'control',) 我看不到我的 (var ComboChart = new google.visualization.ChartWrapper({ chartType: 'ComboChart', containerId: 'chart1',) 我的页面中有这个错误（一个或多个参与者无法绘制（））和控制台中的这个错误（[15:34:41,596] Une 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);