GWT Google Charts - Hızlı Kılavuz

Google Chartsetkileşimli grafik oluşturma özelliği ekleyerek web uygulamalarını geliştirmeyi amaçlayan tamamen JavaScript tabanlı bir grafik kitaplığıdır. Çok çeşitli grafikleri destekler. Grafikler, Chrome, Firefox, Safari, Internet Explorer (IE) gibi standart tarayıcılarda SVG kullanılarak çizilir. Eski IE 6'da, grafikleri çizmek için VML kullanılır.

Google Chart Java Modulebir GWT uygulaması içinde zarif ve zengin özelliklere sahip Google Grafikleri görselleştirmeleri sağlayan açık kaynaklı bir Java tabanlı kitaplıktır ve GWT pencere öğesi kitaplıkları ile birlikte kullanılabilir. Bir GWT uygulaması içindeki uygun örneklerle Google Grafiklerin tüm temel bileşenlerini tartışan bölümler vardır.

Özellikleri

Aşağıda, Google Grafikler kitaplığının göze çarpan özellikleri verilmiştir.

• Compatability - Android ve iOS gibi tüm büyük tarayıcılarda ve mobil platformlarda sorunsuz çalışır.

• Multitouch Support- Android ve iOS gibi dokunmatik ekran tabanlı platformlarda çoklu dokunmayı destekler. İPhone / iPad ve android tabanlı akıllı telefonlar / tabletler için idealdir.

• Free to Use - Açık kaynaktır ve ticari olmayan amaçlarla kullanmak ücretsizdir.

• Lightweight - loader.js çekirdek kitaplığı, son derece hafif bir kitaplıktır.

• Simple Configurations - Grafiklerin çeşitli yapılandırmalarını tanımlamak için json kullanır ve öğrenmesi ve kullanması çok kolaydır.

• Dynamic - Grafik oluşturulduktan sonra bile grafiği değiştirmeye izin verir.

• Multiple axes- x, y ekseniyle sınırlı değildir. Grafiklerde birden çok ekseni destekler.

• Configurable tooltips- Araç ipucu, kullanıcı bir grafikteki herhangi bir noktanın üzerine geldiğinde gelir. googlecharts, araç ipucunu programlı olarak kontrol etmek için araç ipucu yerleşik biçimlendirici veya geri arama biçimlendiricisi sağlar.

• DateTime support- Tarih saatini özel olarak kullanın. Tarihe göre kategoriler üzerinde çok sayıda dahili kontrol sağlar.

• Print - Web sayfasını kullanarak grafiği yazdırın.

• External data- Verilerin sunucudan dinamik olarak yüklenmesini destekler. Geri arama işlevlerini kullanarak veriler üzerinde kontrol sağlar.

• Text Rotation - Etiketlerin herhangi bir yönde dönüşünü destekler.

Desteklenen Grafik Türleri

Google Charts kitaplığı aşağıdaki grafik türlerini sağlar -

Sr. No.	Grafik Tipi / Açıklama
1	Line Charts Çizgi / eğri tabanlı grafikler çizmek için kullanılır.
2	Area Charts Alan bilge grafikleri çizmek için kullanılır.
3	Pie Charts Pasta grafikler çizmek için kullanılır.
4	Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Dağınık grafikler çizmek için kullanılır.
5	Bubble Charts Kabarcık tabanlı grafikler çizmek için kullanılır.
6	Dynamic Charts Kullanıcının grafikleri değiştirebileceği dinamik grafikler çizmek için kullanılır.
7	Combinations Çeşitli grafiklerin kombinasyonlarını çizmek için kullanılır.
8	3D Charts 3D grafikler çizmek için kullanılır.
9	Angular Gauges Hız göstergesi türü çizelgeleri çizmek için kullanılır.
10	Heat Maps Isı haritalarını çizmek için kullanılır.
11	Tree Maps Ağaç haritaları çizmek için kullanılır.

