IoT Guru Cloud - Απλό γράφημα Παράδειγμα: 4 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:34

Το IoT Guru Cloud παρέχει μια δέσμη υπηρεσιών backend μέσω REST API και μπορείτε να ενσωματώσετε αυτές τις κλήσεις REST στην ιστοσελίδα σας εύκολα. Με τα Highcharts, μπορείτε να εμφανίσετε γραφήματα της μέτρησής σας απλά με μια κλήση AJAX.

Βήμα 1: Δημιουργήστε μια σελίδα HTML

Πρέπει να δημιουργήσετε ένα κενό αρχείο HTML με τον αγαπημένο σας επεξεργαστή:

IoT Guru Cloud - Απλό παράδειγμα γραφήματος

Αποθηκεύστε το: simple -chart.html IoT Guru Cloud - Απλό παράδειγμα γραφήματος

Βήμα 2: AJAX Load of Chart Data

Πρέπει να προσθέσετε JQuery και μια κλήση AJAX στο αρχείο HTML, θα φορτώσει τη σειρά δεδομένων του καθορισμένου κόμβου και ονόματος πεδίου: IoT Guru Cloud - Απλό παράδειγμα γραφήματος

IoT Guru Cloud - Απλό παράδειγμα γραφήματος συνάρτηση loadData (target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {return $.ajax ({type: "GET", url: 'https://api.iotguru.cloud/ μέτρηση/φόρτωσηByNodeId/' + nodeId +'/' + fieldName +'/' + κοκκοποίηση, dataType: "json", success: function (data) {displayChart (target, titleText, xAxisText, yAxisText, κοκκοποίηση, δεδομένα);}}); } function displayChart (στόχος, titleText, xAxisText, yAxisText, κοκκοποίηση, δεδομένα) {} $ (έγγραφο). ήδη (λειτουργία () {loadData ('graphAverage', 'Μέση καθυστέρηση των τρένων (24 ώρες)', '' Ημερομηνία και ώρα ',' min ',' ef39d670-70d9-11e9-be02-27e5a8e884a7 ',' μέσο όρο ',' DAY/288 ');}

Βήμα 3: Ρυθμίστε το γράφημα

Προσθέστε το αρχείο JavaScript Highcharts στο αρχείο HTML μετά το αρχείο JQuery:

Συμπληρώστε το σώμα της λειτουργίας displayChart για να ρυθμίσετε το γράφημα:

λειτουργία displayChart (target, titleText, xAxisText, yAxisText, κοκκοποίηση, δεδομένα) {var options = {title: {text: titleText}, γράφημα: {type: 'spline', renderTo: target,}, xAxis: {type: 'datetime ', title: {text: xAxisText}, gridLineWidth: 1, tickInterval: 3600 * 1000}, yAxis: {title: {text: yAxisText}}, σειρά: [{}]}; για (var i = 0; i <data.length; i ++) {options.series = {data: {}, name: {}}; options.series .name = data ["name"]; options.series .data = data ["data"]; } var chart = new Highcharts. Chart (options); }

Βήμα 4: Αυτό είναι! Εγινε

Τελειώσατε, φορτώστε το HTML στο πρόγραμμα περιήγησής σας και ελέγξτε το γράφημα!

Αν θέλετε να στείλετε μετρήσεις, επισκεφθείτε τη σελίδα Εκπαιδευτικών μας ή το Φόρουμ της Κοινότητάς μας!:)

Πλήρες παράδειγμα: GitHub - απλό γράφημα