DataTable と DataView

このページでは、グラフで使用される内部データ表現、データをグラフに渡すために使用されるDataTableとDataViewクラス、および DataTable をインスタンス化してデータを実装するさまざまな方法について説明します。

目次

  1. グラフによるデータの表現
  2. グラフで使用されるテーブル スキーマを教えてください。
  3. DataTables と DataView
  4. DataTable の作成と入力
    1. 新しい DataTable を作成してから、addColumn()/addRows()/addRow()/setCell() を呼び出します。
    2. arrayToDataTable()
    3. JavaScript のリテラル初期化子
    4. データソース クエリの送信
  5. dataTableToCsv()
  6. 詳細情報

グラフでのデータの表現

すべてのグラフはデータをテーブルに保存します。以下は、入力された 2 列のデータテーブルを簡略化したものです。

インデックス: 0
タイプ: 文字列
ラベル: 'タスク'

 インデックス: 1
タイプ: 数値
ラベル: 1 日あたりの時間
「職場」 11
「食べる」 2
「通勤」 2
「テレビを見る」 2
「睡眠」 7

データは、行、列として参照されるセルに格納されます。行はゼロベースの行インデックスであり、列は指定できるゼロ ID の列インデックスまたは一意の ID です。

表でサポートされている要素とプロパティの完全なリストは次のとおりです。詳細については、コンストラクタの JavaScript リテラル パラメータの形式をご覧ください。

  • 表 - 列と行の配列と、割り当て可能な任意の名前と値のペアのマッピング（省略可）。表レベルのプロパティは現在、グラフで使用されていません。
  • 列 - 各列は、必須のデータ型と、省略可能な文字列ラベル、ID、パターン、任意の名前/値プロパティのマップをサポートします。ラベルは、グラフで表示できるわかりやすい文字列です。ID は、列インデックスの代わりに使用できる任意の ID です。列は、コード内でゼロベースのインデックスまたはオプションの ID で参照できます。サポートされているデータ型のリストについては、DataTable.addColumn() をご覧ください。
  • 行 - 行はセルの配列で、割り当て可能な任意の名前と値のペアのマップ（省略可）です。
  • セル - 各セルは、列の型の実際の値と、指定した文字列形式のバージョン（省略可）を含むオブジェクトです。たとえば、数値列に 7 と、書式設定された値「7」が割り当てられます。 書式設定された値が指定された場合、グラフでは実際の値を使用して計算とレンダリングが行われますが、たとえばユーザーがポイントにカーソルを合わせたときなどに、書式設定された値が表示されることもあります。各セルには、省略可能な名前と値のペアのマップも用意されています。

グラフで使用されるテーブル スキーマ

グラフの形式はさまざまです。たとえば、円グラフには文字列の列と数値の列がある 2 列の表があり、それぞれの行がスライスを表し、最初の列はスライスのラベル、2 番目の列はスライスの値を表します。散布図では 2 つの数値列（各点が 1 つの列、2 つの列が点の X 値と Y 値）で構成されたテーブルを想定しています。必要なデータ形式については、グラフのドキュメントをご覧ください。

データテーブルとデータビュー

グラフのデータテーブルは、JavaScript では DataTable オブジェクトまたは DataView オブジェクトで表されます。DataTable の JavaScript リテラルまたは JSON バージョンが表示されることがあります。たとえば、グラフツールのデータソースからインターネット経由でデータが送信される場合や、ChartWrapper の入力値として表示される場合があります。

DataTable は、元のデータテーブルの作成に使用されます。DataView は、DataTable の読み取り専用ビューを提供する便利なクラスです。リンクされた元のデータを変更せずに、行や列をすばやく非表示または並べ替えることができます。以下に、2 つのクラスを簡単に比較します。