Sonraki bölümlerde, yukarıda bahsedilen çizelgelerin her bir türünü örneklerle ayrıntılı olarak tartışacağız.

Lisans

Google Charts açık kaynaklıdır ve kullanımı ücretsizdir. Bağlantıyı takip edin: Hizmet Şartları .

Bu eğitim, Google Charts ve GWT Framework ile çalışmanıza başlamak için bir geliştirme ortamını nasıl hazırlayacağınız konusunda size rehberlik edecektir. Bu eğitici ayrıca, GWT Framework'ü kurmadan önce makinenizde JDK, Tomcat ve Eclipse'in nasıl kurulacağını da öğretecektir -

Sistem gereksinimleri

GWT, JDK 1.6 veya üstünü gerektirir, bu nedenle ilk gereksinim, makinenizde JDK'nın kurulu olmasıdır.

JDK	1.6 veya üstü.
Hafıza	minimum gereklilik yok.
Disk alanı	minimum gereklilik yok.
İşletim sistemi	minimum gereklilik yok.

GWT uygulama geliştirmeye başlamak için ortamınızı ayarlamak için verilen adımları izleyin.

Adım 1 - Makinenizde Java Kurulumunu Doğrulayın

Şimdi konsolu açın ve aşağıdaki java komutunu çalıştırın.

işletim sistemi	Görev	Komut
Windows	Komut Konsolunu Aç	c: \> java sürümü
Linux	Komut Terminalini Aç	$ java sürümü
Mac	Açık Terminal	makine: ~ joseph $ java -version

Tüm işletim sistemleri için çıktıyı doğrulayalım

Sr.No.	İşletim Sistemi ve Oluşturulan Çıktı
1	Windows java sürümü "1.6.0_21" Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07) Java HotSpot (TM) Client VM (derleme 17.0-b17, karma mod, paylaşım)
2	Linux java sürümü "1.6.0_21" Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07) ava HotSpot (TM) Client VM (derleme 17.0-b17, karma mod, paylaşım)
3	Mac java sürümü "1.6.0_21" Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07) Java HotSpot (TM) 64-Bit Sunucu VM (derleme 17.0-b17, karma mod, paylaşım)

Adım 2 - Java Geliştirme Kitini (JDK) Kurun

Java yüklemediyseniz, Java Yazılım Geliştirme Kiti'ni (SDK) Oracle'ın Java sitesinden yükleyebilirsiniz: Java SE İndirmeleri . İndirilen dosyalarda JDK kurulumu için talimatlar bulacaksınız, kurulumu kurmak ve yapılandırmak için verilen talimatları izleyin. Son olarak, PATH ve JAVA_HOME ortam değişkenlerini java ve javac içeren dizine, tipik olarak sırasıyla java_install_dir / bin ve java_install_dir'e başvuracak şekilde ayarlayın.

Yı kur JAVA_HOMEJava'nın makinenizde kurulu olduğu temel dizin konumunu gösteren ortam değişkeni. Örneğin

Sr.No.	İşletim Sistemi ve Çıktı
1	Windows JAVA_HOME ortam değişkenini C: \ Program Files \ Java \ jdk1.6.0_21 olarak ayarlayın
2	Linux dışa aktar JAVA_HOME = / usr / local / java-current
3	Mac dışa aktar JAVA_HOME = / Kitaplık / Java / Ana Sayfa

Java derleyici konumunu Sistem Yoluna ekleyin.

Sr.No.	İşletim Sistemi ve Çıktı
1	Windows Dizeyi;% JAVA_HOME% \ bin sistem değişkeninin, Yol'un sonuna ekleyin.
2	Linux dışa aktar PATH = $ PATH: $ JAVA_HOME / bin /
3	Mac gerekli değil

Alternatif olarak, Borland JBuilder, Eclipse, IntelliJ IDEA veya Sun ONE Studio gibi bir Entegre Geliştirme Ortamı (IDE) kullanıyorsanız, IDE'nin Java'yı nereye yüklediğinizi bildiğini doğrulamak için basit bir program derleyin ve çalıştırın, aksi takdirde verilen belgeye göre uygun kurulumu yapın IDE'nin.

