3

各値をカウントして、Google ビジュアライゼーション API を使用して単一列のデータから円グラフを作成しようとしていますが、次のエラー メッセージが表示され続けます。

Invalid query: SELECT_WITH_AND_WITHOUT_AGG: C

情報

私のスプレッドシートはここにあります: https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/edit#gid=942634171

私がやりたいのは、「あなたの出身地はどこですか」列の一意の値をカウントし、それらの相対的な割合をプロットする円グラフを作成することです。

コラム自体はここで見ることができます：

スプレッドシートの列の画像

そこで、この 1 つの列を使用して、次のようなテーブルを作成したいと思います。

例の表

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

しかし、これらのどれも機能していません。

また、コンソールに次のエラー メッセージが表示されます。

エラーメッセージ：

コンソール メッセージ

私の問題に関連する私が使用しているスクリプトは次のとおりです。

脚本

// 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

アップデート

理想的には、クエリ自体の変更のみに依存するソリューションを好みます。これは構文的にクリーンであるためです。プロジェクト全体でこれを数回行う予定であり、余分なコード行を含む回避策は避けたいと考えています。

どんな助けでも大歓迎です。

4

1 に答える 1

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>

于 2016-11-16T18:45:06.140 に答える