GoogleVisualization API リファレンス

このページでは、GoogleVisualization API によって公開されるオブジェクトと、すべての可視化によって公開される標準のメソッドの一覧を示します。

注: GoogleVisualization API の名前空間は google.visualization.* です。

DataTable クラス

2 次元の変更可能な値テーブルを表します。DataTable の読み取り専用コピー（必要に応じて特定の値、行、列を表示するフィルタ）を作成するには、DataView を作成します。

各列にはデータ型と、ID、ラベル、パターン文字列などのオプションのプロパティが割り当てられます。

さらに、カスタム プロパティ（名前と値のペア）を任意のセル、行、列、またはテーブル全体に割り当てることができます。一部のビジュアリゼーションでは、特定のカスタム プロパティがサポートされています。たとえば、テーブル ビジュアリゼーションでは「style」というセル プロパティがサポートされています。これにより、レンダリングされたテーブルのセルにインラインの CSS スタイル文字列を割り当てることができます。ビジュアリゼーションのドキュメントには、ビジュアリゼーションがサポートするカスタム プロパティを記載する必要があります。

関連情報: QueryResponse.getDataTable

コンストラクタ

構文

DataTable(opt_data, opt_version)

opt_data

（省略可）テーブルの初期化に使用されるデータ。これは、データが入力されたテーブルで DataTable.toJSON() を呼び出して返される JSON か、テーブルの初期化に使用されたデータを含む JavaScript オブジェクトのいずれかです。JavaScript リテラル オブジェクトの構造については、こちらをご覧ください。このパラメータを指定しない場合は、新しい空のデータテーブルが返されます。

opt_version

（省略可）使用する送信プロトコルのバージョンを指定する数値。これは、グラフツール データソースの実装者のみが使用します。現在のバージョンは 0.6 です。

Details（詳細）

DataTable オブジェクトは、ビジュアリゼーションに渡されるデータを保持するために使用されます。DataTable は基本的な 2 次元の表です。各列のデータはすべて同じデータ型でなければなりません。各列には、データ型、その列のラベル（ビジュアリゼーションによって表示される場合がある）、ID を含む記述子があります。ID は、（列インデックスを使用する代わりに）特定の列を参照するために使用できます。DataTable オブジェクトは、特定の値、行、列、または DataTable 全体に割り当てられた任意のプロパティのマップもサポートします。ビジュアリゼーションでは、これらの機能を使用して追加機能をサポートできます。たとえば、テーブルのビジュアリゼーションでは、カスタム プロパティを使用して、個々のセルに任意のクラス名やスタイルを割り当てることができます。

テーブルの各セルに値が格納されます。セルには null 値か、その列で指定された型の値を指定できます。セルは、オプションで「書式設定された」データを取り込むことができます。これは、データの文字列バージョンであり、可視化によって表示するために書式設定されます。ビジュアリゼーションでは、書式設定されたバージョンを表示に使用できますが、必須ではありませんが、並べ替えや計算（グラフ上のポイントの配置場所の決定など）には、常にデータ自体が使用されます。たとえば、数値セルの値 1、2、3 に値「low」、「medium」、「high」を書式設定された値として割り当てることができます。

コンストラクタの呼び出し後にデータ行を追加するには、addRow()（単一行の場合）または addRows()（複数行の場合）を呼び出します。addColumn() メソッドを呼び出して、列を追加することもできます。行や列を削除する方法もありますが、行や列を削除するのではなく、DataTable の選択ビューである DataView を作成することを検討してください。

ビジュアリゼーションの draw() メソッドに渡された後に DataTable の値を変更しても、すぐにグラフは変更されません。変更を反映するには、draw() を再度呼び出す必要があります。

注: Google グラフでは、データテーブルに対する検証は行いません。（使用すると、グラフのレンダリングが遅くなります）。列が文字列を想定している数値を指定（またはその逆）した場合、Google Charts はできる限り理にかなった方法で値を解釈しますが、誤りを示すことはありません。

次の例は、上記の JavaScript の例と同じデータを含むリテラル文字列で DataTable をインスタンス化して入力する方法を示しています。

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

次の例では、新しい空の DataTable を作成し、上記と同じデータを手動で入力します。

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

メソッド

data.addRow();  // Add an empty row
data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value.

// Add a row with two cells, the second with a formatted value.
data.addRow(['Hermione', {v: new Date(1999,0,1),
                          f: 'January First, Nineteen ninety-nine'}
]);

data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined.
data.addRow(['Col1Val', , 'Col3Val']);     // Same as previous.

data.addRows([
  ['Ivan', new Date(1977,2,28)],
  ['Igor', new Date(1962,7,5)],
  ['Felix', new Date(1983,11,17)],
  ['Bob', null] // No date set for Bob.
]);

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}

