データクエリ

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

目次

概要

データソースは、グラフツールのデータソース プロトコルをサポートするウェブサービスです。データソースに 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 Charts データテーブル形式に変換するか、CSV ファイルをグラフを表示するウェブサーバーに配置して、このページの手法でクエリします。

詳細情報

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