IoT Guru Cloud - Simple Chart Example

About: Cloud services for IoT projects

The IoT Guru Cloud is provides a bunch of backend services through REST API and you can integrate these REST calls to your web page easily. With Highcharts, you can display charts of your measurement simply with an AJAX call.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Create a HTML Page

You need to create an empty HTML file with your favorite editor:

<html>
<head>
<title>IoT Guru Cloud - Simple chart example</title>
</head>
<body>
<div id="graphAverage"> </div>
</body>
</html>

Save it: simple-chart.html
IoT Guru Cloud - Simple chart example

Step 2: AJAX Load of Chart Data

You need to add JQuery and an AJAX call to the HTML file, it will be load the series of data of the specified node and field name:
IoT Guru Cloud - Simple chart example

<html>
<head> <title>IoT Guru Cloud - Simple chart example</title> </head> <body> <div id="graphAverage"/> </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
function loadData(target, titleText, xAxisText, yAxisText, nodeId, fieldName, granulation) {
return $.ajax({ type: "GET", url: 'https://api.iotguru.cloud/measurement/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', 'Average delay of trains (24 hours)', 'Date and time', 'min', 'ef39d670-70d9-11e9-be02-27e5a8e884a7', 'average', 'DAY/288');
}
</script> </body> </html>

Step 3: Set Up the Chart

Add the Highcharts JavaScript file to the HTML file after the JQuery file:

    <script src="https://code.highcharts.com/highcharts.js"></script>

Fill the body of the displayChart function for set up the chart:

function displayChart(target, titleText, xAxisText, yAxisText, granulation, data) {
var options = { title: { text: titleText }, chart: { type: 'spline', renderTo: target, }, xAxis: { type: 'datetime', title: { text: xAxisText }, gridLineWidth: 1, tickInterval: 3600 * 1000 }, yAxis: { title: { text: yAxisText } }, series: [{}] };

for (var i = 0; i < data.length; i++) { options.series[i] = {data: {}, name: {}}; options.series[i].name = data[i]["name"]; options.series[i].data = data[i]["data"]; }

var chart = new Highcharts.Chart(options); }

Step 4: That's It! Done!

You are finished, load your HTML in your browser and check the chart!

If you want to send measurements, please visit our Tutorials page or our Community Forum! :)

Full example: GitHub - simple chart

Check out other examples our GitHub page: https://iotgurulive.github.io/web-api-examples/

Be the First to Share

    Recommendations

    • Made with Math Contest

      Made with Math Contest
    • Multi-Discipline Contest

      Multi-Discipline Contest
    • Robotics Contest

      Robotics Contest

    2 Discussions

    0
    None
    tytower

    27 days ago

    I have always had trouble with charts. When I look in, things on charts never work for me .

    This is the first one that's just worked properly simply by going to the Github page and copying the html page to a new file .html in a text editor and then clicking on the file . Well done . Now maybe I can study that and get some of my own data to graph properly .
    Thanks.

    1 reply
    0
    None
    iotgurulivetytower

    Reply 21 days ago

    Feel free to ask us anything about the service... :)