データクエリ

このページでは、Chart Tools データソース プロトコルをサポートするデータソースにクエリを送信する方法について説明します。

目次

  1. Overview
  2. リクエストを送信する
  3. レスポンスの処理
  4. CSV ファイルの読み取り
  5. 詳細

概要

データソースは、グラフツールのデータソース プロトコルをサポートするウェブサービスです。データソースに SQL クエリを送信すると、適切な情報が入力された DataTable が返されます。データソースの例としては、Google スプレッドシートや SalesForce などがあります。

リクエストの送信

リクエストを送信するには:

  1. データソースの URL を使用して Query オブジェクトをインスタンス化します。URL では、リクエストされているデータを、そのデータソースで認識される構文で示す必要があります。
  2. 必要に応じて、Query オブジェクト コンストラクタのオプションの 2 番目のパラメータとしてメソッドを送信するなどのリクエスト オプションを指定します（詳細については、クエリ コンストラクタの opt_options パラメータをご覧ください）。
  3. 必要に応じて、クエリ文字列文字列を追加して結果の並べ替えまたはフィルタリングを行い、リクエストを送信します。データソースは、グラフツールのデータソース クエリ言語をサポートする必要はありません。データソースがクエリ言語をサポートしていない場合、SQL クエリ文字列は無視されますが、DataTable が返されます。クエリ言語は SQL 言語のバリアントです。詳しくは、クエリ言語の構文をご覧ください。
  4. レスポンスを受信したときに呼び出されるコールバック ハンドラを指定して、クエリを送信します。詳細については、次のセクションをご覧ください。

以下は、Google スプレッドシートのセル範囲のデータをリクエストする場合の例です。Google スプレッドシートの URL を取得する方法については、こちらをご覧ください。

function initialize() {
  var opts = {sendMethod: 'auto'};
  // Replace the data source URL on next line with your data source URL.
  var query = new google.visualization.Query('http://spreadsheets.google.com?key=123AB&...', opts);

  // Optional request to return only column C and the sum of column B, grouped by C members.
  query.setQuery('select C, sum(B) group by C');

  // Send the query with a callback function.
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  // Called when the query response is returned.
  ...
}

Apps Script 内からクエリを送信する場合は、必ず IFRAME モードを使用してください。

レスポンスの処理

リクエストが戻ると、レスポンス ハンドラ関数が呼び出されます。レスポンス ハンドラ関数に渡されるパラメータは google.visualization.QueryResponse 型です。リクエストが成功した場合、レスポンスにはデータテーブル（クラス google.visualization.DataTable）が含まれます。リクエストが失敗した場合、レスポンスにはエラーに関する情報が含まれますが、DataTable は含まれません。

レスポンス ハンドラでは、次のことを行う必要があります。

  1. response.isError() を呼び出して、リクエストが成功したか失敗したかを確認します。ユーザーにエラー メッセージを表示する必要はありません。可視化ライブラリにより、コンテナ <div> にエラー メッセージが表示されます。ただし、エラーを手動で処理する場合は、 goog.visualization.errors クラスを使用してカスタム メッセージを表示できます（カスタムエラー処理の例については、クエリラッパーの例をご覧ください）。
  2. リクエストが成功した場合、レスポンスには getDataTable() を呼び出して取得できる DataTable が含まれます。これをグラフに渡します。

次のコードは、前述の円グラフを描画するリクエストの処理方法を示しています。

function handleQueryResponse(response) {

  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240, is3D: true});
}

CSV ファイルの読み取り

CSV（カンマ区切り値）データからグラフを作成する場合、2 つの選択肢があります。CSV データを Google Chart のデータ可能形式に手動で変換するか、グラフを提供するウェブサーバーに CSV ファイルを配置し、このページの手法でクエリを実行します。

詳細情報

  • クエリ言語の構文 - データクエリを作成するために使用される言語の構文を説明します。
  • クエリクラス - クエリをラップするクラスのリファレンス ページ。
  • QueryResponse クラス - クエリに対するレスポンスをラップするクラスのリファレンス ページ。