IoT Guru Cloud - Simple Chart Example

621 Views, 0 Favorites, 0 Comments

IoT Guru Cloud - Simple Chart Example

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.

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

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>

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);
}

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/