饼图,仪表板,ControlWrapper,ComboChart

时间:2013-08-01 14:48:50

标签: javascript jquery ajax google-visualization

我有不同幻灯片的饼图:

   function drawChart(response) {
             if (response.isError()) {
             alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
             return;
        }   
             var data = response.getDataTable();
             var options = {'title':'XXXXXXXXXXX ........',
                           'width':900,
                           'height':300};
             var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
             chart.draw(data, options);
             // clickabale
             google.visualization.events.addListener(chart,'select', function(){;
                   var sel = chart.getSelection();
                   if(sel.length > 0) {
                       var building_name = data.getValue(sel[0].row, 0);
                       alert(building_name);
                       sendQueryBuildingName(building_name)            
       }
       });   
       } 

并知道我希望当我点击幻灯片时它会发送一个这样的查询:

   function sendQueryCityName(cityName) {

          var query = new google.visualization.Query('http://api.XXXX.com/XXXX/datasource?table='+cityName);
          query.setQuery('select cost_reportings_timestamp, sum (cost_reportings_cost) group by cost_reportings_timestamp pivot ecoadmin_zone_name where(ecoadmin_building_name = 'building_name')');             
          query.send(drawChart);
        console.log(response);
        }

在我的数据库上,然后将数据发送到条形图....

你可以帮我吗????

1 个答案:

答案 0 :(得分:1)

如果没有更具体的信息,我无法为您提供完整的解决方案,但这里有一些代码可以帮助您入门:

function drawChart(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }   
    var data = response.getDataTable();
    var options = {
        'title':'XXXXXXXXXXX ........',
        'width':900,
        'height':300
    };
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    // clickabale
    google.visualization.events.addListener(chart,'select', function(){
        var sel = chart.getSelection();
        if(sel.length > 0) {
            var building_name = data.getValue(sel[0].row, 0);
            alert(building_name);
            sendQueryBuildingName(building_name)            
        }
    });   
}
function sendQueryBuildingName(buildingName) {

    var query = new google.visualization.Query('http://api.XXXX.com/XXXX/datasource?table='+buildingName);
    query.setQuery('select cost_reportings_timestamp, sum (cost_reportings_cost) group by cost_reportings_timestamp pivot ecoadmin_zone_name where(ecoadmin_building_name = ' + buildingName + ')');             
    query.send(drawComboChart);
}
function drawComboChart (response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }   
    var data = response.getDataTable();
    var options = {
        'title':'XXXXXXXXXXX ........',
        'width':900,
        'height':300
    };
    var chart = new google.visualization.ComboChart(document.getElementById('combo_chart_div'));
    chart.draw(data, options);
}