我有组合图
!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 <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 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 = $('<div>').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);
并且我想用一个控件和仪表板来控制我的 ComboChart，这是代码：
!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 <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)
});
$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 = $('<div>').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);
这是我的“ var data = response.getDataTable(); ”的结构
cost_reportings_timestamp, Bureau de M. le Maire, Salle de réunion, Secrétariat /accueil </p>
12 月 8 日 2012, 0.4536628723144531, 2.1034255027770996, 1.1031612157821655
但它不起作用？？？？？？！！！！！！