x

Sensorthings HcDT makes it easy for you to turn your sensor data into interactive charts.

Showing data in a few lines

Here are some examples of how to start with the SensorThings HcDT.  We always hope to make it easier for developers to learn and use the OGC SensorThings API.

If you need to make a simple chart of your SensorThings but don’t want to spend too much time on the front-end development. You can grab this code and easily make your nice chart via a one line code.

Here, we created a new object “sensorthingsHCDT”, add the SensorThings server URL and either a data stream ID or a list of thing IDs as a JSON object , and then add a chart in the ‘chart-container’ div.

How to Use HcDT: A Step-by-Step Guide

[37:18 – 40:18]

Step 1: Include the library

<script src="http://sdk.sensorup.com/sensorthings-hcdt/v0.1/sensorthings-hcdt.js"></script>

Step 2: Create a new object

Add the SensorThings server URL and either a data stream ID or a list of thing IDs as a JSON object.
var sensorthingsHCDT = new SensorthingsHCDT('http://example.sensorup.com', {
'dataStreamId': [4207] /* or 'thingId':[id_of_a_Thing] */
})

Step 3: Initialize the requests

Load data from the server using a HTTP GET request.
var request = sensorthingsHCDT.request();

Step 4: Add the widget

If the GET request succeeds, choose the widget you would like to use among chart, table, gauge , speedometer, and NVD3 chart.

Step 5: Create a container

Create a container with specific ID for the chart

Parameter

  • sensorthingsHCDT.chart(id, request, temporalFilter, interval);
  • sensorthingsHCDT.table(id, request, temporalFilter);
  • sensorthingsHCDT.gauge(id, request, type, min, max, interval);
  • sensorthingsHCDT.d3chart(id, request)

table

‘id’ the HTML element ID (e.g., div id) to draw the table in.
‘request’ the request object created in the previous step.
‘temporalfilter’ the temporal filtering option to fetch data based on start time and end time as a JSON object, for example {‘startTime’: ‘2015-07-11T11:35:30’, ‘endTime’: ‘2015-07-13T11:42:43’}

chart

‘id’ the HTML element ID (e.g., div id) to draw the chart in.
‘request’ the request object created in the previous step
‘filter’ the temporal filtering option to fetch data based on start time and end time as a JSON object, for example `{‘startTime’: ‘2015-07-11T11:35:30’, ‘endTime’: ‘2015-07-13T11:42:43’}`
‘interval’ the data retrieval frequency in milliseconds. if set, a dynamic chart will be initialized.

gauge

 ‘id’ the HTML element ID (e.g., div id) to draw the gauge in.
‘request’ the request object created in the previous step.
‘type’ the gauge type, either `solid` or `speedometer`.
‘min’ the minimum value shown in the gauge.
‘max’ the maximum value shown in the gauge.
‘interval’ the data retrieval frequency in milliseconds.

d3chart

id’ the HTML element ID (e.g., div id) to draw the chart in.
‘request’ the request object created in the previous step.

Simple Table

Simple Table – Temporal

Simple Chart

Simple Chart – Temporal

Dynamic Chart

Gauge Speedometer

Gauge Solid

NVD3 Chart

Contact us

Thank you for your interest in chart demo. Let’s talk about it!

Your Name (required)

Your Email (required)

Subject

Your Message