Seri 10 — Membuat Dashboard Visual dari Data Spreadsheet

📊 Menampilkan Data dalam Grafik & UI Interaktif

Di seri sebelumnya, kita sudah membuat Web App sederhana menggunakan Google Apps Script (GAS).
Sekarang, kita akan melangkah lebih jauh: membuat dashboard visual berbasis web yang menampilkan data dari Google Sheets dalam bentuk tabel dan grafik.

Dashboard seperti ini bisa kita gunakan untuk:
✅ Laporan penjualan
✅ Statistik kehadiran
✅ Monitoring stok barang
✅ Rekap kinerja

GAS + Sheets + HTML + Chart = solusi lengkap tanpa server tambahan!

🎯 Tujuan Seri Ini

Di seri kali ini, kita akan:

Membaca data dari Google Sheets
Mengirim data ke halaman HTML
Menampilkan data dalam tabel
Membuat grafik menggunakan Google Charts
Men-deploy sebagai Web App

✅ 1. Source Data

Misal kita punya data penjualan di Sheet “Penjualan”:

Tanggal	Produk	Jumlah
2025-01-01	A	10
2025-01-02	B	12
2025-01-02	A	7

Kita akan membuat grafik jumlah penjualan by tanggal.

✅ 2. Code.gs — Ambil Data dari Sheet

Buat file Code.gs:


function doGet() {
  const template = HtmlService.createTemplateFromFile('index');
  template.data = getData();
  return template.evaluate();
}

function getData() {
  const sheet = SpreadsheetApp.getActive().getSheetByName('Penjualan');
  const values = sheet.getDataRange().getValues();

  // Buang header
  const data = values.slice(1);

  // Format ulang data ke array: [Tanggal, Jumlah]
  const formatted = data.map(row => [row[0], row[2]]);

  return formatted;
}

// Util untuk include HTML terpisah
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Penjelasan:

getData() mengambil data dan hanya menyisakan kolom tanggal + jumlah
Data akan dikirim ke HTML via templating template.data

✅ 3. index.html — Dashboard UI

Buat file baru index.html:


<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- Load Google Charts -->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
  </head>

  <body class="container">
    <h2>Dashboard Penjualan</h2>
    <div id="chart" style="width: 100%; height: 400px;"></div>
    <div id="table" style="margin-top: 30px;"></div>

    <?!= include('script'); ?>
  </body>
</html>

✅ 4. script.html — Script Grafik

Buat file HTML baru script.html:


<script>
  const dataFromServer = <?= JSON.stringify(data) ?>;

  google.charts.load("current", { packages: ["corechart", "table"] });
  google.charts.setOnLoadCallback(drawAll);

  function drawAll() {
    drawChart();
    drawTable();
  }

  function drawChart() {
    const tableData = new google.visualization.DataTable();
    tableData.addColumn("date", "Tanggal");
    tableData.addColumn("number", "Jumlah");

    const rows = dataFromServer.map(row => {
      return [new Date(row[0]), Number(row[1])];
    });

    tableData.addRows(rows);

    const options = {
      title: "Penjualan per Hari",
      legend: { position: "bottom" }
    };

    const chart = new google.visualization.LineChart(document.getElementById("chart"));
    chart.draw(tableData, options);
  }

  function drawTable() {
    const tableData = new google.visualization.DataTable();
    tableData.addColumn("date", "Tanggal");
    tableData.addColumn("number", "Jumlah");

    const rows = dataFromServer.map(row => {
      return [new Date(row[0]), Number(row[1])];
    });

    tableData.addRows(rows);

    const table = new google.visualization.Table(document.getElementById("table"));
    table.draw(tableData);
  }
</script>

Penjelasan:

dataFromServer berisi array data yang berasal dari GAS
Kita buat 2 visualisasi: line chart + table
Google Charts memudahkan pembuatan grafik interaktif

✅ 5. Deploy Web App

Klik Deploy → New Deployment
Pilih Web App
Set:

Execute as: Me
Who has access: Anyone

Klik Deploy

Copy URL → buka di browser → Dashboard siap digunakan ✅

✅ 6. Penjelasan Alur Utama

getData() ambil data dari Sheets → berikan ke doGet()
doGet() kirim data ke index.html
script.html menerima data via templating
Google Charts mengubah data menjadi grafik
Hasil tampil di Web App

Alurnya visual dan otomatis!

✅ 7. Kustomisasi Dashboard

Kita bisa menambahkan:

Filter per produk
Pilihan range tanggal
Grafik bar / pie / area
Data summary (total, rata-rata)

Contoh tambahan summary:


function getSummary() {
  const data = getData();
  const total = data.reduce((acc, row) => acc + row[1], 0);
  const avg = total / data.length;
  return { total, avg };
}

✅ 8. Tips Styling

Jika ingin tampilan lebih cantik:

Tambahkan CSS
Gunakan framework seperti Bootstrap / Tailwind
Pisahkan logic JS agar rapi

Contoh include CSS:


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

✅ 9. Apa yang Sudah Kita Pelajari?

✔ Membaca data dari Google Sheets
✔ Mengirim data ke halaman web
✔ Menampilkan data dalam tabel
✔ Menampilkan grafik interaktif
✔ Menggunakan Google Charts
✔ Deploy sebagai Web App

Kita sekarang bisa membangun dashboard monitoring tanpa server dan tanpa biaya tambahan ✅

🧩 Use Case Lanjut

Beberapa ide pengembangan:
✅ Dashboard penjualan per produk
✅ Monitoring absensi siswa
✅ Stok barang & alert jika minimum
✅ Dashboard survey
✅ Laporan bulanan otomatis

Kita bisa membuat sistem reporting internal yang cukup lengkap dengan biaya nol!

🔜 Seri Selanjutnya

Seri 11 — Database Mini: CRUD (Create, Read, Update, Delete) di Google Sheets

Kita akan membangun form + tabel yang mendukung:
✅ tambah data
✅ lihat data
✅ edit data
✅ hapus data

Kayak aplikasi database beneran!

Delphi Guru

Cari Blog Ini