IoT Guru Cloud - Ejemplo de gráfico simple: 4 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42

IoT Guru Cloud proporciona una gran cantidad de servicios de backend a través de la API REST y puede integrar estas llamadas REST a su página web fácilmente. Con Highcharts, puede mostrar gráficos de su medición simplemente con una llamada AJAX.

Paso 1: crea una página HTML

Necesita crear un archivo HTML vacío con su editor favorito:

IoT Guru Cloud: ejemplo de gráfico simple

Guárdelo: simple-chart.html IoT Guru Cloud: ejemplo de gráfico simple

Paso 2: Carga AJAX de datos de gráficos

Debe agregar JQuery y una llamada AJAX al archivo HTML, se cargará la serie de datos del nodo especificado y el nombre del campo: IoT Guru Cloud - Ejemplo de gráfico simple

IoT Guru Cloud: función de ejemplo de gráfico simple loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ medición / loadByNodeId / '+ nodeId +' / '+ fieldName +' / '+ granulación, tipo de datos: "json", éxito: función (datos) {displayChart (objetivo, titleText, xAxisText, yAxisText, granulación, datos);}}); } function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document).ready (function () {loadData ('graphAverage', 'Retraso promedio de los trenes (24 horas)', 'Fecha y hora ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' average ',' DAY / 288 ');}

Paso 3: configurar el gráfico

Agregue el archivo JavaScript Highcharts al archivo HTML después del archivo JQuery:

Llene el cuerpo de la función displayChart para configurar el gráfico:

function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {var options = {title: {text: titleText}, chart: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', título: {texto: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {título: {texto: yAxisText}}, serie: [{}]}; for (var i = 0; i <data.length; i ++) {options.series = {data: {}, name: {}}; options.series .name = data ["nombre"]; options.series .data = data ["data"]; } var chart = new Highcharts. Chart (opciones); }

Paso 4: ¡Eso es! ¡Hecho

¡Ha terminado, cargue su HTML en su navegador y revise el gráfico!

Si desea enviar medidas, visite nuestra página de tutoriales o nuestro foro comunitario.:)

Ejemplo completo: GitHub - gráfico simple