{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

コンストラクタの JavaScript リテラル data パラメータの形式

DataTable を初期化するには、JavaScript 文字列リテラル オブジェクトを data パラメータに渡します。このオブジェクトを data オブジェクトと呼びます。このオブジェクトは、以下の説明に沿って手動でコーディングできます。また、Python の使用方法を理解し、サイトで使用できる場合は、ヘルパー Python ライブラリを使用することもできます。ただし、手動でオブジェクトを作成する場合は、このセクションで構文を説明します。

まず、3 つの行と 3 つの列（文字列、数値、日付型）を持つテーブルを記述する簡単な JavaScript オブジェクトの例を見てみましょう。

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

次に、この構文について説明します。

data オブジェクトは、必須の 2 つのトップレベル プロパティ cols と rows と、省略可能な p プロパティ（任意の値のマップ）で構成されます。

注: 表示されるすべてのプロパティ名と文字列定数では、大文字と小文字が区別されます。また、文字列値を受け取るものとして記述されるプロパティは、値を引用符で囲む必要があります。たとえば、型プロパティを数値として指定する場合、type: 'number' のようになりますが、値自体が数値として表現されます。v: 42

cols プロパティ

cols は、各列の ID と型を記述するオブジェクトの配列です。各プロパティは、次のプロパティを持つオブジェクトです（大文字と小文字は区別されます）。

• type（必須）: 列のデータのデータ型。次の文字列値をサポートします（後述の v: プロパティなど）。
  • 「boolean」- JavaScript のブール値（「true」または「false」）。値の例: v:'true'
  • 「number」- JavaScript 数値。値の例: v:7、v:3.14、v:-55
  • 「string」- JavaScript の文字列値。値の例: v:'hello'
  • 「date」- 時刻が切り捨てられた JavaScript の日付オブジェクト（ゼロベースの月）。値の例: v:new Date(2008, 0, 15)
  • 「datetime」- 時刻を含む JavaScript Date オブジェクト。値の例: v:new Date(2008, 0, 15, 14, 30, 45)
  • 「timeofday」 - 時間（0 は午前 0 時を示します）、分、秒、オプションのミリ秒を表す、3 つの数値とオプションの 4 列からなる配列。値の例: v:[8, 15, 0]、v: [6, 12, 1, 144]
• id（省略可）: 列の文字列 ID。テーブル内で一意である必要があります。ホストページで JavaScript の列にアクセスする際に複雑なエスケープをしなくても済むよう、基本的な英数字を使用します。JavaScript キーワードは選択しないように注意してください。例: id:'col_1'
• label（省略可）この列に対して一部のビジュアリゼーションに表示される文字列値。例: label:'Height'
• pattern（省略可）: 数値、日付、時間列の値を書式設定するためにデータソースによって使用された文字列パターン。これは参照用です。多くの場合、パターンを読み取る必要はなく、必須ではありません。Google ビジュアリゼーション クライアントは、この値を使用しません（セルの書式設定された値を読み取ります）。format 句を使用したクエリに対するレスポンスとして、データソースから DataTable が返された場合、その句で指定したパターンがこの値で返されます。推奨されるパターン標準は、ICU の DecimalFormat と SimpleDateFormat です。
• p （省略可）セルに適用されたカスタム値のマッピングであるオブジェクト。これらの値には、任意の JavaScript 型を指定できます。ビジュアル表示がセルレベルのプロパティをサポートしている場合、そのプロパティが説明されます。サポートしていない場合、このプロパティは無視されます。 例: p:{style: 'border: 1px solid green;'}

cols の例

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows プロパティ

rows プロパティは、行オブジェクトの配列を保持します。

各行オブジェクトには c という必須プロパティが 1 つあります。これは、その行のセルの配列です。また、オプションの p プロパティもあり、行全体に割り当てる任意のカスタム値のマップを定義します。ビジュアリゼーションが行レベルのプロパティをサポートしている場合は、それらが記述されます。サポートされていない場合は、このプロパティは無視されます。

セルのオブジェクト

テーブル内の各セルは、以下のプロパティを持つオブジェクトによって記述されます。

• v（省略可）: セルの値。データ型は列データ型と一致する必要があります。セルが null の場合、v プロパティは null にする必要がありますが、f プロパティと p プロパティは引き続き使用できます。
• f（省略可）: 表示用にフォーマットされた、v 値の文字列バージョン。通常、値は一致しますが、必ずしも一致させる必要はありません。そのため、v に Date(2008, 0, 1) を指定する場合は、このプロパティに「1 月 1, 2008」などの文字列を指定する必要があります。この値は v 値と照合されません。ビジュアリゼーションでは、この値は計算には使用されず、表示用のラベルとしてのみ使用されます。省略すると、デフォルトのフォーマッタを使用して、v の文字列バージョンが自動的に生成されます。f 値は、独自のフォーマッタを使用して変更することも、setFormattedValue() または setCell() で設定することも、getFormattedValue() で取得することもできます。
• p （省略可）セルに適用されたカスタム値のマッピングであるオブジェクト。これらの値には、任意の JavaScript 型を指定できます。ビジュアリゼーションがセルレベルのプロパティをサポートしている場合、それらについて説明します。これらのプロパティは、getProperty() メソッドと getProperties() メソッドで取得できます。 例: p:{style: 'border: 1px solid green;'}。

行配列内のセルは、cols 内の列の説明と同じ順序にする必要があります。null セルを示すには、null を指定するか、配列内のセルを空白のままにするか、末尾の配列メンバーを省略します。そのため、最初の 2 つのセルが null を含む行を指定するには、[ , , {cell_val}] または [null, null, {cell_val}] を指定します。

以下は、3 つの列があり、3 行のデータが入力されたテーブル オブジェクトの例です。

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

p プロパティ

テーブルレベルの p プロパティは、DataTable 全体に適用されるカスタム値のマップです。これらの値には、任意の JavaScript 型を指定できます。ビジュアリゼーションがデータテーブル レベルのプロパティをサポートしている場合は、それが記述されます。それ以外の場合は、このプロパティをアプリケーションで使用できます。 例: p:{className: 'myDataTable'}。

DataView クラス

基になる DataTable の読み取り専用ビュー。DataView を使用すると、列や行のサブセットのみを選択できます。また、列/行の順序変更や、列/行を複製することもできます。

ビューは基になる DataTable のライブ ウィンドウであり、データの静的スナップショットではありません。ただし、テーブル自体の構造を変更する場合は、次の点に留意する必要があります。

• 基になるテーブルから列を追加または削除すると、ビューには反映されず、ビューで予期しない動作が発生する可能性があります。これらの変更を反映するには、DataTable から新しい DataView を作成する必要があります。
• 基になるテーブルに対する行の追加または削除は安全であり、変更はすぐにビューに反映されます（ただし、この変更後に可視化で draw() を呼び出して、新しい行セットをレンダリングする必要があります）。なお、setRows() or hideRows() メソッドのいずれかを呼び出して行を除外したビューで、基になるテーブルの行を追加または削除した場合、予期しない動作になるので注意してください。新しい DataView を作成して、新しいテーブルを反映する必要があります。
• 既存のセルのセル値の変更は安全であり、変更はすぐに DataView に反映されます（ただし、新しいセル値をレンダリングするには、この変更後に可視化で draw() を呼び出す必要があります）。

別の DataView から DataView を作成することもできます。基盤となるテーブルまたはビューについて言及するときは常に、このレベルの直下にあるレベルを指します。つまり、この DataView の作成に使用されるデータ オブジェクトを指します。

DataView は計算列もサポートしています。これらの列は、ユーザーが指定した関数を使用してその場で計算される列です。たとえば、前の 2 つの列を合計した列や、別の列の日付の四半期を計算して表示する列を含めることができます。詳しくは、setColumns() をご覧ください。

行や列の表示と非表示を切り替えて DataView を変更する場合は、可視化に対して draw() を再度呼び出すまで、可視化には影響しません。

次に示すように、DataView.getFilteredRows() と DataView.setRows() を組み合わせて、目的のデータのサブセットで DataView を作成できます。

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
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));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

コンストラクタ

新しい DataView インスタンスを作成するには、次の 2 つの方法があります。

コンストラクタ 1

var myView = new google.visualization.DataView(data)

data

ビューを初期化するために使用される DataTable または DataView。デフォルトでは、ビューには基になるデータテーブルまたはビュー内のすべての列と行が元の順序で表示されます。このビューの行や列を表示または非表示にするには、適切な set...() メソッドまたは hide...() メソッドを呼び出します。

関連項目:

setColumns()、hideColumns()、setRows()、hideRows()

コンストラクタ 2

このコンストラクタは、シリアル化された DataView を DataTable に割り当てることで、新しい DataView を作成します。これは、DataView.toJSON() を使用してシリアル化した DataView の再作成に役立ちます。

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

データ

DataView.toJSON() を呼び出した DataView の作成に使用した DataTable オブジェクト。このテーブルが元のテーブルと異なる場合、予期しない結果になります。

viewAsJson

DataView.toJSON() によって返される JSON 文字列。これは、data DataTable で表示または非表示にする行を表します。

メソッド

// Show some columns directly from the underlying data.
// Shows column 3 twice.
view.setColumns([3, 4, 3, 2]);

// Underlying table has a column specifying a value in centimeters.
// The view imports this directly, and creates a calculated column
// that converts the value into inches.
view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]);
function cmToInches(dataTable, rowNum){
  return Math.floor(dataTable.getValue(rowNum, 1) / 2.54);
}

ChartWrapper クラス

ChartWrapper クラスは、グラフをラップし、グラフの読み込み、描画、データソースに対するクエリをすべて処理するために使用されます。このクラスは、グラフに値を設定して描画するための便利なメソッドを公開します。このクラスでは、クエリ コールバック ハンドラを作成する必要がないため、データソースからの読み取りが簡単になります。グラフを再利用するために簡単に保存することもできます。

ChartWrapper を使用するもう 1 つの利点は、動的読み込みを使用してライブラリの読み込み回数を減らすことができることです。また、ChartWrapper がチャート パッケージの検索と読み込みを自動的に処理するため、パッケージを明示的に読み込む必要はありません。詳しくは、以下の例をご覧ください。

ただし、現在のところ、ChartWrapper はグラフからスローされたイベントのサブセット（select、Ready、error）のみを伝播します。その他のイベントは ChartWrapper インスタンスを介して送信されません。それ以外のイベントを取得するには、getChart() を呼び出して、グラフ ハンドルでイベントを直接サブスクライブする必要があります。以下をご覧ください。

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

コンストラクタ

ChartWrapper(opt_spec)

opt_spec

（省略可）- グラフを定義している JSON オブジェクトか、そのオブジェクトのシリアル化文字列バージョン。このオブジェクトの形式については、drawChart() のドキュメントをご覧ください。指定しない場合、このオブジェクトによって公開される set... メソッドを使用して、適切なすべてのプロパティを設定する必要があります。

メソッド

ChartWrapper は以下の追加メソッドを公開します。

イベント

ChartWrapper オブジェクトは以下のイベントをスローします。イベントがスローされる前に ChartWrapper.draw() を呼び出す必要があるので注意してください。

例

次の 2 つのスニペットでは、対応する折れ線グラフが作成されます。最初の例では、JSON のリテラル表記を使用してグラフを定義します。2 番目の例では、ChartWrapper メソッドを使用してこれらの値を設定します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

同じグラフで、今度はセッター メソッドを使用しています。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

ChartEditor クラス

ChartEditor クラスは、ユーザーが可視化をその場でカスタマイズできるページはめ込みダイアログ ボックスを開くために使用されます。

ChartEditor を使うには:

