Gwt-googlecharts-quick-guide

GWT Google Chart-概要

*Google Charts* は、インタラクティブなチャート作成機能を追加してWebアプリケーションを強化することを目的とした、純粋なJavaScriptベースのチャート作成ライブラリです。 幅広いチャートをサポートしています。 チャートは、Chrome、Firefox、Safari、Internet Explorer（IE）などの標準ブラウザーでSVGを使用して描画されます。 レガシーIE 6では、VMLを使用してグラフィックを描画します。

*Google Chart Java Module* は、GWTアプリケーション内でエレガントで機能豊富なGoogle Chart視覚化を提供するオープンソースのJavaベースのライブラリであり、GWTウィジェットライブラリとともに使用できます。 GWTアプリケーション内の適切な例とともに、Googleチャートのすべての基本コンポーネントを説明する章があります。

特徴

以下は、Google Chartライブラリの主な機能です。

• 互換性-すべての主要なブラウザと、AndroidやiOSなどのモバイルプラットフォームで動作します。
• マルチタッチのサポート-AndroidやiOSなどのタッチスクリーンベースのプラットフォームでマルチタッチをサポートします。 iPhone/iPadおよびAndroidベースのスマートフォン/タブレットに最適です。
• 無料-オープンソースであり、非営利目的で無料で使用できます。
• 軽量-loader.jsコアライブラリは、非常に軽量なライブラリです。
• シンプルな構成-jsonを使用してチャートのさまざまな構成を定義し、学習と使用が非常に簡単です。
• 動的-チャート生成後でもチャートを変更できます。
• 複数軸-x、y軸に制限されません。 チャート上の複数の軸をサポートします。
• 設定可能なツールチップ-ユーザーがチャート上の任意のポイントにカーソルを合わせるとツールチップが表示されます。 googlechartsは、ツールチップをプログラムで制御するためのツールチップの組み込みフォーマッターまたはコールバックフォーマッターを提供します。
• * DateTimeサポート*-日付時刻を特別に処理します。 日付に関する賢明なカテゴリに対して多数の組み込みコントロールを提供します。
• 印刷-Webページを使用してグラフを印刷します。
• 外部データ-サーバーからの動的なデータのロードをサポートします。 コールバック関数を使用してデータを制御します。
• テキストの回転-あらゆる方向のラベルの回転をサポートします。

サポートされているチャートタイプ

Google Chartsライブラリは、次の種類のグラフを提供します-

Sr. No.	Chart Type/Description
1	Line Charts 線/スプラインベースのチャートを描くために使用されます。
2	Area Charts エリアごとのチャートを描画するために使用されます。
3	Pie Charts 円グラフの描画に使用されます。
4	Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines 散布図の描画に使用されます。
5	Bubble Charts バブルベースのチャートを描画するために使用されます。
6	Dynamic Charts ユーザーがチャートを変更できる動的チャートを描画するために使用されます。
7	Combinations さまざまなチャートの組み合わせを描画するために使用されます。
8	3D Charts 立体チャートの描画に使用されます。
9	Angular Gauges 速度計タイプのチャートを描画するために使用されます。
10	Heat Maps ヒートマップの描画に使用されます。
11	Tree Maps ツリーマップの描画に使用されます。

次の章では、上記の各タイプのチャートを例とともに詳細に説明します。

ライセンス

Google Chartはオープンソースであり、無料で使用できます。 リンクをたどってください：https://developers.google.com/chart/terms#license [利用規約]。

GWT Google Chart-環境設定

このチュートリアルでは、Google ChartとGWTフレームワークを使用して作業を開始する開発環境を準備する方法について説明します。 このチュートリアルでは、GWT Frameworkをセットアップする前に、マシンでJDK、Tomcat、Eclipseをセットアップする方法も説明します-

システム要件

GWTはJDK 1.6以降を必要とするため、最初の要件はJDKをマシンにインストールすることです。

