Real-Time Gauge

This is a tutorial about how to show a Hightchart Real-Time Gauge from OGC SensorThing API Datastreams. Please notice that Highchart is free only for Non-commercial uses.

Please include Highcharts in the webpage.

Then, add a div in the webpage. Give it an id and set a specific width and height which will be the width and height of your chart.

Configuration

A chart is initialized by adding the JavaScript tag, '<script> </script>', anywhere in a webpage, containing the following code.

• chart type: Set Type as 'solidguage'.
• pane: This configuration object holds general options for the combined X and Y axes set. Each xAxis or yAxis can reference the pane by index.

Get value from SensorThings

• The div from step 1 is referenced in the constructor.
• Change the ID according to your needs. https://example.sensorup.com/v1.0/Datastreams(ID)

Please refer to the documentation for the SensorUp SensorThings API for more information.