JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Line Chart Example</title>
    <script
      type="text/javascript"
      src="https://www.gstatic.com/charts/loader.js"
    ></script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px"></div>
  </body>
</html>

JavaScript

google.charts.load("current", {
  packages: ["corechart"],
  callback: initGraph,
})

function initGraph() {
  data = new google.visualization.DataTable()
  data.addColumn("datetime", "DateTime")
  data.addColumn("number", "values") // average
  data.addColumn({ id: "i0", type: "number", role: "interval" }) // min
  data.addColumn({ id: "i1", type: "number", role: "interval" }) // max
  jsonData = fetchData()
  data.addRows(jsonData)
  options = {
    title: "Min, Max, and Average Values Over Time",
    intervals: { style: "area" },
    hAxis: {
      title: "Date",
      format: "MMM dd, yyyy",
    },
    vAxis: {
      title: "Values",
    },
    legend: { position: "bottom" },
    explorer: {
      actions: ["dragToZoom", "rightClickToReset"],
      axis: "horizontal",
      keepInBounds: true,
      maxZoomIn: 0.1,
    },
  }

  chart = new google.visualization.LineChart(
    document.getElementById("chart_div"),
  )
  google.visualization.events.addListener(chart, "ready", addZoomListener)
  chart.draw(data, options)
}

function fetchData(
  startDate = "2025-03-01T00:00:00Z",
  endDate = "2025-03-05T00:00:00Z",
) {
  /**
            const url = `data.php?fmt=json&agregate=86400&startdate=${startDate}&enddate=${endDate}`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    const formattedData = [['Date', 'Min', 'Average', 'Max']];
                    data.forEach(item => {
                        formattedData.push([new Date(item[0]), item[1], item[2], item[3]]);
                    });
                    drawChart(formattedData);
                })
                .catch(error => console.error('Error fetching data:', error));
**/

  formattedData = [] // Date, avg, min, max
  formattedData.push([new Date("2025-03-23T23:00:00.000Z"), 10.0, 5, 20.0])
  formattedData.push([new Date("2025-03-24T23:00:00.000Z"), 15.0, 10.0, 30.0])
  formattedData.push([new...