Adım 3 - Eclipse IDE'yi Kurun

Bu eğitimdeki tüm örnekler Eclipse IDE kullanılarak yazılmıştır. Bu nedenle, işletim sisteminize bağlı olarak makinenize Eclipse'in en son sürümünü yüklemenizi öneririm.

Eclipse IDE'yi kurmak için en son Eclipse ikili dosyalarını indirin https://www.eclipse.org/downloads/. Kurulumu indirdikten sonra, ikili dağıtımı uygun bir konuma açın. Örneğin, Windows'ta C: \ eclipse'de veya Linux / Unix'te / usr / local / eclipse'de ve son olarak PATH değişkenini uygun şekilde ayarlayın.

Eclipse, Windows makinesinde aşağıdaki komutları çalıştırarak başlatılabilir veya eclipse.exe dosyasına çift tıklayabilirsiniz.

%C:\eclipse\eclipse.exe

Eclipse, Unix (Solaris, Linux, vb.) Makinesinde aşağıdaki komutlar çalıştırılarak başlatılabilir -

$/usr/local/eclipse/eclipse

Başarılı bir başlangıçtan sonra, her şey yolundaysa, sonucu göstermelidir

4. Adım: Eclipse için GWT SDK ve Eklentisini Yükleyin

Makinenize kurulu Eclipse için GWT SDK ve Eklenti sürümünü yüklemek için Eclipse için Eklenti (SDK'lar dahil) bağlantısında verilen talimatları izleyin .

GWT eklentisi için başarılı bir kurulumdan sonra, her şey yolundaysa, aşağıdaki ekranı göstermelidir. Google icon kırmızı dikdörtgen ile işaretlenmiştir.

5. Adım: Google Charts'ı yükleyin

MVN Deposu sayfasından en son Google Charts kavanozunu indirin ve projenin sınıf yoluna ekleyin.

Aşağıdaki girişi <proje adı> .gwt.xml dosyasına ekleyin

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

Bu bölümde, GWT'de Google Charts API kullanarak bir grafik çizmek için gereken yapılandırmayı göstereceğiz.

Adım 1: GWT Uygulaması Oluşturun

GWT - Uygulama Oluştur bölümünde oluşturduğumuz GWT uygulamasını güncellemek için aşağıdaki adımları izleyin -

Adım	Açıklama
1	GWT - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint paketinin altında HelloWorld adıyla bir proje oluşturun .
2	Değiştir HelloWorld.gwt.xml , HelloWorld.html ve HelloWorld.java olarak aşağıda açıklanmıştır. Geri kalan dosyaları değiştirmeden tutun.
3	Uygulanan mantığın sonucunu doğrulamak için uygulamayı derleyin ve çalıştırın.

Değiştirilmiş modül tanımlayıcısının içeriği aşağıdadır src/com.tutorialspoint/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.tutorialspoint.client.HelloWorld'/>
   <inherits name="com.googlecode.gwt.charts.Charts"/>
   <source path = 'client'/>
   <source path = 'shared'/>
</module>

Aşağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir war/HelloWorld.html.

<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>

Yapılandırmaları anladıktan sonra güncellenmiş HelloWorld.java dosyasını sonunda göreceğiz.

2. Adım: Konfigürasyonlar Oluşturun

Kitaplığı yükleyin ve grafik oluşturun

Kitaplığı ChartLoader kullanarak yükleyin ve ardından grafiği oluşturun.

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

Veri tablosu

Bir veri tablosu oluşturarak ayrıntıları yapılandırın.

// 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);

Boyut

Ayarlanacak genişliği ve yüksekliği yapılandırın.

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

Adım 3: Grafiği üst panele ekleyin.

Grafiği kök panele ekliyoruz.

RootPanel.get().add(chart);

Misal

Yapılandırma Sözdizimini daha iyi anlamak için aşağıdaki örneği düşünün -

HelloWorld.java

package com.tutorialspoint.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();
   }
}

