Gold Price Chart Pegadaian

by oktaviardi pratama

HTML

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

<div class="wrap">
  <h2>📈 Grafik Harga Emas Pegadaian</h2>

  <canvas id="chartJual"></canvas>
  <canvas id="chartBeli"></canvas>
</div>

CSS

body {
      font-family: Arial;
      background: #f5f5f5;
      padding: 20px;
    }
    .wrap {
      max-width: 1000px;
      margin: auto;
    }
    canvas {
      background: white;
      padding: 20px;
      border-radius: 12px;
      margin-bottom: 30px;
    }

JavaScript

const API = "https://pegadaian.co.id/gold/prices/chart";

  // timestamp dynamic biar selalu valid
  const timestamp = new Date().toISOString();

  async function fetchData() {
    const url = `${API}?timestamp=${encodeURIComponent(timestamp)}`;

    const res = await fetch(url, {
      method: "GET",
      headers: {
        "accept": "application/json"
      }
    });

    if (!res.ok) throw new Error("Gagal fetch API");

    return res.json();
  }

  function mapData(priceList) {
    return priceList
      .slice()
      .reverse()
      .map(i => ({
        date: i.lastUpdate.split(" ")[0],
        price: Number(i.harga)
      }));
  }

  function createChart(id, label, data, color) {
    new Chart(document.getElementById(id), {
      type: "line",
      data: {
        labels: data.map(d => d.date),
        datasets: [{
          label,
          data: data.map(d => d.price),
          borderColor: color,
          tension: 0.3
        }]
      },
      options: {
        responsive: true,
        plugins: {
          title: {
            display: true,
            text: label
          }
        }
      }
    });
  }

  async function init() {
    try {
      const json = await fetchData();

      const grafik = json.data.allGrafik;

      const jual30 = grafik.find(i => i.tipe === "jual" && i.timeInterval === 30);
      const beli30 = grafik.find(i => i.tipe === "beli" && i.timeInterval === 30);

      const jual = mapData(jual30.jsonFluktuasi.priceList);
      const beli = mapData(beli30.jsonFluktuasi.priceList);

      createChart("chartJual", "Harga Jual (30 Hari)", jual, "red");
      createChart("chartBeli", "Harga Beli (30 Hari)", beli, "green");

    } catch (err) {
      console.error(err);
      alert("Gagal load data (kemungkinan CORS diblokir)");
    }
  }

  init();