Cara Membuat Google Charts

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 12, 2021

Di bawah ini kita akan mempeajari cara menambahkan Google Charts ke dalam website kita.

Contoh

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>Page Aktifitas Saya</h1>

<div id="piechart"></div>

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

<script type="text/javascript">
// Muat grafik google
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Gambar bagan dan tetapkan nilai bagan
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Mengerjakan PR', 'Hours per Day'],
  ['Kerja', 8],
  ['Makan', 2],
  ['Nonton Drakor', 4],
  ['Nonton Anime', 2],
  ['Tidur', 8]
]);

  // Pilihan; tambahkan judul dan atur lebar dan tinggi grafik
  var options = {'title':'Keseharian Saya', 'width':550, 'height':400};

  // Tampilkan grafik di dalam elemen <div> dengan id = "piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>

</body>
</html>

Google Pie Chart

Mulailah dengan halaman web dasar yang sederhana.Tambahkan elemen <div> dengan id “piechart”:
Contoh

<!DOCTYPE html>
<html>
<body>

<h1>Page Aktifitas Saya</h1>

<div id="piechart"></div>

</body>
<html>

Tambahkan referensi ke Chart API di google.com:
Contoh

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

Dan tambahkan fungsi JavaScript:
Contoh

<script type="text/javascript">
// Muat grafik google
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Gambar bagan dan tetapkan nilai bagan
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Mengerjakan PR', 'Hours per Day'],
  ['Kerja', 8],
  ['Makan', 2],
  ['Nonton Drakor', 4],
  ['Nonton Anime', 2],
  ['Tidur', 8]
]);

  // Pilihan; tambahkan judul dan atur lebar dan tinggi grafik
  var options = {'title':'My Average Day', 'width':550, 'height':400};

  // Tampilkan grafik di dalam elemen <div> dengan id = "piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>