GWT Google Charts - Panduan Cepat
Google Chartsadalah pustaka bagan berbasis JavaScript murni yang dimaksudkan untuk meningkatkan aplikasi web dengan menambahkan kemampuan bagan interaktif. Ini mendukung berbagai grafik. Grafik digambar menggunakan SVG di browser standar seperti Chrome, Firefox, Safari, Internet Explorer (IE). Di IE 6 yang lama, VML digunakan untuk menggambar grafik.
Google Chart Java Moduleadalah pustaka berbasis java open source untuk memberikan visualisasi Google Charts yang elegan dan kaya fitur dalam aplikasi GWT dan dapat digunakan bersama dengan pustaka widget GWT. Ada beberapa bab yang membahas semua komponen dasar Google Charts dengan contoh yang sesuai di dalam aplikasi GWT.
fitur
Berikut adalah fitur-fitur penting dari pustaka Google Charts.
Compatability - Bekerja tanpa hambatan di semua browser utama dan platform seluler seperti android dan iOS.
Multitouch Support- Mendukung multitouch pada platform berbasis layar sentuh seperti android dan iOS. Ideal untuk iPhone / iPad dan ponsel pintar / tablet berbasis android.
Free to Use - Sumber terbuka dan gratis untuk digunakan untuk tujuan non-komersial.
Lightweight - Perpustakaan inti loader.js, adalah perpustakaan yang sangat ringan.
Simple Configurations - Menggunakan json untuk menentukan berbagai konfigurasi grafik dan sangat mudah dipelajari dan digunakan.
Dynamic - Memungkinkan untuk mengubah grafik bahkan setelah pembuatan grafik.
Multiple axes- Tidak terbatas pada sumbu x, y. Mendukung banyak sumbu pada grafik.
Configurable tooltips- Keterangan alat muncul saat pengguna mengarahkan kursor ke titik mana pun pada bagan. googlecharts menyediakan pemformat inbuilt tooltip atau pemformat panggilan balik untuk mengontrol tooltip secara terprogram.
DateTime support- Tangani waktu tanggal secara khusus. Menyediakan banyak kontrol bawaan atas kategori tanggal bijaksana.
Print - Cetak grafik menggunakan halaman web.
External data- Mendukung memuat data secara dinamis dari server. Memberikan kontrol atas data menggunakan fungsi panggilan balik.
Text Rotation - Mendukung rotasi label ke segala arah.
Jenis Bagan yang Didukung
Perpustakaan Google Charts menyediakan jenis grafik berikut -
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Line Charts Digunakan untuk menggambar grafik berbasis garis / spline. |
2 | Area Charts Digunakan untuk menggambar grafik area bijaksana. |
3 | Pie Charts Digunakan untuk menggambar diagram lingkaran. |
4 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Digunakan untuk menggambar bagan yang tersebar. |
5 | Bubble Charts Digunakan untuk menggambar grafik berbasis gelembung. |
6 | Dynamic Charts Digunakan untuk menggambar grafik dinamis dimana pengguna dapat memodifikasi grafik. |
7 | Combinations Digunakan untuk menggambar kombinasi berbagai grafik. |
8 | 3D Charts Digunakan untuk menggambar grafik 3D. |
9 | Angular Gauges Digunakan untuk menggambar bagan jenis speedometer. |
10 | Heat Maps Digunakan untuk menggambar peta panas. |
11 | Tree Maps Digunakan untuk menggambar peta pohon. |
Pada bab selanjutnya, kita akan membahas setiap jenis grafik yang disebutkan di atas secara rinci dengan contoh.
Lisensi
Google Charts adalah open source dan gratis untuk digunakan. Ikuti tautannya: Persyaratan Layanan .
Tutorial ini akan memandu Anda tentang cara mempersiapkan lingkungan pengembangan untuk memulai pekerjaan Anda dengan Google Charts dan GWT Framework. Tutorial ini juga akan mengajari Anda cara menyiapkan JDK, Tomcat, dan Eclipse di komputer Anda sebelum Anda menyiapkan Kerangka GWT -
Persyaratan Sistem
GWT membutuhkan JDK 1.6 atau lebih tinggi, jadi persyaratan pertama adalah menginstal JDK di mesin Anda.
JDK | 1.6 atau lebih tinggi. |
---|---|
Penyimpanan | tidak ada persyaratan minimum. |
Ruang Disk | tidak ada persyaratan minimum. |
Sistem operasi | tidak ada persyaratan minimum. |
Ikuti langkah-langkah yang diberikan untuk menyiapkan lingkungan Anda untuk memulai pengembangan aplikasi GWT.
Langkah 1 - Verifikasi Instalasi Java di Mesin Anda
Sekarang buka konsol dan jalankan perintah java berikut.
OS | Tugas | Perintah |
---|---|---|
Windows | Buka Konsol Perintah | c: \> java -version |
Linux | Buka Terminal Perintah | $ java -version |
Mac | Buka Terminal | mesin: ~ joseph $ java -version |
Mari kita verifikasi keluaran untuk semua sistem operasi
Sr.No. | OS & Output yang Dihasilkan |
---|---|
1 | Windows versi java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) VM Klien Java HotSpot (TM) (build 17.0-b17, mode campuran, berbagi) |
2 | Linux versi java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) ava HotSpot (TM) Client VM (build 17.0-b17, mode campuran, berbagi) |
3 | Mac versi java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) Java HotSpot (TM) 64-Bit Server VM (build 17.0-b17, mode campuran, berbagi) |
Langkah 2 - Siapkan Java Development Kit (JDK)
Jika Anda belum menginstal Java, Anda dapat menginstal Java Software Development Kit (SDK) dari situs Java Oracle: Java SE Downloads . Anda akan menemukan instruksi untuk menginstal JDK dalam file yang diunduh, ikuti instruksi yang diberikan untuk menginstal dan mengkonfigurasi pengaturan. Terakhir, setel variabel lingkungan PATH dan JAVA_HOME untuk merujuk ke direktori yang berisi java dan javac, biasanya masing-masing java_install_dir / bin dan java_install_dir.
Mengatur JAVA_HOMEvariabel lingkungan untuk menunjuk ke lokasi direktori dasar tempat Java diinstal pada mesin Anda. Sebagai contoh
Sr.No. | OS & Output |
---|---|
1 | Windows Setel variabel lingkungan JAVA_HOME ke C: \ Program Files \ Java \ jdk1.6.0_21 |
2 | Linux ekspor JAVA_HOME = / usr / local / java-current |
3 | Mac ekspor JAVA_HOME = / Library / Java / Home |
Tambahkan lokasi compiler Java ke System Path.
Sr.No. | OS & Output |
---|---|
1 | Windows Tambahkan string;% JAVA_HOME% \ bin ke akhir variabel sistem, Path. |
2 | Linux ekspor PATH = $ PATH: $ JAVA_HOME / bin / |
3 | Mac tidak dibutuhkan |
Alternatifnya, jika Anda menggunakan Integrated Development Environment (IDE) seperti Borland JBuilder, Eclipse, IntelliJ IDEA, atau Sun ONE Studio, kompilasi dan jalankan program sederhana untuk memastikan bahwa IDE mengetahui di mana Anda menginstal Java, jika tidak lakukan pengaturan yang tepat seperti dokumen yang diberikan. dari IDE.
Langkah 3 - Siapkan Eclipse IDE
Semua contoh dalam tutorial ini telah ditulis menggunakan Eclipse IDE. Jadi saya sarankan Anda harus menginstal Eclipse versi terbaru pada mesin Anda berdasarkan sistem operasi Anda.
Untuk menginstal Eclipse IDE, unduh binari Eclipse terbaru dari https://www.eclipse.org/downloads/. Setelah Anda mengunduh instalasi, buka paket distribusi biner ke lokasi yang nyaman. Misalnya di C: \ eclipse on windows, atau / usr / local / eclipse di Linux / Unix dan terakhir atur variabel PATH dengan tepat.
Eclipse dapat dimulai dengan menjalankan perintah berikut di mesin windows, atau Anda cukup mengklik dua kali pada eclipse.exe
%C:\eclipse\eclipse.exe
Eclipse dapat dimulai dengan menjalankan perintah berikut di mesin Unix (Solaris, Linux, dll.) -
$/usr/local/eclipse/eclipse
Setelah startup berhasil, jika semuanya baik-baik saja maka itu akan menampilkan hasil
Langkah 4: Instal GWT SDK & Plugin untuk Eclipse
Ikuti petunjuk yang diberikan di tautan Plugin untuk Eclipse (termasuk SDK) untuk memasang GWT SDK & Plugin untuk versi Eclipse yang dipasang di komputer Anda.
Setelah penyiapan berhasil untuk plugin GWT, jika semuanya baik-baik saja maka itu akan menampilkan layar berikut dengan Google icon ditandai dengan kotak merah.
Langkah 5: Instal Google Charts
Unduh jar Google Charts terbaru dari halaman Repositori MVN dan tambahkan ke classpath proyek.
Tambahkan entri berikut dalam file <project-name> .gwt.xml
<inherits name = "com.googlecode.gwt.charts.Charts"/>
Dalam bab ini, kami akan menampilkan konfigurasi yang diperlukan untuk menggambar diagram menggunakan Google Charts API di GWT.
Langkah 1: Buat Aplikasi GWT
Ikuti langkah-langkah berikut untuk memperbarui aplikasi GWT yang kami buat di GWT - bab Membuat Aplikasi -
Langkah | Deskripsi |
---|---|
1 | Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint seperti yang dijelaskan di bab GWT - Membuat Aplikasi . |
2 | Ubah HelloWorld.gwt.xml , HelloWorld.html dan HelloWorld.java seperti yang dijelaskan di bawah ini. Jaga sisa file tidak berubah. |
3 | Kompilasi dan jalankan aplikasi untuk memverifikasi hasil dari logika yang diimplementasikan. |
Berikut adalah isi dari deskriptor modul yang dimodifikasi 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>
Berikut adalah konten file host HTML yang dimodifikasi 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>
Kita akan melihat HelloWorld.java yang diperbarui pada akhirnya setelah memahami konfigurasi.
Langkah 2: Buat Konfigurasi
Muat Perpustakaan dan buat bagan
Muat perpustakaan menggunakan ChartLoader dan kemudian buat bagan.
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
PieChart chart = new PieChart();
}
});
Tabel data
Konfigurasi detailnya dengan membuat tabel data.
// 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);
Ukuran
Konfigurasi lebar dan tinggi yang akan diatur.
chart.setWidth("700px");
chart.setHeight("700px");
Langkah 3: Tambahkan diagram ke panel induk.
Kami menambahkan grafik ke panel root.
RootPanel.get().add(chart);
Contoh
Pertimbangkan contoh berikut untuk lebih memahami Sintaks Konfigurasi -
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();
}
}
Hasil
Verifikasi hasilnya.
Diagram area digunakan untuk menggambar diagram berbasis area. Di bagian ini kita akan membahas jenis grafik berbasis area berikut.
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Area Dasar Bagan area dasar |
2 | Area dengan nilai negatif Bagan area yang memiliki nilai negatif. |
3 | Area bertumpuk Bagan memiliki area yang bertumpuk satu sama lain. |
4 | Area dengan poin yang hilang Bagan dengan poin yang hilang dalam data. |
Grafik batang digunakan untuk menggambar grafik berbasis batang. Di bagian ini kita akan membahas jenis grafik berbasis batang berikut.
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Bilah Dasar Bagan batang dasar |
2 | Bagan Batang yang Dikelompokkan Bagan batang yang dikelompokkan. |
3 | Batang Bertumpuk Bagan batang memiliki batang yang ditumpuk satu sama lain. |
4 | Bilah Negatif Bagan batang dengan tumpukan negatif. |
5 | Diagram Batang Diff Bagan batang menunjukkan Perbedaan. |
Bagan gelembung digunakan untuk menggambar bagan berbasis gelembung. Di bagian ini kita akan membahas jenis grafik berbasis gelembung berikut.
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Gelembung Dasar Bagan gelembung dasar. |
2 | Bagan gelembung dengan label data Bagan gelembung dengan label data. |
Grafik candlestick digunakan untuk menunjukkan nilai pembukaan dan penutupan pada varians nilai dan biasanya digunakan untuk mewakili saham. Di bagian ini kita akan membahas jenis grafik berbasis candlestick berikut.
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Candlestick Dasar Grafik dasar candlestick. |
2 | Tempat lilin dengan warna yang disesuaikan Grafik Candlestick yang Disesuaikan. |
Bagan kolom digunakan untuk menggambar bagan berbasis kolom. Pada bagian ini kita akan membahas jenis grafik berbasis kolom berikut.
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Kolom Dasar Bagan kolom dasar |
2 | Bagan Kolom yang Dikelompokkan Bagan Colummn yang dikelompokkan. |
3 | Kolom Bertumpuk Bagan kolom memiliki kolom yang ditumpuk satu sama lain. |
4 | Kolom Bertumpuk Negatif Bagan kolom dengan tumpukan negatif. |
5 | Bagan Kolom Diff Bagan kolom yang menunjukkan Perbedaan. |
Bagan kombinasi membantu dalam menampilkan setiap rangkaian sebagai jenis penanda yang berbeda dari daftar berikut: garis, area, batang, kandil, dan area berundak. Untuk menetapkan tipe penanda default untuk seri, gunakan properti seriesType. Properti seri akan digunakan untuk menentukan properti dari setiap seri secara individual. Berikut adalah contoh Bagan Kolom yang memperlihatkan perbedaan.
Kita telah melihat konfigurasi yang digunakan untuk menggambar grafik di bab Sintaks Konfigurasi Google Charts . Sekarang, mari kita lihat contoh Bagan Kolom yang menunjukkan perbedaan.
Konfigurasi
Kami telah menggunakan ComboChart kelas untuk menunjukkan Bagan Kombinasi.
// Combination chart
ComboChart chart = new ComboChart();
Contoh
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();
}
}
Hasil
Verifikasi hasilnya.
Histogram adalah bagan yang mengelompokkan data numerik ke dalam kotak, menampilkan kotak sebagai kolom tersegmentasi. Mereka digunakan untuk menggambarkan distribusi set data sebagai seberapa sering nilai masuk ke dalam rentang. Google Charts secara otomatis memilih jumlah keranjang untuk Anda. Semua bucket memiliki lebar yang sama dan memiliki tinggi yang sebanding dengan jumlah titik data di bucket. Histogram mirip dengan bagan kolom dalam aspek lain. Pada bagian ini kita akan membahas jenis grafik berbasis histogram berikut.
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Histogram Dasar Bagan Histogram Dasar. |
2 | Mengontrol Warna Warna Bagan Histogram yang Disesuaikan. |
3 | Mengontrol Bucket Keranjang yang Disesuaikan dari Bagan Histrogram. |
4 | Beberapa Seri Diagram Histogram memiliki banyak rangkaian. |
Grafik garis digunakan untuk menggambar grafik berbasis garis. Di bagian ini kita akan membahas jenis grafik berbasis garis berikut.
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Garis dasar Bagan garis dasar. |
2 | Dengan poin yang terlihat Bagan dengan titik data yang terlihat. |
3 | Warna latar belakang yang dapat disesuaikan Bagan dengan warna latar yang disesuaikan. |
4 | Warna garis yang dapat disesuaikan Bagan dengan warna garis yang disesuaikan. |
5 | Sumbu dan label centang yang dapat disesuaikan Bagan dengan sumbu dan label centang yang disesuaikan. |
6 | Garis bidik Diagram garis menunjukkan bidik pada titik data pada pilihan. |
7 | Gaya garis yang dapat disesuaikan Bagan dengan warna garis yang disesuaikan. |
8 | Diagram Garis dengan garis lengkung Bagan dengan garis kurva halus. |
Bagan Peta Google menggunakan Google Maps API untuk menampilkan Peta. Nilai data ditampilkan sebagai penanda di peta. Nilai data dapat berupa koordinat (pasangan bujur lintang) atau alamat sebenarnya. Peta akan diskalakan sedemikian rupa sehingga mencakup semua titik yang teridentifikasi.
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Peta Dasar Peta Google Dasar. |
2 | Peta menggunakan Garis Lintang / Bujur Peta yang lokasinya ditentukan menggunakan Lintang dan Bujur. |
Berikut adalah contoh Bagan Organisasi.
Bagan organisasi membantu dalam membuat hierarki node, digunakan untuk menggambarkan hubungan atasan / bawahan dalam suatu organisasi. Misalnya, pohon keluarga adalah jenis bagan organisasi. Kita telah melihat konfigurasi yang digunakan untuk menggambar grafik di bab Sintaks Konfigurasi Google Charts . Sekarang, mari kita lihat contoh Bagan Organisasi.
Konfigurasi
Kami telah menggunakan OrgChart kelas untuk menunjukkan Bagan Organisasi.
// Organization chart
OrgChart chart = new OrgChart();
Contoh
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();
}
}
Hasil
Verifikasi hasilnya.
Bagan pai digunakan untuk menggambar bagan berbasis pai. Pada bagian ini kita akan membahas jenis diagram berbasis pai berikut.
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Pai Dasar Diagram lingkaran dasar. |
2 | Bagan Donat Bagan Donat. |
3 | Bagan Pai 3D Bagan Pai 3D. |
4 | Bagan pai dengan irisan yang meledak Bagan pai dengan irisan yang meledak. |
Diagram sankey adalah alat visualisasi dan digunakan untuk menggambarkan aliran dari satu kumpulan nilai ke nilai lainnya. Objek yang terhubung disebut node dan koneksi disebut link. Sankey digunakan untuk menunjukkan pemetaan banyak ke banyak antara dua domain atau beberapa jalur melalui serangkaian tahapan.
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Diagram Sankey Dasar Diagram Sankey Dasar. |
2 | Bagan Sankey Bertingkat Bagan Sankey Bertingkat. |
3 | Menyesuaikan Grafik Sankey Bagan Sankey yang Disesuaikan. |
Berikut adalah contoh Bagan Sebar.
Kita telah melihat konfigurasi yang digunakan untuk menggambar grafik di bab Sintaks Konfigurasi Google Charts . Sekarang, mari kita lihat contoh Bagan Sebar.
Konfigurasi
Kami telah menggunakan ScatterChart kelas untuk menunjukkan bagan Sebar.
ScatterChart chart = new ScatterChart();
Contoh
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();
}
}
Hasil
Verifikasi hasilnya.
Bagan area berundak adalah bagan area berbasis langkah. Kita akan membahas jenis bagan area berundak berikut.
No Sr | Jenis / Deskripsi Bagan |
---|---|
1 | Bagan Bertingkat Dasar Bagan Area Bertingkat Dasar. |
2 | Bagan Bertumpuk Bertumpuk Bagan Area Bertumpuk Bertumpuk. |
Bagan tabel membantu dalam merender tabel yang dapat diurutkan dan diberi halaman. Sel tabel dapat diformat menggunakan string format, atau dengan langsung memasukkan HTML sebagai nilai sel. Nilai numerik diratakan ke kanan secara default; nilai boolean ditampilkan sebagai tanda centang atau tanda silang. Pengguna dapat memilih satu baris baik dengan keyboard atau mouse. Tajuk kolom dapat digunakan untuk menyortir. Baris tajuk tetap diperbaiki selama pengguliran. Tabel mengaktifkan peristiwa yang sesuai dengan interaksi pengguna.
Kita telah melihat konfigurasi yang digunakan untuk menggambar grafik di bab Sintaks Konfigurasi Google Charts . Sekarang, mari kita lihat contoh Bagan Tabel.
Konfigurasi
Kami telah menggunakan Table kelas untuk menunjukkan bagan Tabel.
Table chart = new Chart();
Contoh
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();
}
}
Hasil
Verifikasi hasilnya.
TreeMap adalah representasi visual dari pohon data, di mana setiap node dapat memiliki nol atau lebih anak, dan satu orang tua (kecuali untuk root). Setiap node ditampilkan dalam bentuk persegi panjang, dapat berukuran dan diwarnai sesuai dengan nilai yang kita tetapkan. Ukuran dan warna dinilai relatif terhadap semua node lain dalam grafik. Berikut adalah contoh bagan peta hierarki.
Kita telah melihat konfigurasi yang digunakan untuk menggambar grafik di bab Sintaks Konfigurasi Google Charts . Sekarang, mari kita lihat contoh Bagan Peta Pohon.
Konfigurasi
Kami telah menggunakan TreeMap kelas untuk menampilkan bagan TreeMap.
TreeMap chart = new TreeMap();
Contoh
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();
}
}
Hasil
Verifikasi hasilnya.