Dashboard Analytics Sederhana

Dashboard analytics adalah fitur penting dalam aplikasi modern, termasuk tools UMKM. Dengan dashboard sederhana, pengguna dapat melihat grafik, ringkasan data, serta statistik bisnis secara cepat dan visual. Artikel ini membahas cara membangun dashboard analytics sederhana menggunakan JavaScript dan Chart.js.

1. Struktur Dasar Dashboard

Struktur sederhana dashboard analytics meliputi:

• Kartu ringkasan (Total Penjualan, Pengunjung, dsb.)
• Grafik garis atau batang
• Update data otomatis

<div class="stats">
  <div class="card">Total Penjualan: <span id="saleCount">0</span></div>
  <div class="card">Total Pengunjung: <span id="visitorCount">0</span></div>
</div>

<canvas id="chart1"></canvas>

2. Menambahkan Chart.js

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

3. Membuat Grafik Penjualan

// dashboard.js
const ctx = document.getElementById("chart1");

new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "Mei"],
    datasets: [{
      label: "Penjualan",
      data: [120, 150, 180, 130, 200],
      borderWidth: 2
    }]
  }
});

4. Statistik Otomatis

document.getElementById("saleCount").innerText = "780";
document.getElementById("visitorCount").innerText = "1500";

5. Update Data Secara Real-time

Bisa menggunakan fetch API dari backend.

async function loadStats() {
  const res = await fetch("/api/stats");
  const data = await res.json();

  document.getElementById("saleCount").innerText = data.sales;
  document.getElementById("visitorCount").innerText = data.visitors;

  chart.data.datasets[0].data = data.chart;
  chart.update();
}

6. Best Practice Dashboard Analytics

• Gunakan warna soft & clean untuk grafik.
• Gunakan data ringkas, tidak terlalu banyak angka.
• Gunakan loading state saat mengambil data API.
• Gunakan layout grid agar rapi di mobile.
• Simpan data lokal sebagai fallback (localStorage).

Dashboard analytics membuat tools Anda terasa profesional, mudah dipahami, dan membantu UMKM mengambil keputusan lebih cepat.