1. charteditor パッケージを読み込みます。google.charts.load() で、「charteditor」パッケージを読み込みます。エディタでレンダリングするグラフタイプのパッケージを読み込む必要はありません。必要に応じてグラフエディタがパッケージを読み込みます。
2. カスタマイズするユーザーのグラフを定義する ChartWrapper オブジェクトを作成します。このグラフはダイアログに表示されます。ユーザーはエディタを使用して、グラフの再設計、グラフの種類の変更、ソースデータの変更を行えます。
3. 新しい ChartEditor インスタンスを作成し、「ok」イベントをリッスンするように登録します。このイベントは、ユーザーがダイアログの [OK] ボタンをクリックするとスローされます。受け取ったら、ChartEditor.getChartWrapper() を呼び出してユーザーが変更したグラフを取得する必要があります。
4. ChartEditor.openDialog() を呼び出し、ChartWrapper を渡します。ダイアログが開きます。ダイアログ ボタンを使用すると、ユーザーはエディタを閉じることができます。ChartEditor インスタンスは、スコープ内にある限り利用可能です。ユーザーがダイアログを閉じた後に自動的に破棄されることはありません。
5. コード内でグラフを更新するには、setChartWrapper() を呼び出します。

メソッド

オプション

グラフエディタでは、次のオプションがサポートされています。

イベント

グラフエディタは、次のイベントをスローします。

例

次のサンプルコードでは、折れ線グラフにデータが入力されたグラフエディタ ダイアログを開きます。ユーザーが [OK] をクリックすると、編集したグラフはページ上の指定された <div> に保存されます。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

データ操作方法

google.visualization.data 名前空間は、DataTable オブジェクトに対して SQL のようなオペレーション（結合や列の値によるグループ化など）を実行するための静的メソッドを保持します。

google.visualization.data 名前空間は、次のメソッドを公開します。

group()

入力された DataTable オブジェクトを受け取って SQL のような GROUP BY オペレーションを実行し、指定された列の値でグループ化された行を含むテーブルを返します。入力 DataTable は変更されないことに注意してください。

返されるテーブルには、指定されたキー列の値の組み合わせごとに 1 行が表示されます。各行にはキー列に加えて、キーの組み合わせに一致するすべての行の集計列値（指定された列のすべての値の合計やカウントなど）を含む 1 つの列が含まれます。

google.visualization.data 名前空間には有用な集計値（sum、count など）が含まれていますが、独自の集計値（standardDeviation や secondHighest など）を定義することもできます。独自のアグリゲータを定義する方法については、メソッドの説明の後に説明します。

構文

google.visualization.data.group(data_table, keys, columns)

data_table

入力 DataTable。これは、group() を呼び出しても変更されません。

keys

グループ化の基準となる列を指定する数値またはオブジェクトの配列。結果テーブルには、この配列のすべての列と、columns のすべての列が含まれます。数値の場合、グループ化の基準となる入力 DataTable の列インデックスです。オブジェクトの場合は、指定された列を変更できる関数が含まれます（たとえば、その列の値に 1 を加算します）。オブジェクトには次のプロパティが必要です。

• 列 - 変換を適用する dt の列インデックスである数値。
• 修飾子 - 1 つの値（各行のその列のセル値）を受け取り、変更された値を返す関数。この関数を使用して列の値を変更し、グループ化に役立てることができます。たとえば、日付列から四半期を計算する whatQuarter 関数を呼び出すと、API が行を四半期ごとにグループ化できます。計算された値は、返されたテーブルのキー列に表示されます。この関数は、このオブジェクト内でインラインで宣言することも、コード内の別の場所で定義した関数にすることもできます（呼び出しスコープ内に存在する必要があります）。API にはシンプルな修飾子関数が 1 つ用意されています。独自の便利な関数を作成する方法については、こちらの手順をご覧ください。この関数が受け入れることができるデータ型を把握し、その型の列でのみ呼び出す必要があります。また、この関数の戻り値の型を把握し、次に説明する type プロパティで宣言する必要があります。
• type - 関数の修飾子によって返される型。JavaScript の文字列型名（「number」や「boolean」など）にする必要があります。
• label - [省略可] 返された DataTable でこの列を割り当てる文字列ラベル。
• id - [省略可] 返された DataTable にこの列を割り当てる文字列 ID。

例: [0]、[0,2]、[0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

列

（省略可）キー列に加えて、出力テーブルに含める列を指定できます。行グループ内のすべての行は単一の出力行に圧縮されるため、その行グループに対して表示する値を決定する必要があります。たとえば、セットの最初の行の列値を表示したり、そのグループ内のすべての行の平均を表示したりできます。columns は、次のプロパティを持つオブジェクトの配列です。

• 列 - 表示する列のインデックスを指定する数値。
• aggregate - 行グループのこの列のすべての値の配列を受け取り、結果の行に表示する単一の値を返す関数。戻り値は、オブジェクトの type プロパティで指定された型にする必要があります。独自の集計関数を作成する方法については、以下で詳しく説明します。このメソッドが受け入れるデータ型を把握し、適切な型の列でのみ呼び出す必要があります。API には便利な集計関数がいくつか用意されていますリストについては、以下の指定された集計関数をご覧ください。独自の集計関数を作成する方法については、集計関数の作成をご覧ください。
• type - 集計関数の戻り値の型。JavaScript の文字列型名（「number」や「boolean」など）にする必要があります。
• label - [省略可] 返されたテーブルのこの列に適用する文字列ラベル。
• id - [省略可] 返されたテーブルのこの列に適用される文字列 ID。

戻り値

keys にリストされた列ごとに 1 つの列を持つ DataTable。columns にリストされた列ごとに 1 つの列があります。表はキー行の左から右に並べ替えられています。

例

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

指定された修飾子関数

API には、キーに渡すことができる以下の修飾子関数が用意されています。modifier パラメータを使用してグループ化の動作をカスタマイズします。

指定された集計関数

API には、列に渡すことができる次の集計関数が用意されています。aggregate パラメータ配列。

修飾子関数を作成する

group() 関数で行がグループ化される前に、キー値に対して簡単な変換を実行する修飾子関数を作成できます。この関数は 1 つのセル値を受け取り、その値に対して操作（値に 1 を追加するなど）を実行して返します。入力型と戻り値の型が同じ型である必要はありませんが、呼び出し元は入力型と出力型を認識している必要があります。日付を受け取り、四半期を返す関数の例を次に示します。

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

集計関数を作成する

行グループ内の一連の列値を受け取り、1 つの数値を返す集計関数を作成できます。たとえば、値のカウントや平均を返します。行グループ内の行数のカウントを返す、指定されたカウント集計関数の実装を次に示します。

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

join()

このメソッドは、SQL JOIN ステートメントと同様に、2 つのデータテーブル（DataTable または DataView オブジェクト）を 1 つの結果テーブルに結合します。2 つのテーブルの間に 1 つ以上の列ペア（key 列）を指定すると、出力テーブルには、指定した結合方法に従って行が含まれます。キーが一致しているかどうかに関係なく、両方のキーが一致する行のみ、1 つのテーブルのすべての行、両方のテーブルのすべての行です。結果テーブルには、キー列と、指定した追加列のみが含まれます。dt2 は重複するキーを持つことはできませんが、dt1 は重複できます。「キー」という用語は、特定のキー列の値ではなく、すべてのキー列の値の組み合わせを意味します。したがって、行にセル値が A | B | C で、列 0 と 1 がキー列である場合、その行のキーは AB です。

構文

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

dt1

dt2 と結合するための、入力された DataTable。

dt2

dt1 と結合するための、入力された DataTable。このテーブルに、同一のキーを複数含めることはできません（キーは、キー列の値の組み合わせです）。

joinMethod

結合タイプを指定する文字列。dt1 に dt2 行と一致する複数の行がある場合、出力テーブルには一致するすべての dt1 行が含まれます。次のいずれかの値を選択します。

• 「full」- キーが一致するかどうかにかかわらず、出力テーブルには両方のテーブルのすべての行が含まれます。一致しない行には null セルエントリが含まれ、一致した行は結合されます。
• 「inner」- キーが一致する行のみを含めるようにフィルタリングされた完全結合です。
• 「left」 - dt2 に一致する行があるかどうかにかかわらず、出力テーブルには dt1 のすべての行が含まれます。
• 「right」 - 出力テーブルには、dt1 に一致する行があるかどうかにかかわらず、dt2 のすべての行が含まれます。

keys

両方のテーブルで比較するキー列の配列。各ペアは 2 つの要素からなる配列で、1 つ目は dt1 のキー、2 つ目は dt2 のキーです。この配列では、インデックス、ID、ラベルで列を指定できます。getColumnIndex をご覧ください。
両方のテーブルで、列の型を同じにする必要があります。テーブルから行を含めるには、指定されたすべてのキーが joinMethod で指定されたルールに従って一致している必要があります。キー列は常に出力テーブルに含まれます。重複するキーを含めることができるのは、左側のテーブルである dt1 のみです。dt2 のキーは一意である必要があります。ここでの「キー」という用語は、個々の列の値ではなく、キー列の一意のセットを意味します。たとえば、キー列が A と B の場合、次の表には一意のキー値のみが含まれます（dt2 として使用できます）。

A	B
Jen	赤
Jen	青
Fred	赤

例: [[0,0], [2,1]] は、両方のテーブルの最初の列の値、および dt1 の 3 番目の列の値を dt1 の 2 番目の列と比較します。

dt1Columns

dt1 のキー列に加えて、出力テーブルに含める dt1 の列の配列。この配列は、インデックス、ID、ラベルで列を指定できます。getColumnIndex をご覧ください。

dt2Columns

dt2 のキー列に加えて、出力テーブルに含める dt2 の列の配列。この配列は、インデックス、ID、ラベルで列を指定できます。getColumnIndex をご覧ください。

戻り値

キー列、dt1Columns、dt2Columns を含む DataTable。この表は、キー列を基準に左から右に並べ替えられています。joinMethod が「inner」の場合、すべてのキーセルにデータを入力する必要があります。他の結合メソッドでは、一致するキーが見つからなかった場合、一致しないキーセルがテーブルの null になります。

例

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

フォーマッタ

GoogleVisualization API には、ビジュアリゼーションのデータの再フォーマットに使用できるフォーマッタが用意されています。これらのフォーマッタは、すべての行の指定された列の書式設定された値を変更します。以下の点にご注意ください。

• フォーマッタは書式設定された値のみを変更し、基になる値は変更しません。たとえば、表示される値は「$1,000.00」ですが、基になる値は「1000」のままになります。
• フォーマッタは一度に 1 つの列にのみ影響します。複数の列を再フォーマットするには、変更する各列にフォーマッタを適用します。
• ユーザー定義のフォーマッタも使用する場合、Google ビジュアリゼーションのフォーマッタによって、ユーザー定義のフォーマッタがすべてオーバーライドされます。

データに適用される実際の書式は、API を読み込んだ際の言語 / 地域から取得されます。詳しくは、 特定のロケールでのグラフの読み込み をご覧ください。

重要: フォーマッタは DataTable でのみ使用できます。DataView では使用できません（DataView オブジェクトは読み取り専用です）。

フォーマッタを使用する一般的な手順は次のとおりです。

1. 入力された DataTable オブジェクトを取得します。
2. 再フォーマットする列ごとに、次の操作を行います。
   1. フォーマッタのすべてのオプションを指定するオブジェクトを作成します。これは、一連のプロパティと値を含む基本的な JavaScript オブジェクトです。サポートされているプロパティについては、フォーマッタのドキュメントをご覧ください。（必要に応じて、オプションを指定してオブジェクト リテラル表記のオブジェクトで渡すことができます）。
   2. フォーマッタを作成して、オプション オブジェクトを渡します。
   3. formatter.format(table, colIndex) を呼び出し、DataTable と、再フォーマットするデータの列番号（ゼロベース）を渡します。各列に適用できるフォーマッタは 1 つのみです。2 番目のフォーマッタを適用すると、最初のフォーマッタの結果が上書きされるだけです。
      重要: 多くのフォーマッタでは、特別なフォーマットを表示するために HTML タグが必要です。ビジュアリゼーションが allowHtml オプションをサポートしている場合は、それを true に設定する必要があります。

次の例では、日付列の書式設定された日付値を長い日付形式（「2009 年 1 月 1 日」）に変更します。

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
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));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

