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.