JDK	1.6 or above.
Memory	no minimum requirement.
Disk Space	no minimum requirement.
Operating System	no minimum requirement.

所定の手順に従って環境をセットアップし、GWTアプリケーション開発を開始します。

ステップ1-マシンでのJavaインストールの検証

コンソールを開き、次のjavaコマンドを実行します。

OS	Task	Command
Windows	Open Command Console	c:\> java -version
Linux	Open Command Terminal	$ java -version
*Mac *	Open Terminal	machine:~ joseph$ java -version

すべてのオペレーティングシステムの出力を確認しましょう

Sr.No.	OS & Generated Output
1	Windows* Javaバージョン "1.6.0_21" Java（TM）SEランタイム環境（ビルド1.6.0_21-b07） Java HotSpot（TM）Client VM（ビルド17.0-b17、混合モード、共有）
2	Linux Javaバージョン "1.6.0_21" Java（TM）SEランタイム環境（ビルド1.6.0_21-b07） ava HotSpot（TM）Client VM（ビルド17.0-b17、混合モード、共有）
3	Mac Javaバージョン "1.6.0_21" Java（TM）SEランタイム環境（ビルド1.6.0_21-b07） Java HotSpot（TM）64ビットサーバーVM（ビルド17.0-b17、混合モード、共有）

ステップ2-Java Development Kit（JDK）のセットアップ

Javaがインストールされていない場合は、OracleのJavaサイト（https://www.oracle.com/technetwork/java/javase/downloads/indexl[Java SEダウンロード]）からJavaソフトウェア開発キット（SDK）をインストールできます。 ダウンロードしたファイルにJDKをインストールする手順があります。指定された手順に従ってセットアップをインストールおよび構成します。 最後に、PATHおよびJAVA_HOME環境変数を設定して、javaおよびjavacを含むディレクトリ（通常はそれぞれjava_install_dir/binおよびjava_install_dir）を参照します。

*JAVA_HOME* 環境変数を設定して、Javaがマシンにインストールされているベースディレクトリの場所を指すようにします。 例えば

Sr.No.	OS & Output
1	Windows 環境変数JAVA_HOMEをC：\ Program Files \ Java \ jdk1.6.0_21に設定します
2	Linux export JAVA_HOME =/usr/local/java-current
3	Mac export JAVA_HOME =/Library/Java/Home

Javaコンパイラの場所をシステムパスに追加します。

Sr.No.	OS & Output
1	Windows 文字列;％JAVA_HOME％\ binをシステム変数Pathの最後に追加します。
2	Linux export PATH = $ PATH：$ JAVA_HOME/bin/
3	Mac 不要

または、Borland JBuilder、Eclipse、IntelliJ IDEA、Sun ONE Studioなどの統合開発環境（IDE）を使用する場合は、単純なプログラムをコンパイルおよび実行して、IDEがJavaをインストールした場所を認識していることを確認します。 IDEの。

ステップ3-Eclipse IDEのセットアップ

このチュートリアルのすべての例は、Eclipse IDEを使用して作成されています。 そのため、オペレーティングシステムに基づいて、最新バージョンのEclipseをマシンにインストールすることをお勧めします。

Eclipse IDEをインストールするには、https://www.eclipse.org/downloads/から最新のEclipseバイナリをダウンロードします。 インストールをダウンロードしたら、バイナリ配布物を便利な場所に解凍します。 たとえば、WindowsのC：\ eclipse、またはLinux/Unixの/usr/local/eclipseで、最後にPATH変数を適切に設定します。

Eclipseは、Windowsマシンで次のコマンドを実行することで起動できます。または、eclipse.exeをダブルクリックするだけで起動できます

%C:\eclipse\eclipse.exe

Eclipseは、Unix（Solaris、Linuxなど）マシンで次のコマンドを実行することで起動できます-

$/usr/local/eclipse/eclipse

正常に起動した後、すべてが正常であれば、結果が表示されます

ステップ4：GWT SDKとEclipse用プラグインをインストールする

