Need help in Realtime configuration for measurement API

[saif.hasn (Saif Hassan)]

What product/components do you use and which version/fix level?

Cumulocity IOT

Are you using a free trial or a product with a customer license?

License

What are trying to achieve? Please describe in detail.

We have added a custom widget to visualize our line chart data. We use c8y measurement API to fetch the data from the device. We are able to graph the data all good but the date value passed on the API is static and need to refresh the page to get the latest value.
I need the c8y Realtime feature to add in my custom widget measurement API so that I have same rate of data update as the “data point graph” widget have in c8y.

Please let me know how I can use the Realtime feature in my graph so that I don’t have to refresh the page for the latest data point.

Do you get any error messages? Please provide a full error message screenshot and log file.

My API -

In this API data is coming every minute.

async ChartData(dateFrom:any,dateTo: any,parameter:any,deviceid:any) {
const options: IFetchOptions = {
method: ‘GET’,
headers: { ‘Content-Type’: ‘appliaction/json’ }
};
const response = await

this.fetchClient.fetch(“/measurement/measurements/series&dateFrom=”+dateFrom+“T00:00:00.001Z&dateTo=”+dateTo+“T23:59:59.001Z&pageSize=1440&revert=true&series=”+parameter+“&source=”+deviceid,options)

return response.json();

}

[Christian_Guether1 (Christian Guether)]

Hi Saif,

you can also use the Realtime service from the @c8y/client package to subscribe for notifications on new measurements for a specific device. It’s the same principle as described in this thread.

For measurements a subscription could look like this:

private subscribeForMeasurements(
    deviceId: string,
    measurementFragment: string,
    measurementSeries: string
  ) {
    this.realtime.subscribe(`/measurements/${deviceId}`, measurementNotification => {
      const measurement: IMeasurement = measurementNotification.data.data;
      if (!measurement || !has(measurement, `${measurementFragment}.${measurementSeries}`)) {
        return;
      }

      const measurementValue: number = get(
        measurement,
        `${measurementFragment}.${measurementSeries}.value`
      );
    });
  }

The channel to subscribe to is called /measurements/. If you want to subscribe to a specific device, you need to provide the device id for the channel. To receive all measurements you can also the wildcard character *. For a device you will receive all measurements it sends. If you want to filter for a specific data point you need provide the fragment and series in the callback (see example above).

In your case, you would first load the historic measurements to draw the initial graph and then subscribe for real-time measurements to get also new measurements for your device.

Best regards
Christian