IoT Guru Cloud - Exemple de graphique simple : 4 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:07

L'IoT Guru Cloud fournit un ensemble de services backend via l'API REST et vous pouvez facilement intégrer ces appels REST à votre page Web. Avec Highcharts, vous pouvez afficher des graphiques de votre mesure simplement avec un appel AJAX.

Étape 1: créer une page HTML

Vous devez créer un fichier HTML vide avec votre éditeur préféré:

IoT Guru Cloud - Exemple de graphique simple

Enregistrez-le: simple-chart.html IoT Guru Cloud - Exemple de graphique simple

Étape 2: Chargement AJAX des données du graphique

Vous devez ajouter JQuery et un appel AJAX au fichier HTML, il chargera la série de données du nœud spécifié et le nom du champ: IoT Guru Cloud - Exemple de graphique simple

IoT Guru Cloud - Exemple de fonction de graphique simple loadData(target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) { return $.ajax({ type: "GET", url: 'https://api.iotguru.cloud/ mesure/loadByNodeId/' + nodeId + '/' + fieldName + '/' + granulation, dataType: "json", success: function (data) { displayChart(target, titleText, xAxisText, yAxisText, granulation, data); } }); } function displayChart(target, titleText, xAxisText, yAxisText, granulation, data) { } $(document).ready(function () { loadData('graphAverage', 'Retard moyen des trains (24 heures)', 'Date et heure ', 'min', 'ef39d670-70d9-11e9-be02-27e5a8e884a7', 'moyenne', 'DAY/288'); }

Étape 3: Configurer le graphique

Ajoutez le fichier JavaScript Highcharts au fichier HTML après le fichier JQuery:

Remplissez le corps de la fonction displayChart pour configurer le graphique:

function displayChart(target, titleText, xAxisText, yAxisText, granulation, data) { var options = { title: { text: titleText }, chart: { type: 'spline', renderTo: target, }, xAxis: { type: 'datetime ', titre: { texte: xAxisText }, gridLineWidth: 1, tickInterval: 3600 * 1000 }, yAxis: { titre: { texte: yAxisText } }, série: [{}] }; for (var i = 0; i < data.length; i++) { options.series = {data: {}, name: {}}; options.series.nom = données["nom"]; options.series.data = data["données"]; } var chart = new Highcharts. Chart(options); }

Étape 4: C'est tout ! Terminé

Vous avez terminé, chargez votre HTML dans votre navigateur et vérifiez le graphique !

Si vous souhaitez envoyer des mesures, veuillez visiter notre page Tutoriels ou notre Forum communautaire !:)

Exemple complet: GitHub - graphique simple