<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Line Chart with Time Filter</title>
</head>

<body>

  <div class="container mt-4">
    <div class="row">
      <div class="col-md-6">
        <select id="timeInterval" class="form-control">
          <option value="5">5 Minutes</option>
          <option value="60">1 Hour</option>
          <option value="1440">1 Day</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <canvas id="lineChart"></canvas>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <select id="timeInterval2" class="form-control">
          <option value="5">5 Minutes</option>
          <option value="60">1 Hour</option>
          <option value="1440">1 Day</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <canvas id="lineChart2"></canvas>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>

  <!-- Custom script -->
  <script>
    $(document).ready(function() {
      function generateXLabels(interval) {
        var now = new Date();
        var labels = [];
        for (var i = -6; i <= 0; i++) {
          var date = new Date(now);
          date.setMinutes(now.getMinutes() + i * interval);
          var timeString = ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
          var dateString = ('0' + date.getDate()).slice(-2) + '/' + ('0' + (date.getMonth() + 1)).slice(-2);
          var label = timeString + '\n' + dateString;
          labels.push(label);
        }
        return labels;
      }

      var initialData = {
        labels: generateXLabels(5),
        datasets: [{
          label: '',
          data: [0, 10, 20, 30, 20, 10, 0],
          backgroundColor: 'transparent',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1,
          fill: false
        }]
      };

      var chartOptions = {
        type: 'line',
        data: initialData,
        options: {
          plugins: {
            legend: {
              display: false
            }
          },
          scales: {
            x: {
              display: true,
              grid: {
                display: false
              }
            },
            y: {
              display: true,
              beginAtZero: false,
              ticks: {
                min: -30,
                max: 30,
                stepSize: 10
              }
            }
          },
          elements: {
            point: {
              radius: 0
            }
          }
        }
      };

      var ctx1 = document.getElementById('lineChart').getContext('2d');
      var lineChart1 = new Chart(ctx1, chartOptions);

      var ctx2 = document.getElementById('lineChart2').getContext('2d');
      var lineChart2 = new Chart(ctx2, chartOptions);

      // Event for the first chart
      $('#timeInterval').change(function() {
        var interval = $(this).val();
        var newLabels = generateXLabels(interval);
        var newData = new Array(7).fill(null).map(() => Math.random() * 60 - 30);

        lineChart1.data.labels = newLabels;
        lineChart1.data.datasets[0].data = newData;
        lineChart1.update();
      });

      // Event for the second chart
      $('#timeInterval2').change(function() {
        var interval = $(this).val();
        var newLabels = generateXLabels(interval);
        var newData = new Array(7).fill(null).map(() => Math.random() * 60 - 30);

        lineChart2.data.labels = newLabels;
        lineChart2.data.datasets[0].data = newData;
        lineChart2.update();
      });

      // Trigger initial update for both charts
      $('#timeInterval').change();
      $('#timeInterval2').change();
    });
  </script>
</body>

</html>
