I was able to make some progress but I got stuck when I wanted to reflect the temperature data of the device in the widget historically. I will show you 3 widgets, the first one is with the simulated data and how Highcharts shows it, the second one is modified and designed to see how the temperature would look historically, and finally there is the widget that includes the code that I show below, which should filter the “temperature” data and display it.
Below I leave you the code that I made in the last widget, which should show the temperature historically:
<head>
<meta charset\="UTF-8" />
<meta name\="viewport" content\="width=device-width, initial-scale=1.0" />
<title\>Highcharts with Real Temperature Data</title\>
<script src\="[https://code.highcharts.com/highcharts.js"](https://code.highcharts.com/highcharts.js")\></script\>
<script
type\="text/javascript"
src\="[https://admin.tago.io/dist/custom-widget.min.js"](https://admin.tago.io/dist/custom-widget.min.js")
></script\>
</head>
<body>
<div id\="container" style\="width:100%; height:400px;"\></div\>
<script\>
// Función para renderizar el gráfico
function renderChart(categories, data) {
Highcharts.chart('container', {
title: {
text: 'Temperature Data Over Time',
},
xAxis: {
title: {
text: 'Time',
},
categories: categories, // Fechas de los datos
},
yAxis: {
title: {
text: 'Temperature (°C)',
},
},
series: \[
{
name: 'Temperature',
data: data, // Datos de temperatura
color: '#ff0000',
},
\],
});
}
// Inicialización del widget en TagoIO
window.TagoIO.onStart(async (widget) \=> {
// Obtener los datos de temperatura del dispositivo
const temperatureData \= widget.data.filter(
(item) \=> item.variable \=== 'temperature'
);
// Procesar los datos para el gráfico
const categories \= temperatureData.map((item) \=> item.time); // Fechas
const data \= temperatureData.map((item) \=> item.value); // Valores de temperatura
// Renderizar el gráfico con los datos obtenidos
renderChart(categories, data);
});
window.TagoIO.ready(); // Indicar que el widget está listo
</script\>
You can make a few small changes to achieve the desired functionality with your custom widget. First, use `onRealtime`, which is the proper method in the `window.TagoIO` to grab the widget’s real-time data. Then, modify the way you are collecting `temperatureData`. Change the structure from this**:**
I'm confident that these changes will make your widget work correctly. Additionally, I recommend using `console.log` for debugging. If you upload the custom widget files to TagoIO, you will be able to view the console logs by using your browser's developer mode in the TagoIO Admin. The full code is available right below:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Highcharts with Real Temperature Data</title> <script src="https://code.highcharts.com/highcharts.js"></script> <script type="text/javascript" src="https://admin.tago.io/dist/custom-widget.min.js" ></script> </head> <body> <div id="container" style="width: 100%; height: 400px"></div> <script> // Función para renderizar el gráfico function renderChart(categories, data) { Highcharts.chart("container", { title: { text: "Temperature Data Over Time", }, xAxis: { title: { text: "Time", }, categories: categories, // Fechas de los datos }, yAxis: { title: { text: "Temperature (°C)", }, }, series: [ { name: "Temperature", data: data, // Datos de temperatura color: "#ff0000", }, ], }); } // Inicialización del widget en TagoIO window.TagoIO.onRealtime(async (widgetData) => { // Obtener los datos de temperatura del dispositivo const temperatureData = widgetData .find((item) => item.data.variables.includes("temperature")) .result.filter((e) => e.variable === "temperature"); // Procesar los datos para el gráfico const categories = temperatureData.map((item) => item.time); // Fechas const data = temperatureData.map((item) => item.value); // Valores de temperatura // Renderizar el gráfico con los datos obtenidos renderChart(categories, data); }); window.TagoIO.ready(); // Indicar que el widget está listo </script> </body></html>
I have been reviewing and using the new implementation that you requested.
I uploaded the html file, then copied its URL, pasted it into the custom widget and also added the device with its “temperature” variable.
When I save it, it still remains in data and does not show me the historical temperature data for this device.
zsu[@user:10054419290]zsu try to `console.log` the `widgetData` inside the `onRealtime` method. Open the browser developer mode, and check how you are receiving this data. If necessary, send me a screenshot of this screen.
<meta charset\="UTF-8" />
<meta name\="viewport" content\="width=device-width, initial-scale=1.0" />
<title\>Highcharts with Real Temperature Data</title\>
<script src\="[https://code.highcharts.com/highcharts.js"](https://code.highcharts.com/highcharts.js")\></script\>
<script
type\="text/javascript"
src\="[https://admin.tago.io/dist/custom-widget.min.js"](https://admin.tago.io/dist/custom-widget.min.js")
></script\>
</head>
<body>
<div id\="container" style\="width: 100%; height: 400px"\></div\>
<script\>
// Función para renderizar el gráfico
function renderChart(categories, data) {
Highcharts.chart("container", {
title: {
text: "Temperature Data Over Time",
},
xAxis: {
title: {
text: "Time",
},
categories: categories, // Fechas de los datos
},
yAxis: {
title: {
text: "Temperature (°C)",
},
},
series: \[
{
name: "Temperature",
data: data, // Datos de temperatura
color: "#ff0000",
},
\],
});
}
// Inicialización del widget en TagoIO
console.log("Widget inicializado. Esperando datos...");
window.TagoIO.onRealtime(async (widgetData) \=> {
console.log("Datos recibidos de widgetData:", widgetData);
// Obtener los datos de temperatura del dispositivo
const temperatureData \= widgetData
.find((item) \=> item.data.variables.includes("temperature"))
.result.filter((e) \=> e.variable \=== "temperature");
// Procesar los datos para el gráfico
const categories \= temperatureData.map((item) \=> item.time); // Fechas
const data \= temperatureData.map((item) \=> item.value); // Valores de temperatura
// Renderizar el gráfico con los datos obtenidos
renderChart(categories, data);
});
window.TagoIO.ready(); // Indicar que el widget está listo
</script\>
In your `console.log`, I noticed the presence of `l****ocalhost`. Can you explain what local server you are running? Please compare my screenshot with yours. Although the code you provided is the same, I am trying to understand what might be different in your environment that could be causing the discrepancy in results.