リンクhttps://developers.google.com/web-toolkit/download[Plugin for Eclipse（incl。 SDK）]]を選択して、マシンにインストールされているGWT SDKおよびプラグインfor Eclipseバージョンをインストールします。

GWTプラグインのセットアップが正常に完了した後、すべてが正常である場合、赤い四角形でマークされた* Googleアイコン*で次の画面が表示されます。

ステップ5：Google Chartをインストールする

MVN Repositoryページから最新のGoogle Chart jarをダウンロードし、プロジェクトのクラスパスに追加します。

<project-name> .gwt.xmlファイルに次のエントリを追加します

<inherits name = "com.googlecode.gwt.charts.Charts"/>

GWT Google Chart-構成構文

この章では、GWTでGoogle Charts APIを使用してグラフを描画するために必要な構成を紹介します。

ステップ1：GWTアプリケーションを作成する

次の手順に従って、_GWTで作成したGWTアプリケーションを更新します-アプリケーションの作成_の章-

Step	Description
1	Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorldl and HelloWorld.java as explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

以下は、変更されたモジュール記述子 src/com.finddevguides/HelloWorld.gwt.xml の内容です。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <inherits name = 'com.google.gwt.user.User'/>
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <entry-point class = 'com.finddevguides.client.HelloWorld'/>
   <inherits name="com.googlecode.gwt.charts.Charts"/>
   <source path = 'client'/>
   <source path = 'shared'/>
</module>

以下は、変更されたHTMLホストファイル war/HelloWorldl の内容です。

<html>
   <head>
      <title>GWT Highcharts Showcase</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
   </head>
   <body>
   </body>
</html>

構成を理解した後、最後に更新されたHelloWorld.javaが表示されます。

ステップ2：構成を作成する

ライブラリをロードしてチャートを作成

ChartLoaderを使用してライブラリをロードし、チャートを作成します。

ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
   public void run() {
     //Create and attach the chart
      PieChart chart = new PieChart();
   }
});

データ表

データテーブルを作成して詳細を設定します。

//Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Browser");
data.addColumn(ColumnType.NUMBER, "Percentage");
data.addRow("Firefox", 45.0);
data.addRow("IE", 26.8);
data.addRow("Chrome", 12.8);
data.addRow("Safari", 8.5);
data.addRow("Opera", 6.2);
data.addRow("Others", 0.7);

//Draw the chart
chart.draw(data);

Size

設定する幅と高さを構成します。

chart.setWidth("700px");
chart.setHeight("700px");

ステップ3：チャートを親パネルに追加します。

ルートパネルにチャートを追加しています。

RootPanel.get().add(chart);

例

構成構文をさらに理解するには、次の例を検討してください-

*_HelloWorld.java_*

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.PieChart;

public class HelloWorld implements EntryPoint {
   private PieChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
           //Create and attach the chart
            chart = new PieChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
     //Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.STRING, "Browser");
      data.addColumn(ColumnType.NUMBER, "Percentage");
      data.addRow("Firefox", 45.0);
      data.addRow("IE", 26.8);
      data.addRow("Chrome", 12.8);
      data.addRow("Safari", 8.5);
      data.addRow("Opera", 6.2);
      data.addRow("Others", 0.7);

