Grafik Google

Dari grafik garis sederhana hingga grafik pohon hirarki kompleks, pustaka grafik Google menawarkan berbagai tipe grafik yang siap digunakan:

  • Grafik Scatter
  • Grafik Line
  • Grafik Bar / Column
  • Grafik Area
  • Grafik Pie
  • Grafik Donut
  • Grafik Struktur Organisasi (Org Chart)
  • Peta / Grafik Geografis (Map / Geo Chart)

Bagaimana cara menggunakan Google Chart?

Jika Anda ingin menggunakan Google Chart di halaman web Anda, silakanTambahkan tautan ke loader grafik:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

Grafik Google mudah digunakan.

Hanya tambahkan satu <div> Elemen dapat menampilkan grafik:

<div id="myChart" style="max-width:700px; height:400px"></div>

Elemen <div> harus memiliki ID yang unik.

Lanjutkan dengan load Google Graph API:

  1. Load API Visualization dan paket corechart
  2. Setel suatu fungsi callback, yang dijalankan setelah API di-load
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

demikian saja!}

Grafik Garis

Kode Sumber

function drawChart() {
// Mengatur data
var data = google.visualization.arrayToDataTable([
  ['Harga', 'Ukuran'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]
// Mengatur opsi
var options = {
  title: 'Harga Rumah dan Luas Rumah',
  hAxis: {title: 'Meter persegi'},
  vAxis: {title: 'Harga Jutaan'},
  legend: 'none'
};
// Menggambar grafik
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Coba Sendiri

Grafik Titik

data yang sama untuk menghasilkanGrafik Titik, silakan ganti google.visualization ubah menjadi ScatterChart:

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

Coba Sendiri

Grafik Batang

Kode Sumber

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italia', 55],
  ['Perancis', 49],
  ['Spanyol', 44],
  ['Amerika Serikat', 24],
  
]
var options = {
  title: 'Pembuatan Wine Global'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Coba Sendiri

Grafik Piring

Untuk mengubah grafik batang menjadiGrafik Piringhanya gunakan:

google.visualization.PieChart

Ganti:

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

Coba Sendiri

Grafik Piring 3D

Untuk menampilkan grafik piring 3D, cukup is3D: true tambah ke opsi:

var options = {
  title: 'Pembuatan Produksi Anggur Global',
  is3D: true
};

Coba Sendiri