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.
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 -
| Sr.No. | 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 .
Pada bab ini kita akan membahas tentang bagaimana mengatur library Google Charts untuk digunakan dalam pengembangan aplikasi web.
Pasang Google Charts
Ada dua cara untuk menggunakan Google Charts.
Download - Unduh secara lokal dari https://developers.google.com/chart dan gunakan itu.
CDN access- Anda juga memiliki akses ke CDN. CDN akan memberi Anda akses di seluruh dunia ke pusat data regional yang dalam hal ini, host Google Charthttps://www.gstatic.com/charts.
Menggunakan Downloaded Google Chart
Sertakan file JavaScript googlecharts di halaman HTML menggunakan script berikut -
<head>
<script src = "/googlecharts/loader.js"></script>
</head>Menggunakan CDN
Kami menggunakan versi CDN dari pustaka Google Chart sepanjang tutorial ini.
Sertakan file JavaScript Google Chart di halaman HTML menggunakan script berikut -
<head>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>Dalam bab ini, kami akan menunjukkan konfigurasi yang diperlukan untuk menggambar grafik menggunakan Google Chart API.
Langkah 1: Buat Halaman HTML
Buat halaman HTML dengan perpustakaan Google Chart.
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
</body>
</html>Sini containerdiv digunakan untuk memuat grafik yang digambar menggunakan pustaka Google Chart. Di sini kami memuat versi terbaru dari corecharts API menggunakan metode google.charts.load.
Langkah 2: Buat konfigurasi
Perpustakaan Google Chart menggunakan konfigurasi yang sangat sederhana menggunakan sintaks json.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Di sini data merepresentasikan data json dan opsi merepresentasikan konfigurasi yang digunakan library Google Chart untuk menggambar diagram dalam div kontainer menggunakan metode draw (). Sekarang kita akan mengkonfigurasi berbagai parameter untuk membuat string json yang diperlukan.
judul
Konfigurasikan opsi grafik.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};Tabel data
Konfigurasikan data yang akan ditampilkan pada grafik. DataTable adalah kumpulan terstruktur tabel khusus yang berisi data bagan. Kolom tabel data mewakili legenda dan baris mewakili data yang sesuai. Metode addColumn () digunakan untuk menambahkan kolom di mana parameter pertama mewakili tipe data dan parameter kedua mewakili legenda. addRows () metode digunakan untuk menambahkan baris yang sesuai.
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);Langkah 3: Gambar grafiknya
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Contoh
Berikut adalah contoh lengkapnya -
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById ('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Berikut kode panggilan fungsi drawChart untuk menggambar grafik ketika pustaka Google Chart dimuat sepenuhnya.
google.charts.setOnLoadCallback(drawChart);Hasil
Verifikasi hasilnya.
Diagram area digunakan untuk menggambar diagram berbasis area. Di bagian ini kita akan membahas jenis grafik berbasis area berikut.
| Sr.No. | 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 | Persentase luas Bagan dengan data dalam persentase. |
| 5 | Area dengan poin yang hilang Bagan dengan poin yang hilang dalam data. |
| 6 | Sumbu terbalik Area menggunakan sumbu terbalik. |
Grafik batang digunakan untuk menggambar grafik berbasis batang. Di bagian ini kita akan membahas jenis grafik berbasis batang berikut.
| Sr.No. | 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 | Batang Bertumpuk Negatif Bagan batang dengan tumpukan negatif. |
| 5 | Persentase Batang Bertumpuk Bagan Batang dengan data dalam bentuk persentase. |
| 6 | Bagan Batang Material Bagan batang yang terinspirasi Desain Material. |
| 7 | Bagan Batang dengan label data Bagan batang dengan label data. |
Bagan gelembung digunakan untuk menggambar bagan berbasis gelembung. Di bagian ini kita akan membahas jenis grafik berbasis gelembung berikut.
| Sr.No. | Jenis & Deskripsi Bagan |
|---|---|
| 1 | Gelembung Dasar Bagan gelembung dasar. |
| 2 | Bagan gelembung dengan label data Bagan gelembung dengan label data. |
Bagan kalender digunakan untuk menggambar aktivitas dalam rentang waktu yang lama seperti bulan atau tahun. Di bagian ini kita akan membahas jenis grafik berbasis kalender berikut.
| Sr.No. | Jenis & Deskripsi Bagan |
|---|---|
| 1 | Kalender Dasar Bagan Kalender Dasar. |
| 2 | Kalender dengan warna yang disesuaikan Bagan Kalender yang Disesuaikan. |
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.
| Sr.No. | 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.
| Sr.No. | Jenis & Deskripsi Bagan |
|---|---|
| 1 | Kolom Dasar Bagan Kolom Dasar. |
| 2 | Kolom yang Dikelompokkan Bagan Kolom yang Dikelompokkan. |
| 3 | Kolom Bertumpuk Bagan kolom memiliki kolom yang ditumpuk satu sama lain. |
| 4 | Kolom Bertumpuk Negatif Bagan kolom dengan tumpukan negatif. |
| 5 | Persentase Kolom Bertumpuk Bagan Kolom dengan data dalam bentuk persentase. |
| 6 | Bagan Kolom Material Bagan kolom yang terinspirasi Desain Material. |
| 7 | Bagan Kolom dengan label data Bagan kolom dengan label data. |
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. Kita telah melihat konfigurasi yang digunakan untuk menggambar diagram ini di bab Sintaks Konfigurasi Diagram Google . Jadi, mari kita lihat contoh lengkapnya.
Konfigurasi
Kami telah menggunakan ComboChart kelas untuk menunjukkan grafik berbasis kombinasi.
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));Contoh
googlecharts_combination_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'John', 'Average'],
['Apples', 3, 2, 2.5],
['Oranges', 2, 3, 2.5],
['Pears', 1, 5, 3],
['Bananas', 3, 9, 6],
['Plums', 4, 2, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>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.
| Sr.No. | 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.
| Sr.No. | 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. |
| 9 | Bagan Garis Material Bagan garis yang terinspirasi Desain Material. |
| 10 | Diagram Garis X Teratas Bagan garis yang terinspirasi Desain Material dengan Sumbu-X di atas bagan. |
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.
| Sr.No. | Jenis & Deskripsi Bagan |
|---|---|
| 1 | Peta Dasar Peta Google Dasar. |
| 2 | Peta menggunakan Garis Lintang / Bujur Peta yang lokasinya ditentukan menggunakan Lintang dan Bujur. |
| 3 | Menyesuaikan penanda Penanda Khusus di Peta. |
Bagan organisasi membantu dalam membuat hierarki node, digunakan untuk menggambarkan hubungan atasan / bawahan dalam suatu organisasi. Sebagai contoh, Pohon keluarga adalah jenis bagan organisasi .. Kita telah melihat konfigurasi yang digunakan untuk menggambar bagan ini di bab Sintaks Konfigurasi Diagram Google . Jadi, mari kita lihat contoh lengkapnya.
Konfigurasi
Kami telah menggunakan OrgChart kelas untuk menunjukkan bagan berbasis organisasi.
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));Contoh
googlecharts_organization_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['orgchart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
['Alice', 'Robert', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Set chart options
var options = {allowHtml:true};
// Instantiate and draw the chart.
var chart = new google.visualization.OrgChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Hasil
Verifikasi hasilnya.
Bagan pai digunakan untuk menggambar bagan berbasis pai. Pada bagian ini kita akan membahas jenis diagram berbasis pai berikut.
| Sr.No. | 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.
| Sr.No. | 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. |
Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines digunakan untuk menggambar grafik berbasis sebar. Di bagian ini kita akan membahas jenis grafik berbasis pencar berikut.
| Sr.No. | Jenis & Deskripsi Bagan |
|---|---|
| 1 | Scatter Dasar Diagram sebar dasar. |
| 2 | Bagan Sebar Material Bagan Sebar Material. |
| 3 | Bagan Sebar Sumbu Y Ganda Bagan Sebar Material memiliki Sumbu Y ganda. |
| 4 | Bagan Sebar Sumbu X Teratas Bagan Sebar Material dengan Sumbu X di bagian atas. |
Bagan area berundak adalah bagan area berbasis langkah. Kita akan membahas jenis bagan area berundak berikut.
| Sr.No. | Jenis & Deskripsi Bagan |
|---|---|
| 1 | Bagan Bertingkat Dasar Bagan Area Bertingkat Dasar. |
| 2 | Bagan Bertumpuk Bertumpuk Bagan Area Bertumpuk Bertumpuk. |
| 3 | 100% Stacked Stepped Chart Bagan Area Bertumpuk 100% 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 tetap selama pengguliran. Tabel mengaktifkan peristiwa yang sesuai dengan interaksi pengguna. Kita telah melihat konfigurasi yang digunakan untuk menggambar diagram ini di bab Sintaks Konfigurasi Diagram Google . Jadi, mari kita lihat contoh lengkapnya.
Konfigurasi
Kami telah menggunakan Table kelas untuk menunjukkan grafik berbasis tabel.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Contoh
googlecharts_table_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['table']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var options = {
showRowNumber: true,
width: '100%',
height: '100%'
};
// Instantiate and draw the chart.
var chart = new google.visualization.Table(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Hasil
Verifikasi hasilnya.
Garis waktu menggambarkan bagaimana sekumpulan sumber daya digunakan dari waktu ke waktu. Kami akan membahas jenis grafik Timelines berikut.
| Sr.No. | Jenis / Deskripsi Bagan |
|---|---|
| 1 | Bagan Garis Waktu Dasar Bagan Garis Waktu Dasar |
| 2 | Bagan Garis Waktu dengan label data Bagan Garis Waktu dengan label data |
| 3 | Bagan garis waktu tanpa Label Baris Bagan garis waktu tanpa Label Baris |
| 4 | Pewarnaan bagan garis waktu Bagan Garis Waktu yang Disesuaikan |
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 diagram ini di bab Sintaks Konfigurasi Diagram Google . Jadi, mari kita lihat contoh lengkapnya.
Konfigurasi
Kami telah menggunakan TreeMap kelas untuk menunjukkan diagram peta hierarki.
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));Contoh
googlecharts_treemap.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript" src = "https://www.google.com/jsapi">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['treemap']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Egypt', 'Africa', 21, 0],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
var options = {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
};
// Instantiate and draw the chart.
var chart = new google.visualization.TreeMap(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Hasil
Verifikasi hasilnya.
Garis tren adalah garis yang dilapiskan pada grafik untuk mengungkapkan arah data secara keseluruhan. Google Charts dapat secara otomatis menghasilkan trendlines untuk Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines, Bar Charts, Column Charts, dan Line Charts .. Kita akan membahas jenis grafik trendlines berikut.
| Sr.No. | Jenis & Deskripsi Bagan |
|---|---|
| 1 | Bagan Garis Tren Dasar Bagan Garis Tren Dasar. |
| 2 | Grafik Garis Tren Eksponensial Grafik Garis Tren Eksponensial. |
| 3 | Bagan Garis Tren Polinomial Bagan Garis Tren Polinomial. |