     //Draw the chart
      chart.draw(data);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

結果

結果を確認します。

基本的な円グラフ

GWT Googleチャート-エリアチャート

エリアチャートは、エリアベースのチャートを描画するために使用されます。 このセクションでは、以下のタイプのエリアベースのチャートについて説明します。

Sr. No.	Chart Type/Description
1	Basic Area 基本面グラフ
2	Area with negative values 負の値を持つ面グラフ。
3	Stacked area 互いに積み上げられた領域を持つグラフ。
4	Area with missing points データに欠損点があるチャート。

GWT Googleチャート-棒グラフ

棒グラフは、棒グラフを描くために使用されます。 このセクションでは、以下のタイプの棒グラフを説明します。

Sr. No.	Chart Type/Description
1	Basic Bar 基本的な棒グラフ
2	Grouped Bar Chart グループ化された棒グラフ。
3	Stacked Bar 棒が積み上げられた棒グラフ。
4	Negative Bar 負のスタックを持つ棒グラフ。
5	Diff Bar Chart 差異を示す棒グラフ。

GWT Googleチャート-バブルチャート

バブルチャートは、バブルベースのチャートを描画するために使用されます。 このセクションでは、次の種類のバブルベースのチャートについて説明します。

Sr. No.	Chart Type/Description
1	Basic Bubble 基本的なバブルチャート。
2	Bubble chart with data labels データラベル付きのバブルチャート。

GWT Googleチャート-ローソク足チャート

ローソク足チャートは、値の差異に対する始値と終値を表示するために使用され、通常は株を表すために使用されます。 このセクションでは、次のタイプのローソク足ベースのチャートについて説明します。

Sr. No.	Chart Type/Description
1	Basic Candlestick 基本的なローソク足チャート。
2	Candlestick with customized colors カスタマイズされたローソク足チャート。

GWT Googleチャート-縦棒チャート

コラムチャートは、コラムベースのチャートを描画するために使用されます。 このセクションでは、次の種類のコラムベースのチャートについて説明します。

Sr. No.	Chart Type/Description
1	Basic Column 基本的なコラムチャート
2	Grouped Column Chart グループ化された列グラフ。
3	Stacked Column 列が互いに積み上げられた列グラフ。
4	Negative Stacked Column 負のスタックを持つ列グラフ。
5	Diff Column Chart 差異を示す列グラフ。

GWT Googleチャート-組み合わせチャート

組み合わせグラフは、各シリーズを、ライン、エリア、バー、ローソク足、および階段状エリアのリストから異なるマーカータイプとしてレンダリングするのに役立ちます。 シリーズにデフォルトのマーカータイプを割り当てるには、seriesTypeプロパティを使用します。 シリーズプロパティは、各シリーズのプロパティを個別に指定するために使用されます。 以下は、違いを示す縦棒グラフの例です。

link：/gwt_googlecharts/gwt_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を見てきました。 次に、違いを示す縦棒グラフの例を見てみましょう。

構成

*ComboChart* クラスを使用して、組み合わせグラフを表示しました。

//Combination chart
ComboChart chart = new ComboChart();

例

*_HelloWorld.java_*

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.ComboChart;
import com.googlecode.gwt.charts.client.corechart.ComboChartOptions;
import com.googlecode.gwt.charts.client.corechart.ComboChartSeries;
import com.googlecode.gwt.charts.client.options.HAxis;
import com.googlecode.gwt.charts.client.options.SeriesType;
import com.googlecode.gwt.charts.client.options.VAxis;

public class HelloWorld implements EntryPoint {
   private ComboChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
           //Create and attach the chart
            chart = new ComboChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
     //Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.STRING, "Fruits");
      data.addColumn(ColumnType.NUMBER, "Jane");
      data.addColumn(ColumnType.NUMBER, "Jone");
      data.addColumn(ColumnType.NUMBER, "Average");

      data.addRow("Apples", 3, 2, 2.5);
      data.addRow("Oranges",2, 3, 2.5);
      data.addRow("Pears", 1, 5, 3);
      data.addRow("Bananas", 3, 9, 6);
      data.addRow("Plums", 4, 2, 3);

     //Set options
      ComboChartOptions options = ComboChartOptions.create();
      options.setTitle("Fruits distribution");
      options.setHAxis(HAxis.create("Person"));
      options.setVAxis(VAxis.create("Fruits"));
      options.setSeriesType(SeriesType.BARS);

      ComboChartSeries lineSeries = ComboChartSeries.create();
      lineSeries.setType(SeriesType.LINE);
      options.setSeries(2,lineSeries);

