Membuat Dashboard Admin dengan Google Spreadsheet dan Chart.js — Visualisasi Data Real-time

Dashboard dengan Spreadsheet + Chart.js

Dashboard admin adalah pusat kendali untuk memonitor data bisnis Anda. Dengan menggabungkan Google Spreadsheet (sebagai database) dan Chart.js (library chart JavaScript), Anda bisa membuat dashboard profesional yang menampilkan grafik, statistik, dan metrik secara real-time. Semua gratis dan tanpa server!

Kode Apps Script untuk Data Dashboard

function doGet() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var data = sheet.getDataRange().getValues();
  var headers = data[0];
  
  // Agregasi data untuk chart
  var summary = {
    total: data.length - 1,
    categories: {},
    monthly: {}
  };
  
  for (var i = 1; i < data.length; i++) {
    var kategori = data[i][headers.indexOf("Kategori")];
    var bulan = data[i][headers.indexOf("Bulan")];
    var nilai = data[i][headers.indexOf("Nilai")];
    
    if (kategori) summary.categories[kategori] = (summary.categories[kategori] || 0) + (nilai || 1);
    if (bulan) summary.monthly[bulan] = (summary.monthly[bulan] || 0) + (nilai || 1);
  }
  
  return ContentService.createTextOutput(JSON.stringify(summary))
    .setMimeType(ContentService.MimeType.JSON);
}

HTML Dashboard dengan Chart.js

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    .dashboard {display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px}
    .card {background:white;padding:20px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,0.06)}
    .stat {background:linear-gradient(135deg,#6366f1,#8b5cf6);color:white;padding:20px;border-radius:12px;text-align:center}
    .stat h2 {font-size:2rem;margin:0} .stat p {margin:5px 0 0;opacity:0.9}
    canvas {max-height:300px}
  </style>
</head>
<body>
  <div class="dashboard">
    <div class="stat">
      <h2 id="totalData">0</h2>
      <p>Total Data</p>
    </div>
    <div class="card">
      <h3>Per Kategori</h3>
      <canvas id="categoryChart"></canvas>
    </div>
    <div class="card">
      <h3>Per Bulan</h3>
      <canvas id="monthlyChart"></canvas>
    </div>
    <div class="card">
      <h3>Ringkasan</h3>
      <div id="summary"></div>
    </div>
  </div>
  <script>
    fetch('URL_APP_SCRIPT')
      .then(r => r.json())
      .then(data => {
        document.getElementById('totalData').textContent = data.total;
        
        new Chart(document.getElementById('categoryChart'), {
          type: 'doughnut',
          data: {
            labels: Object.keys(data.categories),
            datasets: [{
              data: Object.values(data.categories),
              backgroundColor: ['#6366f1','#ec4899','#f59e0b','#10b981','#3b82f6']
            }]
          }
        });
        
        new Chart(document.getElementById('monthlyChart'), {
          type: 'bar',
          data: {
            labels: Object.keys(data.monthly),
            datasets: [{
              label: 'Nilai',
              data: Object.values(data.monthly),
              backgroundColor: '#6366f1'
            }]
          }
        });
      });
  </script>
</body>
</html>

Kesimpulan

Dashboard dengan Google Spreadsheet dan Chart.js memberikan visualisasi data yang powerful tanpa perlu backend server. Spreadsheet sebagai database memudahkan update data — cukup edit spreadsheet, dashboard otomatis berubah. Cocok untuk monitoring penjualan, laporan keuangan, tracking proyek, dan analytics sederhana.

Tutorial Dashboard Chart.js & Google Spreadsheet — Web App Builder Collection