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

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

目次

  1. グラフでのデータ表現方法
  2. グラフで使用されるテーブル スキーマ
  3. DataTable と DataView
  4. DataTable の作成と入力
    1. 新しい DataTable を作成してから、addColumn()/addRows()/addRow()/setCell() を呼び出します。
    2. arrayToDataTable()
    3. JavaScript リテラル イニシャライザ
    4. データソース クエリの送信
  5. dataTableToCsv()
  6. 詳細情報

グラフでのデータ表現方法

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

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

 index: 1
type: number
label: 'Hours per Day'
'職場' 11
'食べる' 2
'通勤' 2
'テレビを見る' 2
'睡眠' 7

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

以下に、表でサポートされている要素とプロパティの一覧を示します。詳細については、コンストラクタの JavaScript リテラル パラメータの形式をご覧ください。

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

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

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

DataTable と DataView

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

DataTable は、元のデータテーブルを作成するために使用されます。DataView は、DataTable の読み取り専用ビューを提供するコンビニエンス クラスであり、リンクされた元のデータを変更せずに、行や列をすばやく非表示にしたり並べ替えたりするためのメソッドを備えています。2 つのクラスを簡単に比較します。

DataTable DataView
読み取りと書き込み 読み取り専用
空にして作成し、データを入力できる 既存の 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 Charts にデータ型を推測させることができます。
    • 列のデータ型を明示的に指定するには、ヘッダー行の type プロパティを使用してオブジェクトを指定します。
    • Google Charts で種類を推測できるようにするには、列ラベルに文字列を使用します。

例:

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 セル以上）の場合、他の方法よりも高速に処理できます。

デメリット:

  • 構文を正しく行うことが難しく、入力ミスも起こりがちです。
  • あまり読みやすいコードではありません。
  • JSON と非常によく似ていますが、同一ではありません。

例:

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>

詳細情報