-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
88 lines (76 loc) · 2.89 KB
/
index.html
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
88
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawCharts);
let selectedTimeSpan = '24h'; // Default to 24 hours
function drawCharts() {
drawChart('Temperature', 'chart1_div', selectedTimeSpan);
drawChart('Humidity', 'chart2_div', selectedTimeSpan);
drawChart('AbsoluteHumidity', 'chart3_div', selectedTimeSpan);
}
function calculateShowTextEvery(inputValue) {
const maxLabels = 10;
let showTextEvery = Math.ceil(inputValue / maxLabels);
return showTextEvery;
}
function drawChart(sheetName, elementId, timeSpan) {
google.script.run.withSuccessHandler(function(response) {
var jsonData = response;
var data = new google.visualization.arrayToDataTable(jsonData.chartData);
var numRows = data.getNumberOfRows();
var showTextEvery = calculateShowTextEvery(numRows);
var options = {
title: sheetName,
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 2,
hAxis: {
slantedText: false,
showTextEvery: showTextEvery
},
chartArea: { width: '80%', height: '70%' }
};
var chart = new google.visualization.LineChart(document.getElementById(elementId));
chart.draw(data, options);
}).getChartData(sheetName, timeSpan);
}
// Redraw charts on window resize
window.addEventListener('resize', function() {
drawCharts();
});
// Redraw charts when time span is changed
function onTimeSpanChange(timeSpan) {
selectedTimeSpan = timeSpan;
drawCharts();
}
</script>
</head>
<body>
<select id="timeSpan" onchange="onTimeSpanChange(this.value)">
<option value="24h">Last 24 hours</option>
<option value="7d">Last 7 days</option>
<option value="30d">Last 30 days</option>
<option value="1y">Last year</option>
<option value="ALL">All data</option>
</select>
<div id="chart1_div" style="width: 100%;"></div>
<div id="chart2_div" style="width: 100%;"></div>
<div id="chart3_div" style="width: 100%;"></div>
<script>
const chartDivs = document.querySelectorAll('div[id^="chart"]');
const setChartDivHeight = () => {
const windowHeight = window.innerHeight;
const aspectRatio = 16 / 9;
const chartHeight = Math.floor(window.innerWidth / aspectRatio);
chartDivs.forEach(chartDiv => {
chartDiv.style.height = chartHeight + 'px';
});
};
setChartDivHeight();
window.addEventListener('resize', setChartDivHeight);
</script>
</body>
</html>