Sonuç

Sonucu doğrulayın.

Alan grafikleri, alan tabanlı grafikler çizmek için kullanılır. Bu bölümde, aşağıdaki alan tabanlı grafik türlerini tartışacağız.

Sr. No.	Grafik Tipi / Açıklama
1	Temel Alan Temel alan grafiği
2	Negatif değerli alan Negatif değerlere sahip alan grafiği.
3	Yığılmış alan Üst üste yığılmış alanları olan grafik.
4	Eksik noktaları olan alan Verilerdeki eksik noktaları içeren grafik.

Çubuk grafikler, çubuk tabanlı grafikler çizmek için kullanılır. Bu bölümde aşağıdaki çubuk tabanlı grafik türlerini tartışacağız.

Sr. No.	Grafik Tipi / Açıklama
1	Temel Çubuk Temel çubuk grafik
2	Gruplanmış Çubuk Grafik Gruplanmış Çubuk grafik.
3	Yığılmış Çubuk Üst üste yığılmış çubuklara sahip çubuk grafik.
4	Negatif Çubuk Negatif yığın içeren çubuk grafik.
5	Farklı Çubuk Grafik Farkları gösteren çubuk grafik.

Kabarcık grafikler, kabarcık tabanlı grafikler çizmek için kullanılır. Bu bölümde, aşağıdaki kabarcık tabanlı grafik türlerini tartışacağız.

Sr. No.	Grafik Tipi / Açıklama
1	Temel Kabarcık Temel kabarcık grafiği.
2	Veri etiketleri içeren kabarcık grafiği Veri etiketleri içeren kabarcık grafiği.

Şamdan grafikleri, bir değer farkı üzerinden açılış ve kapanış değerini göstermek için kullanılır ve normalde hisse senetlerini temsil etmek için kullanılır. Bu bölümde aşağıdaki mum çubuğuna dayalı grafik türlerini tartışacağız.

Sr. No.	Grafik Tipi / Açıklama
1	Temel Şamdan Temel Mum çubuğu grafiği.
2	Özel renklere sahip şamdan Özelleştirilmiş Şamdan Şeması.

Colummn grafikleri, sütun tabanlı grafikler çizmek için kullanılır. Bu bölümde, aşağıdaki sütun tabanlı grafik türlerini tartışacağız.

Sr. No.	Grafik Tipi / Açıklama
1	Temel Sütun Temel sütun grafiği
2	Gruplanmış Sütun Grafiği Gruplandırılmış Colummn grafiği.
3	Yığılmış Sütun Sütunların birbiri üzerine yığılmış olduğu Colummn grafiği.
4	Negatif Yığılmış Sütun Negatif yığın içeren Colummn grafiği.
5	Farklı Sütun Grafiği Farklılıkları gösteren Colummn grafiği.

Kombinasyon grafiği, her seriyi aşağıdaki listeden farklı bir işaretçi türü olarak oluşturmaya yardımcı olur: çizgi, alan, çubuklar, şamdanlar ve basamaklı alan. Seriler için varsayılan bir işaretleyici türü atamak için seriesType özelliğini kullanın. Seri özelliği, her serinin özelliklerini ayrı ayrı belirtmek için kullanılacaktır. Aşağıda, farklılıkları gösteren bir Sütun Grafiği örneği verilmiştir.

Google Grafik Yapılandırma Sözdizimi bölümünde bir grafik çizmek için kullanılan yapılandırmaları daha önce görmüştük . Şimdi, farklılıkları gösteren bir Sütun Grafiği örneğini görelim.

Konfigürasyonlar

Kullandık ComboChart Kombinasyon Grafiğini göstermek için sınıf.

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

Misal

HelloWorld.java