ほとんどのフォーマッタは、次の 2 つのメソッドを公開します。

メソッド	説明
google.visualization.formatter_name(options)	コンストラクタ。ここで、formatter_name は特定の formatterclass 名です。 options - フォーマッタのオプションを指定する汎用 JavaScript オブジェクト。このオブジェクトは、そのフォーマッタに固有のプロパティを持つプロパティと値のペアを持つ汎用オブジェクトです。サポートされているオプションについては、各フォーマッタのドキュメントをご覧ください。次に、DateFormat オブジェクトのコンストラクタを呼び出して、2 つのプロパティを渡す 2 つの方法の例を示します。 // Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options);
format(data, colIndex)	指定された列のデータを再フォーマットします。 data - 再フォーマットするデータを含む DataTable。ここでは DataView を使用できません。 colIndex - フォーマットする列の 0 ベースのインデックス。複数の列の書式を設定するには、異なる colIndex 値を指定して、このメソッドを複数回呼び出す必要があります。

 

GoogleVisualization API には、次のフォーマッタが用意されています。

フォーマッタ名	説明
ArrowFormat	セル値が指定した値を上回るか下回るかを示す上矢印または下矢印を追加します。
BarFormat	色付きのバーを追加します。バーの方向と色によって、セルの値が指定した値を上回るか下回るかを示します。
ColorFormat	値が指定した範囲内にあるかどうかに応じて、セルに色を付けます。
DateFormat	Date 値または DateTime 値を 2009 年 1 月 1 日、1/1/09、2009 年 1 月 1 日など、複数の形式でフォーマットします。
NumberFormat	数値のさまざまな側面をフォーマットします。
PatternFormat	同じ行のセル値を任意のテキストとともに指定されたセルに連結します。

ArrowFormat

値が指定されたベース値を上回るか下回るかに応じて、数値セルに上矢印または下矢印を追加します。基本値と等しい場合、矢印は表示されません。

オプション

ArrowFormat は、コンストラクタに渡される次のオプションをサポートします。

Option	説明
base	底値を示す数値で、セル値との比較に使用されます。セル値が大きい場合は緑色の上矢印が、セル値が小さい場合は赤色の下矢印が表示され、同じ値の場合は矢印は表示されません。

サンプルコード

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

BarFormat

数値セルに色付きのバーを追加し、セル値が指定したベース値を上回るか下回るかを示します。

オプション

BarFormat は、コンストラクタに渡される次のオプションをサポートします。

Option	例 説明
base	セル値と比較する基本値となる数値。セルの値が大きい場合は底面の右側に描画され、低い場合は左側に描画されます。デフォルト値は 0 です。
colorNegative	バーの負の値のセクションを示す文字列。有効な値は「red」、「green」、「blue」です。デフォルト値は「red」です。
colorPositive	バーの正の値のセクションの色を示す文字列。有効な値は「red」、「green」、「blue」です。デフォルトは「blue」です。
drawZeroLine	負の値が存在する場合に 1 ピクセルの暗いベースラインを描画するかどうかを示すブール値。暗い色の線は、バーの目視スキャンを補正するためにあります。デフォルト値は「false」です。
max	棒の範囲の最大数値。デフォルト値はテーブルの最大値です。
min	棒の範囲の最小数値。デフォルト値はテーブル内の最小値です。
showValue	true の場合は値とバーが表示され、false の場合はバーのみが表示されます。デフォルト値は true です。
width	各棒の太さ（ピクセル単位）。デフォルト値は 100 です。

サンプルコード

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

ColorFormat

セルの値に応じて、数値セルの前景または背景に色を割り当てます。このフォーマッタは、コンストラクタでオプションを受け取らないという点で、一般的ではありません。代わりに、addRange() または addGradientRange() を必要に応じて何度でも呼び出し、色の範囲を追加してから format() を呼び出します。色は、使用可能な HTML 形式（「黒」、「#000000」、「#000」など）で指定できます。

メソッド

ColorFormat は、次のメソッドをサポートしています。

