<!DOCTYPE html>
// Read more: https://vasanza.blogspot.com
<html>
<head>
<title>Visualización de datos en tiempo real</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Visualización de datos en tiempo real</h1>
<canvas id="myChart" width="800" height="400"></canvas>
<button onclick="downloadCSV()">Descargar CSV</button> <!-- Botón para descargar CSV -->
<script>
// Código para acceder a los datos de Google Sheets y mostrarlos en un gráfico
function loadSheetData() {
fetch('https://sheets.googleapis.com/v4/spreadsheets/1K1oKWZeTyB6V7keslEzBkzIy-FDNqqUNyTUn8ZXARfE/values/Sheet1?key=YOUR_API_KEY')
.then(response => response.json())
.then(data => {
// Obtener datos para el gráfico
let timestamps = data.values.slice(1).map(row => row[0]); // Timestamps desde la segunda fila
let temperatures = data.values.slice(1).map(row => parseFloat(row[1])); // Datos de temperatura desde la segunda fila
let humidity = data.values.slice(1).map(row => parseFloat(row[2])); // Datos de humedad desde la segunda fila
let cpuTemp = data.values.slice(1).map(row => parseFloat(row[3])); // Datos de temperatura de CPU desde la segunda fila
// Crear el gráfico utilizando Chart.js
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: timestamps,
datasets: [{
label: 'Temperatura',
data: temperatures,
fill: false,
borderColor: 'rgba(255, 99, 132, 1)',
tension: 0.1
},
{
label: 'Humedad',
data: humidity,
fill: false,
borderColor: 'rgba(54, 162, 235, 1)',
tension: 0.1
},
{
label: 'Temperatura CPU',
data: cpuTemp,
fill: false,
borderColor: 'rgba(75, 192, 192, 1)',
tension: 0.1
}]
},
options: {
scales: {
x: {
display: true,
title: {
display: true,
text: 'Timestamps'
}
},
y: {
beginAtZero: true
}
}
}
});
})
.catch(error => console.error('Error:', error));
}
// Función para convertir datos a formato CSV
function convertToCSV(dataArray) {
let csvContent = "data:text/csv;charset=utf-8,";
dataArray.forEach(function(rowArray) {
let row = rowArray.join(",");
csvContent += row + "\r\n";
});
return csvContent;
}
// Función para descargar el archivo CSV
function downloadCSV() {
fetch('https://sheets.googleapis.com/v4/spreadsheets/1K1oKWZeTyB6V7keslEzBkzIy-FDNqqUNyTUn8ZXARfE/values/Sheet1?key=YOUR_API_KEY')
.then(response => response.json())
.then(data => {
let csvData = data.values; // Obtener los datos completos
// Convertir los datos a formato CSV
let csvContent = convertToCSV(csvData);
// Crear un enlace temporal y simular un clic para descargar el archivo CSV
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "datos.csv");
document.body.appendChild(link); // Agregar el enlace al cuerpo
link.click(); // Simular clic para descargar
})
.catch(error => console.error('Error:', error));
}
loadSheetData(); // Llama a la función para cargar los datos al cargar la página
</script>
</body>
</html>