blink_time_lapse/chart.html at main · error5/blink_time_lapse · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chart from JSON</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="800" height="400"></canvas>

  <script>
    async function loadAndRenderChart() {
      const response = await fetch('front_garden.json');  // Replace with your actual URL
      const jsonData = await response.json();

      const labels = jsonData.map(entry => entry.iso_time);
      const tempData = jsonData.map(entry => entry.temperature_c);
      const voltsData = jsonData.map(entry => entry.battery_voltage);

      const ctx = document.getElementById('myChart').getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: labels,
          datasets: [
            {
              label: 'Temperature (°C)',
              data: tempData,
              borderColor: 'rgba(255, 99, 132, 1)',
              backgroundColor: 'rgba(255, 99, 132, 0.2)',
              yAxisID: 'y1'
            },
            {
              label: 'Battery Voltage',
              data: voltsData,
              borderColor: 'rgba(54, 162, 235, 1)',
              backgroundColor: 'rgba(54, 162, 235, 0.2)',
              yAxisID: 'y2'
            }
          ]
        },
        options: {
          responsive: true,
          interaction: {
            mode: 'index',
            intersect: false
          },
          stacked: false,
          scales: {
            x: {
              title: {
                display: true,
                text: 'Time'
              },
              ticks: {
                maxRotation: 90,
                minRotation: 45
              }
            },
            y1: {
              type: 'linear',
              position: 'left',
              title: {
                display: true,
                text: 'Temperature (°C)'
              }
            },
            y2: {
              type: 'linear',
              position: 'right',
              title: {
                display: true,
                text: 'Battery Voltage'
              },
              grid: {
                drawOnChartArea: false
              }
            }
          }
        }
      });
    }

    loadAndRenderChart();
  </script>
</body>
</html>