メソッド	説明
google.visualization.ColorFormat()	コンストラクタ。引数は取りません。
addRange(from, to, color, bgcolor)	セルの値に応じて、前景色や背景色をセルに指定します。指定した from～to の範囲の値を持つすべてのセルに color と bgcolor が割り当てられます。1 ～ 1,000 の範囲と 1,000 ～ 2,000 の範囲を作成しても、値 1,000 はカバーされないため、この範囲は非包括的なものであることを理解することが重要です。 from - [String、Number、Date、DateTime、または TimeOfDay] 範囲の下限（両端を含む）、または null。null の場合は -∞ に一致します。文字列の境界はアルファベット順に文字列の値と比較されます。 to - [文字列、数値、日付、日時、または TimeOfDay] 範囲の上限値（この値を含まない）、または null。null の場合は +∞ に一致します。文字列の境界はアルファベット順に文字列の値と比較されます。 色 - 一致するセル内のテキストに適用する色です。値は、「#RRGGBB」値または定義済みの色定数（例: #FF0000、赤）のいずれかです。 bgcolor - 一致するセルの背景に適用する色です。値は、「#RRGGBB」値または定義済みの色定数（例: #FF0000、赤）のいずれかです。
addGradientRange(from, to, color, fromBgColor, toBgColor)	セルの値に応じて、範囲から背景色を割り当てます。色は、下限の色から上限の上限の色までの範囲内でセルの値に合わせてスケーリングされます。addRange() とは異なり、このメソッドでは文字列値を比較できません。ヒント: 多くの場合、閲覧者が色の範囲を正確に判断するのは困難です。最も単純で読みやすい範囲は、完全な彩度から白までの範囲です（例:#FF0000 ～ FFFFFF）。 from - [Number、Date、DateTime、または TimeOfDay] 範囲の下限（両端を含む）、または null。null の場合は、-∞ と一致します。 to - [Number、Date、DateTime、または TimeOfDay] 範囲の上限値（この値を含まない）または null。null の場合は、+∞ と一致します。 色 - 一致するセル内のテキストに適用する色です。この色は、その値に関係なく、すべてのセルで同じ色になります。 fromBgColor - グラデーションの下端の値を保持するセルの背景色。値は、「#RRGGBB」値または定義済みの色定数（例: #FF0000、赤）のいずれかです。 toBgColor - グラデーションの上限の値を保持するセルの背景色。値は、「#RRGGBB」値または定義済みの色定数（例: #FF0000、赤）のいずれかです。
format(dataTable, columnIndex)	指定された列に書式を適用する標準の format() メソッド。

サンプルコード

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

DateFormat

JavaScript Date 値をさまざまな形式（2016 年 1 月 1 日、2016 年 1 月 1 日、2016 年 1 月 1 日など）でフォーマットします。

オプション

DateFormat は、コンストラクタに渡される次のオプションをサポートします。

Option	説明
formatType	日付の簡単な書式設定オプション。次の文字列値がサポートされます。2016 年 2 月 28 日の形式になります。 「short」 - 短い形式（例:「2016/2/28」 「medium」- メディア形式（例:「2016 年 2 月 28 日」 「long」 - Long 形式（例:「2016 年 2 月 28 日」 formatType と pattern の両方を指定することはできません。
pattern	値に適用するカスタム形式パターン。ICU の日付と時刻の形式に類似しています。例: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"}); formatType と pattern の両方を指定することはできません。パターンの詳細については、次のセクションをご覧ください。
timeZone	日付値を表示するタイムゾーン。これは、GMT + このタイムゾーン数（負の値も可）を示す数値です。日付オブジェクトはデフォルトで、作成元のパソコンと同じタイムゾーンで作成されます。このオプションは、その値を別のタイムゾーンで表示するために使用されます。たとえば、英国のグリニッジにあるパソコンで正午（pm）という Date オブジェクトを作成し、タイムゾーンを -5（options['timeZone'] = -5、米国では東部太平洋時間）に指定した場合、表示される値は正午 12 時となります。

メソッド

DateFormat は、次のメソッドをサポートしています。

メソッド	説明
google.visualization.DateFormat(options)	コンストラクタ。詳しくは、上記の「オプション」セクションをご覧ください。
format(dataTable, columnIndex)	指定された列に書式を適用する標準の format() メソッド。
formatValue(value)	指定された値のフォーマットされた値を返します。このメソッドでは DataTable は必要ありません。

サンプルコード

function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

日付パターンの詳細

サポートされているパターンの詳細は以下のとおりです。

このパターンは ICU の日付と時刻の形式に似ていますが、A e D F g Y u w W. のパターンはまだサポートされていません。パターンとの競合を避けるため、出力に表示するリテラル テキストは一重引用符で囲む必要があります。ただし、二重引用符は二重にする必要があります。たとえば、"K 'o''clock.'"

パターン	説明	出力例
GG	時代指定子。	「広告」
yy または yyyy	1 年です	1996
M	月。1 月について: M は 1 を生成する MM が 01 を生成する MMM では 1 月が生成されます MMMM の 1 月の収益	「7 月」 「07」
d	日。余分な「d」値を指定すると、先頭にゼロが追加されます。	10
h	12 時間スケールの時間。余分な「h」値を指定すると、先頭にゼロが追加されます。	12
H	24 時間スケールの時間。余分な Hk' 値を指定すると、先頭にゼロが追加されます。	0
m	分（時単位）。余分な「M」の値を指定すると、先頭にゼロが追加されます。	30
s	秒。余分な「s」値を指定すると、先頭にゼロが追加されます。	55
S	秒の小数点以下。余分な「S」の値は右側に 0 でパディングされます。	978
E	曜日。「Thursday」の出力は次のとおりです。 E は T を生成します。 EE または EEE の火または火 EEEE は火曜日に生成されます	「火」 「火曜日」
aa	AM / PM	「PM」
k	時間（1 ～ 24）。余分な「k」値を追加すると、先頭にゼロが追加されます。	24
K	AM/PM 単位の時間（0 ～ 11）。余分な「k」値を追加すると、先頭にゼロが追加されます。	0
z	タイムゾーン。タイムゾーン 5 の場合は、「UTC+5」となります。	「UTC+5」
Z	RFC 822 形式のタイムゾーン。タイムゾーン -5 の場合: Z、ZZ、ZZZ の場合は -0500 ZZZZ などが「GMT -05:00」と表示される	「-0800」 「GMT -05:00」
v	タイムゾーン（一般）。	「その他/GMT-5」
'	テキストのエスケープ	'日付=
''	単一引用符	''yy'

NumberFormat

数値列のフォーマット方法を記述します。書式設定オプションでは、3 桁ごとのマーカーとして使用する接頭辞記号（ドル記号など）や句読点を指定できます。

オプション

NumberFormat は、コンストラクタに渡される次のオプションをサポートします。

Option	説明
decimalSymbol	小数点マーカーとして使用する文字。デフォルトはドット（.）です。
fractionDigits	小数点の後に表示する桁数を指定する数値。デフォルトは 2 です。指定した桁数よりも多くの桁数を指定すると、より小さい値に 0 が表示されます。切り捨てられた値は四捨五入されます（5 を切り上げ）。
groupingSymbol	小数点の左側の数字を 3 の集合にグループ化するために使用される文字。デフォルトはカンマ（,）です。
negativeColor	負の値のテキストの色。デフォルト値はありません。値には、「red」や「#FF0000」など、使用可能な任意の HTML カラー値を指定できます。
negativeParens	ブール値。true は負の値をかっこで囲む必要があることを示します。デフォルトは true です。
pattern	フォーマット文字列。指定すると、negativeColor 以外のオプションはすべて無視されます。 形式文字列は ICU パターンセット のサブセットです。 たとえば、{pattern:'#,###%'} の場合、値が 10、7.5、0.5 の場合、出力値は「1,000%」、「750%」、「50%」になります。
prefix	値の文字列接頭辞（「$」など）。
suffix	値の文字列の接尾辞（例: %）。

メソッド

NumberFormat は、次のメソッドをサポートしています。

メソッド	説明
google.visualization.NumberFormat(options)	コンストラクタ。詳しくは、上記の「オプション」セクションをご覧ください。
format(dataTable, columnIndex)	指定された列に書式を適用する標準の format() メソッド。
formatValue(value)	指定された値のフォーマットされた値を返します。このメソッドでは DataTable は不要です。

サンプルコード

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

PatternFormat

指定した列の値を、任意のテキストとともに 1 つの列に結合できます。たとえば、名用の列と姓用の列がある場合、3 つ目の列に {last name}, {first name} を入力できます。このフォーマッタは、コンストラクタと format() メソッドの規則に従っていません。手順については、以下の「メソッド」セクションをご覧ください。

メソッド

PatternFormat は、次のメソッドをサポートしています。

