script.js

document.addEventListener("DOMContentLoaded", function () {
  const fetchDataAndUpdateChartSuhu = () => {
    fetch("./getChartData.php")
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok " + response.statusText);
        }
        return response.json();
      })
      .then((data) => {
        console.log("Data received:", data); // Debugging line
        const time_stamp = data.map((item) => item.time_stamp);
        const temperature = data.map((item) => item.temperature);

        if (chart) {
          chart.updateSeries(
            [
              {
                name: "temperature",
                data: temperature,
              },
            ],
            true
          );

          chart.updateOptions(
            {
              xaxis: {
                categories: time_stamp,
              },
            },
            false,
            true
          );
        } else {
          const options = {
            chart: {
              type: "area",
              height: 350,
              animations: {
                enabled: true,
                easing: "easeinout",
                speed: 800,
                animateGradually: {
                  enabled: true,
                  delay: 150,
                },
                dynamicAnimation: {
                  enabled: true,
                  speed: 350,
                },
              },
            },
            series: [
              {
                name: "temperature",
                data: temperature,
              },
            ],
            xaxis: {
              categories: time_stamp,
            },
          };

          var chart = new ApexCharts(
            document.querySelector("#chart-suhu"),
            options
          );
          chart.render();
        }
      })
      .catch((error) => {
        console.error("Error fetching data:", error); // Debugging line
      });
  };

  const fetchDataAndUpdateChartKelembaban = () => {
    fetch("./getChartData.php")
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok " + response.statusText);
        }
        return response.json();
      })
      .then((data) => {
        console.log("Data received:", data); // Debugging line
        const time_stamp = data.map((item) => item.time_stamp);
        const humidity = data.map((item) => item.humidity);

        if (chart) {
          chart.updateSeries(
            [
              {
                name: "humidity",
                data: humidity,
              },
            ],
            true
          );

          chart.updateOptions(
            {
              xaxis: {
                categories: time_stamp,
              },
            },
            false,
            true
          );
        } else {
          const options = {
            chart: {
              type: "area",
              height: 350,
              animations: {
                enabled: true,
                easing: "easeinout",
                speed: 800,
                animateGradually: {
                  enabled: true,
                  delay: 150,
                },
                dynamicAnimation: {
                  enabled: true,
                  speed: 350,
                },
              },
            },
            series: [
              {
                name: "humidity",
                data: humidity,
              },
            ],
            xaxis: {
              categories: time_stamp,
            },
          };

          var chart = new ApexCharts(
            document.querySelector("#chart-kelembaban"),
            options
          );
          chart.render();
        }
      })
      .catch((error) => {
        console.error("Error fetching data:", error); // Debugging line
      });
  };

  const fetchDataAndUpdateChartCahaya = () => {
    fetch("./getChartData.php")
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok " + response.statusText);
        }
        return response.json();
      })
      .then((data) => {
        console.log("Data received:", data); // Debugging line
        const time_stamp = data.map((item) => item.time_stamp);
        const intensitas = data.map((item) => item.intensitas);

        if (chart) {
          chart.updateSeries(
            [
              {
                name: "intensitas",
                data: intensitas,
              },
            ],
            true
          );

          chart.updateOptions(
            {
              xaxis: {
                categories: time_stamp,
              },
            },
            false,
            true
          );
        } else {
          const options = {
            chart: {
              type: "area",
              height: 350,
              animations: {
                enabled: true,
                easing: "easeinout",
                speed: 800,
                animateGradually: {
                  enabled: true,
                  delay: 150,
                },
                dynamicAnimation: {
                  enabled: true,
                  speed: 350,
                },
              },
            },
            series: [
              {
                name: "intensitas",
                data: intensitas,
              },
            ],
            xaxis: {
              categories: time_stamp,
            },
          };

          var chart = new ApexCharts(
            document.querySelector("#chart-cahaya"),
            options
          );
          chart.render();
        }
      })
      .catch((error) => {
        console.error("Error fetching data:", error); // Debugging line
      });
  };

  const fetchDataAndUpdateChartGas = () => {
    fetch("./getChartData.php")
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok " + response.statusText);
        }
        return response.json();
      })
      .then((data) => {
        console.log("Data received:", data); // Debugging line
        const time_stamp = data.map((item) => item.time_stamp);
        const ammonia = data.map((item) => item.ammonia);

        if (chart) {
          chart.updateSeries(
            [
              {
                name: "ammonia",
                data: ammonia,
              },
            ],
            true
          );

          chart.updateOptions(
            {
              xaxis: {
                categories: time_stamp,
              },
            },
            false,
            true
          );
        } else {
          const options = {
            chart: {
              type: "area",
              height: 350,
              animations: {
                enabled: true,
                easing: "easeinout",
                speed: 800,
                animateGradually: {
                  enabled: true,
                  delay: 150,
                },
                dynamicAnimation: {
                  enabled: true,
                  speed: 350,
                },
              },
            },
            series: [
              {
                name: "ammonia",
                data: ammonia,
              },
            ],
            xaxis: {
              categories: time_stamp,
            },
          };

          var chart = new ApexCharts(
            document.querySelector("#chart-gas"),
            options
          );
          chart.render();
        }
      })
      .catch((error) => {
        console.error("Error fetching data:", error); // Debugging line
      });
  };

  fetchDataAndUpdateChartSuhu();
  setInterval(fetchDataAndUpdateChartSuhu, 7000);
  fetchDataAndUpdateChartKelembaban();
  setInterval(fetchDataAndUpdateChartKelembaban, 7000);
  fetchDataAndUpdateChartCahaya();
  setInterval(fetchDataAndUpdateChartCahaya, 7000);
  fetchDataAndUpdateChartGas();
  setInterval(fetchDataAndUpdateChartGas, 7000);
});