3

我試圖通過計算每個值要創建從谷歌的可視化API數據的單個列一個餅圖,但我不斷收到以下錯誤信息:查詢無效:SELECT_WITH_AND_WITHOUT_AGG在谷歌查詢語言

Invalid query: SELECT_WITH_AND_WITHOUT_AGG: C 

信息

我的電子表格可以在這裏找到:https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/edit#gid=942634171

我想要做的就是創建一個計算的「什麼獨特的價值餅圖你是否來自'專欄,並繪製它們的相對比例。

柱本身可以在這裏看到:

Picture of spreadsheet column

所以我想借此一列,並從它創建一個表,上面寫着這樣的:

示例表

Corona      2 
Sunnyside     3 
Elmhurst     4 

等等。然後使用字符串/數字組合來填充餅圖。

使用常規的SQL你可以做SELECT列,COUNT(列)GROUP BY列,所以我假設類似的東西可以用於GQL。

到目前爲止,這些都是一些我已經試過查詢:

查詢:

'SELECT COUNT(C) GROUP BY C' 
'SELECT C, COUNT(C) GROUP BY C' 
'SELECT C, COUNT(C) PIVOT C 

但這些都沒有工作。

我也在我的控制檯收到此錯誤信息:

錯誤消息:

Console message

下面是我使用的腳本,涉及到我的問題:

SCRIPT

// Load the Visualization API and the controls package. 
    google.charts.load('current', {'packages':['corechart', 'controls']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var neighborhoodChart = new google.visualization.ChartWrapper({ 
     'chartType'  : 'PieChart', 
     'containerId' : 'chart_div2', 
     'dataSourceUrl' : 'https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=942634171', 
     'query'   : 'SELECT C, COUNT(C) GROUP BY C', 
     'options'  : { 
      'title'  : 'Neighborhood of Residence' 
     } 
    }); 

    neighborhoodChart.draw(); 
    } 

下面是它在被用於整個頁面腳本:

整個腳本

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<title>CDC Dashboard</title> 

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Bootswatch Theme --> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" > 

<!-- External style sheet --> 
<link rel="stylesheet" type="text/css" href="styles.css"> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<!--Load the AJAX API for Google Charts--> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

<script type="text/javascript" 
    src='https://www.google.com/jsapi?autoload={ 
    "modules":[{ 
    "name":"visualization", 
    "version":"1" 
    }] 
    }'></script> 

<script type="text/javascript"> 

    // Load the Visualization API and the controls package. 
    google.charts.load('current', {'packages':['corechart', 'controls']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var neighborhoodChart = new google.visualization.ChartWrapper({ 
     'chartType'  : 'PieChart', 
     'containerId' : 'chart_div2', 
     'dataSourceUrl' : 'https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=942634171', 
     'query'   : 'SELECT C, COUNT(C) GROUP BY C', 
     'options'  : { 
      'title'  : 'Neighborhood of Residence' 
     } 
    }); 

    neighborhoodChart.draw(); 
    } 

</script> 
</head> 

<body> 

<!-- Navbar to be affixed at the top --> 
<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
       <li><a href="index.html">What We Do</a></li> 
       <li><a href="serve.html">Who We Serve</a></li> 
      </ul> 
      </div> 
     </div> 
    </div> 
</nav> 


<div class="container-fluid"> 
    <div class="col-md-10 col-md-offset-1"> 
     <h1 class="text-center">Who We Serve</h1> 

     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <hr> 
      </div> 
     </div> 

      <h2 class="text-center">Understanding Our Clients</h2> 

      <div id="dashboard_div"> 
       <!--Divs that will hold each control and chart--> 
       <div class="row"> 
       <div class="col-md-6"> 
        <div id="filter_div"></div> 
       </div> 
       <div class="col-md-6"> 
        <div id="search_div"></div> 
       </div> 
       </div> 

       <div class="row"> 
       <div class="col-md-6"> 
        <div id="attendance_div"></div> 
       </div> 
       <div class="col-md-6"> 
        <div id="transport_div"></div> 
       </div> 
       </div> 

       <div id="chart_div"> 
       </div> 

       <div id="chart_div2"> 
       </div> 
      </div> 

      <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <hr> 
      </div> 
      </div> 

     <div id="storytime"> 
      <h2 class="text-center">Storytime</h2> 
     </div> 
    </div> 
</div> 
</body> 

</html> 

爲它工作的文件可以在這裏看到:https://s3-us-west-2.amazonaws.com/example-server/serve.html

UPDATE

理想情況下,我更喜歡一個解決方案,只有依賴於改變查詢本身,因爲這在語法上更清晰。我將在整個項目中多次執行此操作,並希望避免涉及額外代碼行的解決方法。

任何幫助將不勝感激。

回答

1

這應該工作,必須是一個錯誤或東西...

'SELECT C, COUNT(C) GROUP BY C'

不管,你可以使用data.visualization.data.group手動聚集列

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['controls', 'corechart', 'table'] 
 
}); 
 

 
function drawChart() { 
 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=942634171'); 
 
    query.setQuery('SELECT C'); 
 
    query.send(function (response) { 
 
    if (response.isError()) { 
 
     alert('Error: ' + response.getMessage() + ' - ' + response.getDetailedMessage()); 
 
     return; 
 
    } 
 

 
    var dataGroup = google.visualization.data.group(
 
     response.getDataTable(), 
 
     [0], 
 
     [{ 
 
     aggregation: google.visualization.data.count, 
 
     column: 0, 
 
     label: response.getDataTable().getColumnLabel(0), 
 
     type: 'number' 
 
     }] 
 
    ); 
 

 
    var neighborhoodChart = new google.visualization.ChartWrapper({ 
 
     chartType: 'PieChart', 
 
     containerId: 'chart_div', 
 
     dataTable: dataGroup, 
 
     options: { 
 
     height: 240, 
 
     title: 'Neighborhood of Residence' 
 
     } 
 
    }); 
 
    neighborhoodChart.draw(); 
 
    }); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>