メソッド	説明
google.visualization.PatternFormat(pattern)	コンストラクタ。オプション オブジェクトは取りません。代わりに文字列 pattern パラメータを受け取ります。これは、任意のテキストとともに、宛先列に挿入する列の値を記述する文字列です。プレースホルダを文字列に埋め込んで、埋め込む別の列の値を示します。プレースホルダは {#} です。ここで、# は使用するソース列のインデックスです。このインデックスは、以下の format() メソッドの srcColumnIndices 配列のインデックスです。リテラル { または } 文字を含めるには、{ または \} のようにエスケープします。リテラルの \ マークを含めるには、\\ としてエスケープします。 サンプルコード 次の例は、アンカー要素を作成するパターンのコンストラクタを示しています。1 番目と 2 番目の要素は format() メソッドから取得されています。 var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>');
format(dataTable, srcColumnIndices, opt_dstColumnIndex)	標準的な書式設定の呼び出し。いくつかの追加パラメータがあります。 dataTable - 操作対象の DataTable。 srcColumnIndices - 基になる DataTable からソースとして pull する 1 つ以上の（ゼロベース）列インデックスの配列。これはコンストラクタの pattern パラメータのデータソースとして使用されます。列番号は並べ替えた順序である必要はありません。 opt_dstColumnIndex - [省略可] pattern 操作の出力を配置する宛先列です。指定しない場合、srcColumIndices の最初の要素がデスティネーションとして使用されます。 表の後の書式設定の例をご覧ください。

4 列のテーブルの入力と出力の例をいくつか示します。

Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

サンプルコード

次の例は、2 つの列のデータを組み合わせてメールアドレスを作成する方法を示しています。DataView オブジェクトを使用して、元のソース列を非表示にします。

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', 'john@beatles.co.uk'],
  ['Paul McCartney', 'paul@beatles.co.uk'],
  ['George Harrison', 'george@beatles.co.uk'],
  ['Ringo Starr', 'ringo@beatles.co.uk']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

GadgetHelper

Google 可視化 API を使用するガジェットの作成を簡素化するヘルパークラス。

コンストラクタ

google.visualization.GadgetHelper()

メソッド

メソッド	戻り値	説明
createQueryFromPrefs(prefs)	google.visualization.Query	静的。google.visualization.Query の新しいインスタンスを作成し、そのプロパティをガジェットの設定の値に従って設定します。パラメータ prefs の型は _IG_Prefs です。 設定 _table_query_url は、クエリ データソース URL の設定に使用されます。 Preference _table_query_refresh_interval は、クエリの更新間隔（秒単位）を設定するために使用されます。
validateResponse(response)	ブール値	静的。パラメータ response のタイプは google.visualization.QueryResponse です。レスポンスにデータが含まれている場合は true を返します。クエリの実行に失敗し、レスポンスにデータが含まれていない場合は、false を返します。エラーが発生した場合、このメソッドではエラー メッセージが表示されます。

クエリクラス

Google スプレッドシートなどの外部データソースに、データのクエリを送信する際に使用できるオブジェクトは次のとおりです。

• クエリ - 送信データ リクエストをラップします。
• QueryResponse - データソースからのレスポンスを処理します。

クエリ

データソースに送信されるクエリを表します。

コンストラクタ

google.visualization.Query(dataSourceUrl, opt_options)

パラメータ

dataSourceUrl

（必須、文字列）クエリ送信先の URL。Google スプレッドシートについては、グラフとスプレッドシートのドキュメントをご覧ください。

opt_options

[省略可、オブジェクト] リクエストのオプションのマップ。注: 制限付きデータソース にアクセスする場合は、このパラメータを使用しないでください。サポートされているプロパティは次のとおりです。

• sendMethod - [省略可、文字列] クエリの送信に使用するメソッドを指定します。次のいずれかの文字列値を選択します。
  • 'xhr' - XmlHttpRequest を使用してクエリを送信します。
  • scriptInjection - スクリプト インジェクションを使用してクエリを送信します。
  • 'makeRequest' - [サポートが終了したガジェットでのみ使用できます] ガジェット API makeRequest() メソッドを使用してクエリを送信します。指定する場合は、makeRequestParams も指定する必要があります。
  • 'auto' - データソース URL の tqrt URL パラメータで指定されたメソッドを使用します。tqrt には、xhr、scriptInjection、makeRequest の値を指定できます。tqrt が指定されていないか、無効な値がある場合、デフォルトは同一ドメイン リクエストの場合は「xhr」、クロスドメイン リクエストの場合は「scriptInjection」になります。
• makeRequestParams - [オブジェクト] makeRequest() クエリのパラメータのマップ。sendMethod が「makeRequest」の場合にのみ使用され、必須です。

メソッド

メソッド	戻り値	説明
abort()	なし	setRefreshInterval() で開始された自動クエリ送信を停止します。
setRefreshInterval(seconds)	なし	send への最初の明示的な呼び出しから、指定された時間（秒数）ごとに send メソッドを自動的に呼び出すようにクエリを設定します。seconds は 0 以上の数値です。 このメソッドを使用する場合は、send メソッドを呼び出す前に呼び出す必要があります。 このメソッドをゼロ（デフォルト）で再度呼び出すか、abort() を呼び出してキャンセルします。
setTimeout(seconds)	なし	タイムアウト エラーが発生する前にデータソースが応答するのを待機する秒数を設定します。seconds は 0 より大きい数値です。 デフォルトのタイムアウトは 30 秒です。このメソッドを使用する場合は、send メソッドを呼び出す前に呼び出す必要があります。
setQuery(string)	なし	クエリ文字列を設定します。string パラメータの値には有効なクエリを指定する必要があります。 このメソッドを使用する場合は、send メソッドを呼び出す前に呼び出す必要があります。クエリ言語について学習する。
send(callback)	なし	データソースにクエリを送信します。callback には、データソースが応答したときに呼び出される関数にする必要があります。このコールバック関数は、google.visualization.QueryResponse 型の単一のパラメータを受け取ります。

QueryResponse

データソースから受け取ったクエリ実行のレスポンスを表します。このクラスのインスタンスは、Query.send の呼び出し時に設定されたコールバック関数に引数として渡されます。

メソッド

メソッド	戻り値	説明
getDataTable()	DataTable	データソースから返されたデータテーブルを返します。クエリの実行に失敗し、データが返されなかった場合は、null を返します。
getDetailedMessage()	文字列	失敗したクエリに関する詳細なエラー メッセージを返します。クエリの実行が成功すると、このメソッドは空の文字列を返します。返されるメッセージはデベロッパー向けのメッセージであり、技術情報（例: 「Column {salary} が存在しません」）が含まれています。
getMessage()	文字列	失敗したクエリに対して短いエラー メッセージを返します。クエリの実行が成功すると、このメソッドは空の文字列を返します。返されるメッセージは、「Invalid Query」や「Access Denied」など、エンドユーザー向けの短いメッセージです。
getReasons()	文字列の配列	0 個以上のエントリを含む配列を返します。各エントリは、クエリの実行中に発生したエラーまたは警告コードを含む短い文字列です。考えられるコードは次のとおりです。 access_denied: ユーザーには、データソースにアクセスする権限がありません。 invalid_query 指定されたクエリに構文エラーがあります。 data_truncated 出力サイズの制限により、クエリの選択に一致する 1 つ以上のデータ行が返されませんでした。（警告）。 timeout: クエリが予想時間内に応答しませんでした。
hasWarning()	ブール値	クエリの実行に警告メッセージがある場合、true を返します。
isError()	ブール値	クエリの実行が失敗し、レスポンスにデータテーブルが含まれていない場合、true を返します。クエリの実行が成功し、レスポンスにデータテーブルが含まれている場合は、<false> を返します。

エラーの表示

API には、ユーザーにカスタムエラー メッセージを表示するための関数がいくつか用意されています。これらの関数を使用するには、API がフォーマット済みエラー メッセージを描画するコンテナ要素（通常は <div>）をページ上に用意します。このコンテナは、可視化のコンテナ要素でも、エラーのみのコンテナでもかまいません。ビジュアリゼーションの包含要素を指定すると、エラー メッセージはビジュアリゼーションの上に表示されます。次に、以下の適切な関数を呼び出して、エラー メッセージを表示または削除します。

すべての関数は、名前空間 google.visualization.errors の静的関数です。

多くの可視化でエラーイベントがスローされます。詳細については、以下のエラーイベントをご覧ください。

カスタムエラーの例は、クエリラッパーの例で確認できます。

関数	戻り値	説明
addError(container, message, opt_detailedMessage, opt_options)	作成されたエラー オブジェクトを識別する文字列 ID 値。これはページ上で一意の値で、エラーの除去やエラーを含む要素の検索に使用できます。	指定されたテキストと書式で、指定されたページ要素にエラー表示ブロックを追加します。 container - エラー メッセージを挿入する DOM 要素。コンテナが見つからない場合、関数は JavaScript エラーをスローします。 message - 表示する文字列のメッセージ。 opt_detailedMessage - オプションの詳細なメッセージ文字列。デフォルトではマウスオーバー テキストですが、後述の opt_options.showInToolTip プロパティで変更できます。 opt_options - メッセージのさまざまな表示オプションを設定するプロパティを持つオプションのオブジェクト。次のオプションがサポートされています。 showInTooltip - ブール値。true は詳細なメッセージがツールチップ テキストとしてのみ表示され、false は短いメッセージの後のコンテナ本文内の詳細なメッセージを表示します。デフォルト値は true です。 type - エラータイプを記述する文字列。このメッセージに適用される CSS スタイルを決定します。サポートされている値は「error」と「warning」です。デフォルト値は「error」です。 style - エラー メッセージのスタイル文字列。このスタイルは、警告タイプ（opt_options.type）に適用されたスタイルをオーバーライドします。例: 'background-color: #33ff99; padding: 2px;' デフォルト値は空の文字列です。 removable - ブール値。true は、ユーザーによるマウスクリックでメッセージを閉じることができることを意味します。デフォルト値は false です。
addErrorFromQueryResponse(container, response)	作成されたエラー オブジェクトを識別する文字列 ID 値。レスポンスがエラーを示していない場合は null。これはページ上で一意の値で、エラーの除去やエラーを含む要素の検索に使用できます。	このメソッドにクエリ レスポンスとエラー メッセージ コンテナを渡します。クエリ レスポンスがクエリエラーを示している場合は、指定されたページ要素にエラー メッセージを表示します。クエリのレスポンスが null の場合、メソッドは JavaScript エラーをスローします。クエリハンドラで受け取った QueryResponse をこのメッセージに渡してエラーを表示します。また、タイプに適した表示スタイルも設定されます（addError(opt_options.type) と類似したエラーまたは警告）。 container - エラー メッセージを挿入する DOM 要素。コンテナが見つからない場合、関数は JavaScript エラーをスローします。 response - クエリへのレスポンスとしてクエリハンドラが受信した QueryResponse オブジェクト。これが null の場合、メソッドは JavaScript エラーをスローします。
removeError(id)	ブール値: エラーが削除された場合は true、それ以外の場合は false。	ID で指定されたエラーをページから削除します。 id - addError() または addErrorFromQueryResponse() を使用して作成されたエラーの文字列 ID。
removeAll(container)	なし	指定したコンテナからすべてのエラーブロックを削除します。指定したコンテナが存在しない場合は、エラーがスローされます。 container - 削除するエラー文字列を含む DOM 要素。コンテナが見つからない場合、関数は JavaScript エラーをスローします。
getContainer(errorId)	指定されたエラーを保持している DOM 要素へのハンドル。見つからなかった場合は null。	errorID によって指定されたエラーを保持するコンテナ要素へのハンドルを取得します。 errorId - addError() または addErrorFromQueryResponse() を使用して作成されたエラーの文字列 ID。

イベント

ほとんどのビジュアリゼーションは、何かが発生したことを示すためにイベントを発生させます。グラフのユーザーは、多くの場合、これらのイベントをリッスンできます。独自のビジュアリゼーションをコーディングする場合、そのようなイベントを自分でトリガーすることもできます。

次のメソッドを使用すると、ビジュアリゼーション内からイベントをリッスンしたり、既存のイベント ハンドラを削除したり、イベントをトリガーしたりできます。

• google.visualization.events.addListener() と google.visualization.events.addOneTimeListener() イベントのリッスン。
• google.visualization.events.removeListener() は既存のリスナーを削除します。
• google.visualization.events.removeAllListeners() により特定のグラフのすべてのリスナーが削除されます。
• google.visualization.events.trigger() がイベントを発生させます。

addListener()

ページでホストされているビジュアリゼーションによって配信されたイベントを受信するよう登録するには、このメソッドを呼び出します。処理関数に渡すイベント引数がある場合は、その引数を文書化する必要があります。

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

source_visualization

ソースのビジュアリゼーション インスタンスへのハンドル。

event_name

リッスンするイベントの文字列名。ビジュアリゼーションでは、スローするイベントを文書化する必要があります。

handling_function

source_visualization が event_name イベントが発生したときに呼び出すローカル JavaScript 関数の名前。処理関数には、パラメータとしてイベント引数が渡されます。

戻り値

新しいリスナーのリスナー ハンドラ。必要に応じて、ハンドラを使用して google.visualization.events.removeListener() を呼び出し、このリスナーを削除できます。

例

選択イベントの受信登録の例を次に示します。

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

addOneTimeListener()

これは addListener() と同じですが、1 回だけリッスンする必要があるイベントを対象としています。それ以降のイベントのスローでは、処理関数は呼び出されません。

たとえば、描画のたびに ready イベントがスローされます。最初の ready のみでコードを実行する場合は、addListener ではなく addOneTimeListener を使用します。

removeListener()

このメソッドを呼び出して、既存のイベント リスナーの登録を解除します。

google.visualization.events.removeListener(listener_handler)

listener_handler

削除するリスナー ハンドラ。google.visualization.events.addListener() によって返されます。

removeAllListeners()

このメソッドを呼び出して、特定のビジュアリゼーション インスタンスのすべてのイベント リスナーの登録を解除します。

google.visualization.events.removeAllListeners(source_visualization)

source_visualization

すべてのイベント リスナーを削除するソース可視化インスタンスへのハンドル。

trigger()

ビジュアリゼーションの実装者によって呼び出されます。ビジュアリゼーションからこのメソッドを呼び出して、任意の名前と値のセットでイベントを発生させます。

google.visualization.events.trigger(source_visualization, event_name,
  event_args)

source_visualization

ソースのビジュアリゼーション インスタンスへのハンドル。送信側の可視化で定義したメソッド内からこの関数を呼び出す場合は、this キーワードを渡します。

event_name

イベントを呼び出すための文字列名。任意の文字列値を選択できます。

event_args

（省略可）受信側メソッドに渡す名前と値のペアのマップ。例: {メッセージ: "Hello there!", score: 10, name: "Fred"}。イベントが必要ない場合は null を渡すことができます。レシーバーは、このパラメータで null を受け入れるようにしておく必要があります。

例

次のビジュアライゼーションは、click() メソッドが呼び出されたときに "select" という名前のメソッドをスローする例です。値は返されません。

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

標準の可視化のメソッドとプロパティ

すべての可視化で、以下の必須およびオプションのメソッドとプロパティのセットを公開することが推奨されています。ただし、これらの標準を適用するための型チェックは行われていないため、各可視化のドキュメントをご覧ください。

• コンストラクタ
• draw()
• getAction()（省略可）
• getSelection()（省略可）
• removeAction()（省略可）
• setAction()（省略可）
• setSelection()（省略可）

注: これらのメソッドは、google.visualization 名前空間ではなく、ビジュアリゼーションの名前空間にあります。

コンストラクタ

コンストラクタは可視化クラスの名前を受け取り、そのクラスのインスタンスを返す必要があります。

visualization_class_name(dom_element)

dom_element

ビジュアリゼーションを埋め込む DOM 要素へのポインタ。

例

var org = new google.visualization.OrgChart(document.getElementById('org_div')); 

draw()

ページ上にビジュアリゼーションを描画します。バックグラウンドでは、サーバーからグラフィックを取得したり、リンクされた可視化コードを使用してページにグラフィックを作成したりできます。データやオプションが変更されるたびに、このメソッドを呼び出す必要があります。オブジェクトは、コンストラクタに渡される DOM 要素内に描画する必要があります。

draw(data[, options])

データ

グラフの描画に使用するデータを保持する DataTable または DataView。グラフから DataTable を抽出する標準的な方法はありません。

options

（省略可）カスタム オプションの名前と値のペアのマップ。たとえば、高さと幅、背景色、キャプションなどです。可視化のドキュメントには、使用可能なオプションを記載する必要があります。このパラメータを指定しない場合は、デフォルトのオプションがサポートされます。JavaScript オブジェクト リテラル構文を使用して、オプション マップを渡すことができます。たとえば、{x:100, y:200, title:'An Example'}

例

chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

getAction()

これは、ツールチップがあり、ツールチップ アクションを許可するビジュアリゼーションによって必要に応じて公開されます。

リクエストされた actionID でツールチップ アクション オブジェクトを返します。

例:

// Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

getSelection()

これはオプションで、グラフィック内で現在選択されているデータにアクセスできるようにするビジュアリゼーションによって公開されます。

selection_array getSelection()

戻り値

selection_array 選択したオブジェクトの配列。各オブジェクトは、可視化の作成に使用される基になるテーブル内のデータ要素を表します（DataView または DataTable）。各オブジェクトには、row または column というプロパティがあり、基になる DataTable にある選択されたアイテムの行や列のインデックスを持ちます。row プロパティが null の場合、選択内容は列です。column プロパティが null の場合は行、両方が null でない場合は特定のデータ項目です。DataTable.getValue() メソッドを呼び出すと、選択したアイテムの値を取得できます。取得した配列は setSelection() に渡すことができます。

例

function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

removeAction()

これは、ツールチップがあり、ツールチップ アクションを許可するビジュアリゼーションによって必要に応じて公開されます。

リクエストされた actionID を持つツールチップ アクション オブジェクトをグラフから削除します。

例:

// Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

setAction()

これは、ツールチップがあり、ツールチップ アクションを許可するビジュアリゼーションによって必要に応じて公開されます。この機能は、コアグラフ（棒グラフ、縦棒グラフ、折れ線グラフ、面グラフ、散布図、複合グラフ、バブル、円グラフ、ドーナツ、ローソク足、ヒストグラム、階段面）でのみ使用できます。

ユーザーがアクション テキストをクリックしたときに実行されるツールチップ アクションを設定します。

setAction(action object)

setAction メソッドは、アクション パラメータとしてオブジェクトを受け取ります。このオブジェクトでは、id（設定するアクションの ID）、text（アクションのツールチップに表示するテキスト）、action（ユーザーがアクション テキストをクリックしたときに実行する関数）の 3 つのプロパティを指定する必要があります。

すべてのツールチップ アクションは、グラフの draw() メソッドを呼び出す前に設定する必要があります。

例:

// Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

setAction メソッドでは、visible と enabled の 2 つのプロパティを追加で定義することもできます。これらのプロパティは、ツールチップ アクションを表示するか有効にするかを示す boolean 値を返す関数にする必要があります。

例:

// The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

setSelection()

必要に応じて、可視化のデータエントリ（面グラフ内のポイント、棒グラフ内の棒グラフなど）を選択します。このメソッドが呼び出されると、可視化によって新しい選択が視覚的に示されます。setSelection() の実装で「select」イベントを発生させることは推奨されません。ビジュアリゼーションでは、選択の一部が無視される場合があります。たとえば、選択された行のみを表示できるテーブルでは、setSelection() の実装でセル要素や列要素を無視したり、行全体を選択したりできます。

このメソッドが呼び出されるたびに、選択されたすべてのアイテムの選択が解除され、渡された新しい選択リストが適用されます。個々のアイテムの選択を解除する明示的な方法はありません。個々のアイテムの選択を解除するには、選択されたままにするアイテムを指定して setSelection() を呼び出します。すべての要素の選択を解除するには、setSelection()、setSelection(null)、または setSelection([]) を呼び出します。

setSelection(selection_array)

selection_array

オブジェクトの配列。各オブジェクトには、数値の行または列のプロパティがあります。row と column は、データテーブル内の選択するアイテムの 0 ベースの行番号または列番号です。列全体を選択するには、row を null に設定します。行全体を選択するには、column を null に設定します。例: setSelection([{row:0,column:1},{row:1, column:null}]) は (0,1) のセルと行全体を選択します。

さまざまな静的メソッド

このセクションでは、google.visualization 名前空間で公開される各種の便利なメソッドについて説明します。

arrayToDataTable()

このメソッドは、2 次元配列を受け取って DataTable に変換します。

列のデータ型は、提供されるデータによって自動的に決定されます。列データ型は、配列の最初の行（{label: 'Start Date', type: 'date'} 列ヘッダー行）でオブジェクト リテラル表記を使用して指定することもできます。オプションのデータロールも使用できますが、オブジェクト リテラル表記を使用して明示的に定義する必要があります。どのセルでもオブジェクト リテラル表記を使用して、セル オブジェクトを定義できます。

構文

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray

データテーブルの各行が 1 つの行を表す 2 次元配列。opt_firstRowIsData が false（デフォルト）の場合、最初の行はヘッダーラベルとして解釈されます。各列のデータ型は、指定されたデータから自動的に解釈されます。セルに値がない場合は、必要に応じて null または空の値を指定します。

opt_firstRowIsData

最初の行がヘッダー行を定義しているかどうか。true の場合、すべての行がデータとみなされます。false の場合、最初の行はヘッダー行とみなされ、値は列ラベルとして割り当てられます。デフォルトは false です。

戻り値

新しい DataTable

例

次のコードは、同じ DataTable オブジェクトを作成する 3 つの方法を示しています。

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

drawChart()

このメソッドは 1 回の呼び出しでグラフを作成します。この方法の利点は、必要なコードがわずかに少なくて、可視化をシリアル化してテキスト文字列として保存できることです。このメソッドは、作成されたグラフに対するハンドルを返さないため、グラフ イベントをキャッチするためにメソッド リスナーを割り当てることはできません。

構文

google.visualization.drawChart(chart_JSON_or_object)

chart_JSON_or_object

次のプロパティを持つ JSON リテラル文字列または JavaScript オブジェクト（大文字と小文字は区別されます）。

プロパティ	タイプ	必須	デフォルト	説明
chartType	文字列	必須	none	ビジュアリゼーションのクラス名。Google グラフでは、google.visualization パッケージ名は省略できます。適切なビジュアリゼーション ライブラリがまだ読み込まれていない場合、Google ビジュアリゼーションであれば、このメソッドによってライブラリが読み込まれます。サードパーティのビジュアリゼーションを明示的に読み込む必要があります。例: Table、PieChart、example.com.CrazyChart。
containerId	文字列	必須	none	ビジュアリゼーションをホストするページ上の DOM 要素の ID。
オプション	オブジェクト	任意	none	可視化のオプションを記述するオブジェクト。JavaScript のリテラル表記を使用するか、オブジェクトへのハンドルを指定できます。例: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
dataTable	オブジェクト	任意	なし	ビジュアリゼーションにデータを入力するために使用される DataTable。これは、上記で説明した DataTable のリテラル JSON 文字列表現、入力された google.visualization.DataTable オブジェクトへのハンドル、または arrayToDataTable(opt_firstRowIsData=false) で受け入れられるような 2 次元配列です。このプロパティまたは dataSourceUrl プロパティを指定する必要があります。
dataSourceUrl	文字列	任意	なし	グラフデータを入力するデータソース クエリ（Google スプレッドシートなど）。このプロパティまたは dataTable プロパティのいずれかを指定する必要があります。
クエリ	文字列	任意	なし	dataSourceUrl を指定する場合は、必要に応じて可視化クエリ言語を使用して SQL に似たクエリ文字列を指定し、データのフィルタリングや操作を行うことができます。
refreshInterval	数値	任意	なし	ビジュアリゼーションがクエリソースを更新する頻度（秒単位）。これは、dataSourceUrl を指定する場合にのみ使用します。
ビュー	オブジェクトまたは配列	任意	なし	DataView イニシャライザ オブジェクトを設定します。これは、dataTable または dataSourceUrl パラメータで定義された、基になるデータのフィルタとして機能します。dataview.toJSON() によって返されるような、文字列または DataView イニシャライザ オブジェクトのいずれかで渡すことができます。例: "view": {"columns": [1, 2]} は、DataView イニシャライザ オブジェクトの配列を渡すこともできます。この場合、配列の最初の DataView が基になるデータに適用されて新しいデータテーブルが作成され、2 番目の DataView は最初の DataView の適用によって生成されるデータテーブルに適用されます（以下同様）。

例

スプレッドシートのデータソースに基づいて表グラフを作成し、クエリ SELECT A,D WHERE D > 100 ORDER BY D

<script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

次の例では、同じテーブルを作成しますが、DataTable をローカルに作成します。

<script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

この例では、ファイルから読み込んだグラフの JSON 文字列表現を渡します。

<script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

drawToolbar()

これは、多くのビジュアリゼーションに付加できるツールバー要素のコンストラクタです。このツールバーを使用すると、ユーザーはビジュアリゼーション データをさまざまな形式でエクスポートしたり、さまざまな場所で使用するビジュアリゼーションの埋め込み可能バージョンを提供したりできます。詳細とコード例については、ツールバー ページをご覧ください。