package com.tutorialspoint.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();
   }
}

Sonuç

Sonucu doğrulayın.

Histogram, sayısal verileri bölümler halinde gruplandıran ve bölümleri bölümlere ayrılmış sütunlar olarak görüntüleyen bir grafiktir. Bir veri kümesinin dağılımını, değerlerin ne sıklıkla aralıklara düştüğünü göstermek için kullanılırlar. Google Charts sizin için otomatik olarak paket sayısını seçer. Tüm bölümler eşit genişliktedir ve bölümdeki veri noktalarının sayısıyla orantılı bir yüksekliğe sahiptir. Histogramlar, diğer yönlerden sütun grafiklere benzer. Bu bölümde, aşağıdaki histogram tabanlı grafik türlerini tartışacağız.

Sr. No.	Grafik Tipi / Açıklama
1	Temel Histogram Temel Histogram çizelgesi.
2	Renk Kontrolü Histrogram Grafiğinin Özel Rengi.
3	Kovaları Kontrol Etme Histrogram Grafiğinin Özelleştirilmiş Kovaları.
4	Çoklu Seri Birden fazla seriye sahip Histrogram Şeması.

Çizgi grafikler, çizgi tabanlı grafikler çizmek için kullanılır. Bu bölümde aşağıdaki çizgi tabanlı grafik türlerini tartışacağız.

Sr. No.	Grafik Tipi / Açıklama
1	Temel çizgi Temel çizgi grafiği.
2	Görünür noktalarla Görünür veri noktalarına sahip grafik.
3	Özelleştirilebilir arka plan rengi Özelleştirilmiş arka plan rengine sahip grafik.
4	Özelleştirilebilir çizgi rengi Özelleştirilmiş çizgi rengiyle grafik.
5	Özelleştirilebilir eksen ve işaret etiketleri Özelleştirilmiş eksen ve işaret etiketleri ile grafik.
6	Nişangahlar Seçimdeki veri noktasında artı işaretlerini gösteren çizgi grafikler.
7	Özelleştirilebilir çizgi stili Özelleştirilmiş çizgi rengiyle grafik.
8	Eğri çizgiler içeren Çizgi Grafikler Düzgün eğri çizgileri olan grafik.

Bir Google Map Chart, Haritayı görüntülemek için Google Maps API kullanır. Veri değerleri, haritada işaretçiler olarak görüntülenir. Veri değerleri koordinatlar (enlem-boy çiftleri) veya gerçek adresler olabilir. Harita, belirlenen tüm noktaları içerecek şekilde buna göre ölçeklenecektir.

Sr. No.	Grafik Tipi / Açıklama
1	Temel Harita Temel Google Haritası.
2	Enlem / Boylam kullanarak harita Enlem ve Boylam kullanılarak belirtilen konumları içeren harita.

Aşağıda bir Organizasyon Şeması örneği verilmiştir.

Organizasyon şeması, bir organizasyondaki üst / alt ilişkileri tasvir etmek için kullanılan bir düğüm hiyerarşisi oluşturmaya yardımcı olur. Örneğin, Aile ağacı bir kuruluş şeması türüdür. Google Grafik Yapılandırma Sözdizimi bölümünde bir grafik çizmek için kullanılan yapılandırmaları daha önce görmüştük . Şimdi bir Organizasyon Şeması örneğini görelim.

Konfigürasyonlar

Kullandık OrgChart Organizasyon Şemasını göstermek için sınıf.

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

Misal

HelloWorld.java

package com.tutorialspoint.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();
   }
}

Sonuç

Sonucu doğrulayın.

Pasta grafikler, pasta tabanlı grafikler çizmek için kullanılır. Bu bölümde aşağıdaki pasta tabanlı grafik türlerini tartışacağız.

Sr. No.	Grafik Tipi / Açıklama
1	Temel Pasta Temel pasta grafiği.
2	Halka Grafik Halka Şeması.
3	3D Pasta grafiği 3D Pasta grafiği.
4	Patlatılmış dilimler içeren pasta grafik Patlatılmış dilimler içeren pasta grafik.