     //Draw the chart
      chart.draw(data,options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

結果

結果を確認します。

組み合わせ縦棒グラフ

GWT Googleチャート-ヒストグラムチャート

ヒストグラムは、数値データをバケットにグループ化し、バケットをセグメント化された列として表示するグラフです。 これらは、値が範囲に入る頻度としてデータセットの分布を表すために使用されます。 Google Chartは、バケットの数を自動的に選択します。 すべてのバケットは幅が等しく、バケット内のデータポイントの数に比例した高さを持っています。 ヒストグラムは、他の点で縦棒グラフに似ています。 このセクションでは、次のタイプのヒストグラムベースのチャートについて説明します。

Sr. No.	Chart Type/Description
1	Basic Histogram 基本的なヒストグラムチャート。
2	Controlling Color ヒストグラムチャートのカスタマイズされた色。
3	Controlling Buckets ヒストグラムチャートのカスタマイズされたバケット。
4	Multiple Series 複数のシリーズを持つヒストグラムチャート。

GWT Googleチャート-折れ線グラフ

折れ線グラフは、折れ線グラフを描くために使用されます。 このセクションでは、次の種類の折れ線グラフを説明します。

Sr. No.	Chart Type/Description
1	Basic line 基本的な折れ線グラフ。
2	With visible points 可視データポイントを含むグラフ。
3	Customizable background color 背景色がカスタマイズされたグラフ。
4	Customizable line color 線の色をカスタマイズしたグラフ。
5	Customizable axis and tick labels 軸と目盛りのラベルがカスタマイズされたグラフ。
6	Crosshairs 選択時のデータポイントに十字線を示す折れ線グラフ。
7	Customizable line style 線の色をカスタマイズしたグラフ。
8	Line Charts with curved lines 滑らかな曲線のあるグラフ。

Gwt-googlecharts-maps

GWT Googleチャート-組織図

以下は組織図の例です。

組織図は、組織の上位/下位の関係を表すために使用されるノードの階層のレンダリングに役立ちます。 たとえば、家系図は組織図の一種です。 link：/gwt_googlecharts/gwt_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を見てきました。 次に、組織図の例を見てみましょう。

構成

組織図を表示するために OrgChart クラスを使用しました。

//Organization chart
OrgChart chart = new OrgChart();

例

*_HelloWorld.java_*

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.format.PatternFormat;
import com.googlecode.gwt.charts.client.orgchart.OrgChart;
import com.googlecode.gwt.charts.client.orgchart.OrgChartOptions;

public class HelloWorld implements EntryPoint {
   private OrgChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.ORGCHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
           //Create and attach the chart
            chart = new OrgChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
     //Prepare the data
      DataTable dataTable = DataTable.create();
      dataTable.addColumn(ColumnType.STRING, "Name");
      dataTable.addColumn(ColumnType.STRING, "Manager");
      dataTable.addColumn(ColumnType.STRING, "ToolTip");
      dataTable.addRows(5);

      dataTable.setValue(0, 0, "Mike");
      dataTable.setValue(0, 1, "");
      dataTable.setValue(0, 2, "The President");
      dataTable.setValue(1, 0, "Jim");
      dataTable.setValue(1, 1, "Mike");
      dataTable.setValue(1, 2, "VP");
      dataTable.setValue(2, 0, "Alice");
      dataTable.setValue(2, 1, "Mike");
      dataTable.setValue(2, 2, "");
      dataTable.setValue(3, 0, "Bob");
      dataTable.setValue(3, 1, "Jim");
      dataTable.setValue(3, 2, "Bob Sponge");
      dataTable.setValue(4, 0, "Carol");
      dataTable.setValue(4, 1, "Bob");
      dataTable.setValue(4, 2, "");

      PatternFormat format = PatternFormat.create("{0} {1}");
      format.format(dataTable, 0, 2);

     //Set options
      OrgChartOptions options = OrgChartOptions.create();
      options.setAllowHtml(true);

     //Draw the chart
      chart.draw(dataTable, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

結果

結果を確認します。

組織図

GWT Google Chart-円グラフ

円グラフは、円ベースのグラフを描くために使用されます。 このセクションでは、次のタイプの円グラフを説明します。

Sr. No.	Chart Type/Description
1	Basic Pie 基本的な円グラフ。
2	Donut Chart ドーナツグラフ。
3	3D Pie chart 3D円グラフ。
4	Pie chart with exploded slices スライスを展開した円グラフ。

GWT Googleチャート-サンキーチャート

サンキーチャートは視覚化ツールであり、1つの値セットから別の値セットへのフローを表すために使用されます。 接続されたオブジェクトはノードと呼ばれ、接続はリンクと呼ばれます。 Sankeysは、2つのドメインまたはステージのセットを介した複数のパス間の多対多のマッピングを表示するために使用されます。

Sr. No.	Chart Type/Description
1	Basic Sankey Chart 基本的なサンキーチャート。
2	Multilevel Sankey Chart マルチレベルサンキーチャート。
3	Customizing Sankey Chart カスタマイズされたサンキーチャート。

GWT Googleチャート-散布図

以下は散布図の例です。

link：/gwt_googlecharts/gwt_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を見てきました。 次に、散布図の例を見てみましょう。

構成

*ScatterChart* クラスを使用して散布図を表示しました。

ScatterChart chart = new ScatterChart();

例

*_HelloWorld.java_*

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.ScatterChart;
import com.googlecode.gwt.charts.client.corechart.ScatterChartOptions;

public class HelloWorld implements EntryPoint {
   private ScatterChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
           //Create and attach the chart
            chart = new ScatterChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
     //Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.NUMBER, "Age");
      data.addColumn(ColumnType.NUMBER, "Weight");

      data.addRow(8,12);
      data.addRow(4, 5.5);
      data.addRow(11,14);
      data.addRow(4,5);
      data.addRow(3,3.5);
      data.addRow(6.5,7);

      ScatterChartOptions options  = ScatterChartOptions.create();
      options.setTitle("Age vs Weight");
      options.setLegend(null);

     //Draw the chart
      chart.draw(data, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

結果

結果を確認します。

散布図

GWT Googleチャート-ステップチャート

ステップエリアチャートは、ステップベースのエリアチャートです。 次のタイプの階段状エリアチャートについて説明します。

Sr. No.

チャートタイプ/説明

1

リンク：/gwt_googlecharts/gwt_googlecharts_stepped_basic [基本的なステップチャート]

基本的なステップエリアチャート。

2

リンク：/gwt_googlecharts/gwt_googlecharts_stepped_stacked [積み上げ階段状グラフ]

積み上げ階段グラフ。

GWT Googleチャート-テーブルチャート

テーブルチャートは、ソートおよびページングできるテーブルのレンダリングに役立ちます。 表のセルは、書式文字列を使用するか、HTMLをセル値として直接挿入することで書式設定できます。 数値はデフォルトで右揃えです。ブール値は、チェックマークまたはクロスマークとして表示されます。 ユーザーは、キーボードまたはマウスを使用して単一の行を選択できます。 列ヘッダーはソートに使用できます。 スクロール中、ヘッダー行は固定されたままです。 テーブルは、ユーザーの操作に対応するイベントを発生させます。

link：/gwt_googlecharts/gwt_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を見てきました。 次に、テーブルチャートの例を見てみましょう。

構成

*Table* クラスを使用してテーブルチャートを表示しました。

Table chart = new Chart();

例

*_HelloWorld.java_*

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.table.Table;
import com.googlecode.gwt.charts.client.table.TableOptions;

public class HelloWorld implements EntryPoint {
   private Table chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.TABLE);
      chartLoader.loadApi(new Runnable() {
         public void run() {
           //Create and attach the chart
            chart = new Table();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
     //Prepare the data
      DataTable dataTable = DataTable.create();
      dataTable.addColumn(ColumnType.STRING, "Name");
      dataTable.addColumn(ColumnType.NUMBER, "Salary");
      dataTable.addColumn(ColumnType.BOOLEAN, "Full Time Employee");
      dataTable.addRows(4);

      dataTable.setCell(0, 0, "Mike");
      dataTable.setCell(0, 1, 10000, "$10,000");
      dataTable.setCell(0, 2, true);
      dataTable.setCell(1, 0, "Jim");
      dataTable.setCell(1, 1, 8000, "$8,000");
      dataTable.setCell(1, 2, false);
      dataTable.setCell(2, 0, "Alice");
      dataTable.setCell(2, 1, 12500, "$12,500");
      dataTable.setCell(2, 2, true);
      dataTable.setCell(3, 0, "Bob");
      dataTable.setCell(3, 1, 7000, "$7,000");
      dataTable.setCell(3, 2, true);

      TableOptions options  = TableOptions.create();
      options.setAlternatingRowStyle(true);
      options.setShowRowNumber(true);

     //Draw the chart
      chart.draw(dataTable, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

結果

結果を確認します。

表グラフ

GWT Googleチャート-TreeMapチャート

TreeMapはデータツリーを視覚的に表現したもので、各ノードには0個以上の子と1つの親（ルートを除く）があります。 各ノードは長方形として表示され、割り当てた値に応じてサイズと色を変更できます。 サイズと色は、グラフ内の他のすべてのノードに対して相対的に評価されます。 以下は、ツリーマップチャートの例です。

link：/gwt_googlecharts/gwt_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を見てきました。 次に、TreeMapチャートの例を見てみましょう。

構成

TreeMapグラフを表示するために TreeMap クラスを使用しました。

TreeMap chart = new TreeMap();

例

*_HelloWorld.java_*

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.treemap.TreeMap;
import com.googlecode.gwt.charts.client.treemap.TreeMapOptions;

public class HelloWorld implements EntryPoint {
   private TreeMap chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.TREEMAP);
      chartLoader.loadApi(new Runnable() {
         public void run() {
           //Create and attach the chart
            chart = new TreeMap();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
     //Prepare the data
      DataTable dataTable = DataTable.create();
      dataTable.addColumn(ColumnType.STRING, "Location");
      dataTable.addColumn(ColumnType.STRING, "Parent");
      dataTable.addColumn(ColumnType.NUMBER, "Market trade volume (size)");
      dataTable.addColumn(ColumnType.NUMBER, "Market increase/decrease (color)");

      dataTable.addRow("Global",null,0,0);
      dataTable.addRow("America","Global",0,0);
      dataTable.addRow("Europe","Global",0,0);
      dataTable.addRow("Asia","Global",0,0);
      dataTable.addRow("Australia","Global",0,0);
      dataTable.addRow("Africa","Global",0,0);

      dataTable.addRow("USA","America",52,31);
      dataTable.addRow("Mexico","America",24,12);
      dataTable.addRow("Canada","America",16,-23);

      dataTable.addRow("France","Europe",42,-11);
      dataTable.addRow("Germany","Europe",31,-2);
      dataTable.addRow("Sweden","Europe",22,-13);

      dataTable.addRow("China","Asia",36,4);
      dataTable.addRow("Japan","Asia",20,-12);
      dataTable.addRow("India","Asia",40,63);

      dataTable.addRow("Egypt","Africa",21,0);
      dataTable.addRow("Congo","Africa",10,12);
      dataTable.addRow("Zaire","Africa",8,10);

     //Set options
      TreeMapOptions options = TreeMapOptions.create();
      options.setMinColor("#ff7777");
      options.setMidColor("#ffff77");
      options.setMaxColor("#77ff77");
      options.setHeaderHeight(15);
      options.setShowScale(true);

     //Draw the chart
      chart.draw(dataTable, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

結果

結果を確認します。

TreeMap Chart