IoT Guru Cloud - Exemplo de gráfico simples: 4 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:37

O IoT Guru Cloud fornece vários serviços de back-end por meio da API REST e você pode integrar essas chamadas REST à sua página da web facilmente. Com Highcharts, você pode exibir gráficos de sua medição simplesmente com uma chamada AJAX.

Etapa 1: Criar uma página HTML

Você precisa criar um arquivo HTML vazio com seu editor favorito:

IoT Guru Cloud - exemplo de gráfico simples

Salve: simple-chart.html IoT Guru Cloud - exemplo de gráfico simples

Etapa 2: Carga AJAX de dados do gráfico

Você precisa adicionar JQuery e uma chamada AJAX ao arquivo HTML, ele carregará a série de dados do nó especificado e o nome do campo: IoT Guru Cloud - Exemplo de gráfico simples

IoT Guru Cloud - função de exemplo de gráfico simples loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ medição / loadByNodeId / '+ nodeId +' / '+ fieldName +' / '+ granulação, dataType: "json", sucesso: função (dados) {displayChart (target, titleText, xAxisText, yAxisText, granulation, data);}}); } function displayChart (target, titleText, xAxisText, yAxisText, granulation, data) {} $ (document).ready (function () {loadData ('graphA average', 'Atraso médio dos trens (24 horas)', 'Data e hora ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' média ',' DIA / 288 ');}

Etapa 3: configurar o gráfico

Adicione o arquivo Highcharts JavaScript ao arquivo HTML após o arquivo JQuery:

Preencha o corpo da função displayChart para configurar o 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}}, série: [{}]}; para (var i = 0; i <data.length; i ++) {options.series = {data: {}, name: {}}; options.series .name = data ["nome"]; options.series .data = data ["data"]; } gráfico var = novo Highcharts. Chart (opções); }

Etapa 4: é isso! Feito

Você acabou, carregue seu HTML no seu navegador e verifique o gráfico!

Se você deseja enviar medições, visite nossa página de Tutoriais ou nosso Fórum da Comunidade!:)

Exemplo completo: GitHub - gráfico simples