GPU scrollable chart

scrollablechart.js

<script>
  // API Base URL
  const apiUrl = "https://localhost/api/gpu-frequency";

  // Chart instance and data storage
  let gpuChart;
  let chartData = { timestamps: [], frequencies: [] }; // To store fetched data
  let isFetching = false; // Prevent multiple simultaneous fetches

  // Fetch data for a specific time range
  async function fetchGpuData(start, end) {
    try {
      isFetching = true;
      const response = await fetch(`${apiUrl}?start=${start}&end=${end}`);
      const data = await response.json();

      // Assuming the response is in the form:
      // { "timestamps": ["2024-11-18T10:00:00Z", "2024-11-18T10:01:00Z"], "frequencies": [1500, 2500] }
      chartData.timestamps.push(...data.timestamps);
      chartData.frequencies.push(...data.frequencies);

      updateChart(data.timestamps, data.frequencies);
    } catch (error) {
      console.error("Error fetching GPU data:", error);
    } finally {
      isFetching = false;
    }
  }

  // Update chart dynamically
  function updateChart(newTimestamps, newFrequencies) {
    gpuChart.data.labels.push(...newTimestamps);
    gpuChart.data.datasets[0].data.push(...newFrequencies);
    gpuChart.update();
  }

  // Initialize Chart
  function initializeChart() {
    const ctx = document.getElementById("gpuChart").getContext("2d");

    gpuChart = new Chart(ctx, {
      type: "line",
      data: {
        labels: [], // Initially empty
        datasets: [{
          label: "GPU Frequency (MHz)",
          data: [], // Initially empty
          fill: true,
        }],
      },
      options: {
        responsive: true,
        scales: {
          x: {
            type: "time",
            time: {
              unit: "minute",
              tooltipFormat: "YYYY-MM-DD HH:mm:ss",
            },
            title: {
              display: true,
              text: "Timestamp",
            },
          },
          y: {
            title: {
              display: true,
              text: "Frequency (MHz)",
            },
            beginAtZero: false,
          },
        },
        plugins: {
          zoom: {
            pan: {
              enabled: true,
              mode: "x",
              onPan: handlePan, // Trigger function on panning
            },
          },
        },
      },
    });
  }

  // Handle pan event for pagination
  function handlePan({ chart }) {
    if (isFetching) return; // Prevent multiple fetches

    const xScale = chart.scales.x;
    const start = xScale.min; // Earliest visible timestamp
    const end = xScale.max; // Latest visible timestamp

    // Fetch more data if near edges (e.g., within 10% of the range)
    // TODO: const buffer = (end - start) * 0.1; // 10% of the visible range

    // Fetch previous data if panning left
    if (xScale.min <= chartData.timestamps[0] && !isFetching) {
      // TODO: const newStart = new Date(chartData.timestamps[0]).toISOString();
      // TODO: const newEnd = new Date(new Date(newStart).getTime() - buffer).toISOString();
      fetchGpuData(newEnd, newStart);
    }

    // Fetch next data if panning right
    if (xScale.max >= chartData.timestamps[chartData.timestamps.length - 1] && !isFetching) {
      // TODO: const newEnd = new Date(chartData.timestamps[chartData.timestamps.length - 1]).toISOString();
      // TODO: const newStart = new Date(new Date(newEnd).getTime() + buffer).toISOString();
      fetchGpuData(newStart, newEnd);
    }
  }

  // Initialize and fetch initial data
  initializeChart();
  fetchGpuData("2024-11-18T10:00:00Z", "2024-11-18T10:10:00Z"); // Initial range
</script>