Sankey grafiği bir görselleştirme aracıdır ve bir değer kümesinden diğerine akışı göstermek için kullanılır. Bağlı nesnelere düğüm adı verilir ve bağlantılara bağlantı adı verilir. Sankey'ler, iki etki alanı arasında çoktan çoğa eşlemeyi veya bir dizi aşamadan geçen birden çok yolu göstermek için kullanılır.

Sr. No.	Grafik Tipi / Açıklama
1	Temel Sankey Grafiği Temel Sankey Grafiği.
2	Çok Düzeyli Sankey Grafiği Çok Düzeyli Sankey Grafiği.
3	Sankey Grafiğini Özelleştirme Özel Sankey Şeması.

Aşağıda bir Dağılım Grafiği örneği verilmiştir.

Google Grafik Yapılandırma Sözdizimi bölümünde bir grafik çizmek için kullanılan yapılandırmaları daha önce görmüştük . Şimdi bir Dağılım Grafiği örneğini görelim.

Konfigürasyonlar

Kullandık ScatterChart Scatter grafiğini göstermek için sınıf.

ScatterChart chart = new ScatterChart();

Misal

HelloWorld.java

package com.tutorialspoint.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();
   }
}

Sonuç

Sonucu doğrulayın.

Kademeli alan grafiği, adıma dayalı alan grafiğidir. Aşağıdaki basamaklı alan grafik türlerini tartışacağız.

Sr. No.	Grafik Tipi / Açıklama
1	Temel Basamaklı Grafik Temel Basamaklı Alan Grafiği.
2	Yığılmış Basamaklı Grafik Yığılmış Basamaklı Alan Grafiği.

Tablo grafiği, sıralanabilen ve sayfalanabilen bir tablonun oluşturulmasına yardımcı olur. Tablo hücreleri, biçim dizeleri kullanılarak veya hücre değerleri olarak doğrudan HTML eklenerek biçimlendirilebilir. Sayısal değerler varsayılan olarak sağa hizalanır; boole değerleri, onay işaretleri veya çarpı işaretleri olarak görüntülenir. Kullanıcılar klavye veya fare ile tek bir satır seçebilirler. Sıralama için sütun başlıkları kullanılabilir. Başlık satırı kaydırma sırasında sabit kalır. Tablo, kullanıcı etkileşimine karşılık gelen olayları tetikler.

Google Grafik Yapılandırma Sözdizimi bölümünde bir grafik çizmek için kullanılan yapılandırmaları daha önce görmüştük . Şimdi, bir Tablo Grafiği örneğini görelim.

Konfigürasyonlar

Kullandık Table Tablo grafiği göstermek için sınıf.

Table chart = new Chart();

Misal

HelloWorld.java

package com.tutorialspoint.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();
   }
}

Sonuç

Sonucu doğrulayın.

TreeMap, her düğümün sıfır veya daha fazla çocuğu ve bir ebeveyni (kök hariç) olabileceği bir veri ağacının görsel bir temsilidir. Her düğüm bir dikdörtgen olarak görüntülenir, atadığımız değerlere göre boyutlandırılabilir ve renklendirilebilir. Grafikteki diğer tüm düğümlere göre boyutlar ve renkler değerlenir. Aşağıda bir ağaç haritası grafiği örneği verilmiştir.

Google Grafik Yapılandırma Sözdizimi bölümünde bir grafik çizmek için kullanılan yapılandırmaları daha önce görmüştük . Şimdi bir TreeMap Grafiği örneğini görelim.

Konfigürasyonlar

Kullandık TreeMap TreeMap grafiğini göstermek için sınıf.

TreeMap chart = new TreeMap();

Misal

HelloWorld.java

package com.tutorialspoint.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();
   }
}

Sonuç

Sonucu doğrulayın.