ビジュアライゼーション用データの準備
Google Visualization APIを手っとり早く試す方法は、公開ギャラリーにあるビジュアライゼーションの1つを使うことです。最初に、組織図を表示するWebページを作成してみましょう。図の表示はGoogleビジュアライゼーションによって行い、基になるローカルデータの提供にはJavaScriptを使います。
まず、好みのエディタで新規HTMLファイルを作成し、以下のコードを貼り付けます。
<html>
<head>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["orgchart"]});
// Set callback to run when API is loaded
google.setOnLoadCallback(drawVisualization);
// Called when the Visualization API is loaded.
function drawVisualization() {
// ... implement your drawing code here.
}
</script>
</head>
<body>
<div id="orgchartdiv" ></div>
<p>This page demonstrates using an existing
OrgChart visualization, with locally created data.</p>
</body>
</html>
このコードには、Googleビジュアライゼーションの利用に必要な次の手順がすべて含まれています。
- Google jsapiスクリプトをロードします。このスクリプトには、Googleライブラリとのやりとりを行う基本的な関数が用意されています。
google.load()関数によってビジュアライゼーションパッケージをロードします。- 使用するビジュアライゼーションを指定します（ここでは
orgchartパッケージのみ。複数のビジュアライゼーションを用いる場合はpackagesパラメータ内にそれらを列挙します。利用可能なパッケージの一覧はビジュアライゼーションギャラリーで確認できます）。 setOnLoadCallback()関数を使って、すべてのライブラリのロードが完了した時点で呼び出されるコールバックを登録します。
drawVisualization()関数の内部では、ビジュアル化するデータの収集と表示を行います。ビジュアライゼーションをWebページのどこに配置するかの指定には、DOM（Document Object Model）要素がプレースホルダとして使えます（ここではorgchartdiv）。リスト1にdrawVisualization()関数の内容を示します。
function drawVisualization() {
// Create and populate a data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Parent');
data.addRows(10);
// Add more data rows and cells here
var row = 0;
addRow(data, row++, "Apples", "Root");
addRow(data, row++, "Braeburn", "Apples");
addRow(data, row++, "Cox", "Apples");
addRow(data, row++, "Golden Delicious", "Apples");
addRow(data, row++, "English", "Golden Delicious");
addRow(data, row++, "French", "Golden Delicious");
addRow(data, row++, "Bananas", "Root");
addRow(data, row++, "Caribbean", "Bananas");
addRow(data, row++, "Central American", "Bananas");
addRow(data, row++, "Clementines", "Root");
var orgchart = new google.visualization.OrgChart(
document.getElementById('orgchartdiv'));
orgchart.draw(data, {
selectionColor: 'yellow'
});
}
// Utility function to create new rows in the Datatable
function addRow(data, rownum, name, parent) {
data.setCell(rownum, 0, name);
data.setCell(rownum, 1, parent);
}
リスト1で注目したいのがgoogle.visualization.DataTableとgoogle.visualization.OrgChartです。前者はビジュアライゼーションに表示するデータを入れる汎用的な表組みコンテナ、後者はビジュアライゼーションそのものです。
DataTableは、2次元の表と同じように行と列で構成されています。行方向にはビジュアライゼーションのアイテムが、列方向にはアイテムの属性が並びます。また、データの入力や記述に使えるメソッドが数多く用意されています（詳細については公式ドキュメントを参照）。決まって使われる重要なものとして、addRows()、addColumn()、setCell()があります。これらの呼び出しではそれぞれ、ビジュアライゼーションで表示するアイテム数（データの行数）、アイテムが持つ属性の数と種類、アイテムと属性を対にした値を指定します。列については、型が定義されています。サポートされているのは、string（文字列）、number（数値）、boolean（ブール値）、date（日付）、datetime（日時）、timeofday（時刻）です。
ビジュアライゼーションのインスタンス化
データが準備できたら、ビジュアライゼーションのインスタンスを生成することができます。そのためには、ビジュアライゼーションを配置するプレースホルダDOM要素を指定してから、DataTableインスタンスをパラメータとして渡し、ビジュアライゼーションを描画します。
draw()メソッドには、2つのパラメータが必要です。1つ目のパラメータは、使用するDataTableを指定します。2つ目のパラメータには、カスタマイズ用オプションのリストをJavaScriptオブジェクトでラップしたものを指定します（オブジェクトの各プロパティがカスタマイズのキーを表します）。使用可能なオプションはビジュアライゼーションごとに異なるため、使用するビジュアライゼーションのドキュメントで確認してください。リスト1のサンプルでは、selectionColorオプションによって、組織図のノードがユーザーによって選択されたときの強調表示の色を設定しています。
また、DataTableに含めるべき列もビジュアライゼーションごとに決まっています。組織図の場合は、文字列型の2つの列が必要です。それぞれのツリーノードの名前と、その親ノードの名前です。ビジュアライゼーションが違えば、定義すべき列も変わってきます。例えば円グラフの場合は、円を構成する扇形のそれぞれに対するラベルと値を表す文字列型と数値型の列が1つずつ必要になります。それぞれのビジュアライゼーションで要求される列については、該当するドキュメントを参照してください。
図1は、作成した組織図をWebページに表示させた結果です。