データテーブル データビュー
読み取りと書き込み 読み取り専用
空に作成して入力できる DataTable への参照です。最初から入力できません。既存の DataTable への参照を使用してインスタンス化する必要があります。
データは保存容量を使用する。 データは既存の DataTable への参照であり、スペースを消費しません。
行、列、データを追加、編集、削除できます。すべての変更は永続的です。 元のデータを変更せずに、行の並べ替えやフィルタリングを行うことができます。行と列は、非表示にしたり繰り返し表示したりすることが可能です。
クローンを作成可能 DataTable バージョンのビューを返すことができる
ソースデータです。参照は含まれません。 DataTable のライブ参照。DataTable データを変更すると、すぐにビューに反映されます。
データソースとしてグラフに渡すことができる データソースとしてグラフに渡すことができる
計算された列はサポートされていません 計算された列（他の列を組み合わせたり操作したりすることでその場で計算される値を持つ列）をサポートします。
行や列が非表示になっていない 選択した列の表示と非表示を切り替えられます

DataTable の作成とデータ入力

DataTable を作成してデータを入力する方法はいくつかあります。

空の DataTable + addColumn()/addRows()/addRow()/setCell()

手順:

  1. 新しい DataTable をインスタンス化する
  2. 列を追加する
  3. 1 つ以上の行を追加し、必要に応じてデータを入力します。空の行を追加して後で入力することもできます。行の追加または削除、セルの値の編集も個別に行えます。

メリット:

  • 各列のデータ型とラベルを指定できます。
  • ブラウザでテーブルを生成するのに適しており、JSON のリテラル メソッドよりも入力ミスが起こりにくくなります。

デメリット:

  • ウェブサーバーでプログラムによってページを生成する際に、DataTable コンストラクタに渡す JSON リテラル文字列を作成するよりも有用です。
  • ブラウザの速度にもよりますが、大きなテーブル（約 1,000 セル以上）で JSON リテラル文字列より遅くなる場合があります。

例:

この手法のさまざまなバリエーションを使用して同じデータ テーブルを作成する例を次に示します。

// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);



// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');
  data.setCell(3, 1, new Date(2007, 11, 28));
  data.setCell(4, 0, 'Floyd');
  data.setCell(4, 1, new Date(2005, 3, 13));
  data.setCell(5, 0, 'Fritz');
  data.setCell(5, 1, new Date(2007, 9, 2));

arrayToDataTable()

このヘルパー関数は、1 回の呼び出しで DataTable を作成してデータを入力します。

メリット:

  • ブラウザで実行される非常にシンプルで可読性の高いコード。
  • 各列のデータ型を明示的に指定するか、渡されたデータからタイプを Google Chart に推測させることができます。
    • 列のデータ型を明示的に指定するには、type プロパティを使用してヘッダー行でオブジェクトを指定します。
    • Google Chart が型を推測できるようにするには、列ラベルに文字列を使用します。

例:

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.


var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

JavaScript リテラル初期化子

JavaScript のリテラル オブジェクトをテーブル コンストラクタに渡して、テーブル スキーマと、必要に応じてデータも定義できます。

メリット:

  • ウェブサーバーでデータを生成する場合に役立ちます。
  • 大きなテーブル（約 1,000 セル以上）では他のメソッドよりも高速に処理

デメリット:

  • 構文がわかりにくく、入力ミスが起こりがちです。
  • コードが読みづらい。
  • 一時的に似ていますが、同一ではありません。

例:

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

データソース クエリの送信

グラフツールのデータソースにクエリを送信した場合、正常に返されるのは DataTable インスタンスです。この返された DataTable は、他の DataTable と同じように DataView にコピー、変更、コピーできます。

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

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

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

dataTableToCsv()

ヘルパー関数 google.visualization.dataTableToCsv(data) は、データテーブルのデータを含む CSV 文字列を返します。

この関数への入力は、DataTable または DataView のいずれかです。

セルの書式設定された値を使用します。列ラベルは無視されます。

「,」や「\n」などの特殊文字は、標準の CSV エスケープルールを使用してエスケープします。

次のコードは、ブラウザの JavaScript コンソールに

Ramanujan,1729
Gauss,5050

を表示します。

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load("current", {packages:['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        ['Ramanujan', 1729],
        ['Gauss', 5050]
      ]);
    var csv = google.visualization.dataTableToCsv(data);
    console.log(csv);
  }
  </script>
  </head>
</html>

詳細情報