Plot mqtt json array data

[natwez22]

• What Grafana version and what operating system are you using?
  Grafana v11.1.0 (5b85c4c2fc) on ubuntu

• What are you trying to acheive?
  I am trying to plot a time series in grafana

• How are you trying to achieve it?
  I am using the mqtt plugin and I receive a json blob over it. The MQTT data source part works correctly and i receive the full json blob every 100ms. I know this is working correctly because i can see it in the table view. The json blob looks like the following

{
	"Sensor1" :
	{
	"TimeStamp" : [1721101998417680896, 1721101998427681024, 1721101998437680896],
 	"Data" : [0.9937232558179053, 0.21759277778284633, 0.55685720586478]
 	}
}

I am receiving these blobs at 100ms and i want to plot all three data points each time i receive it, so far I am only able to plot one set of the 3 data points. I have tried many data conversion schemes but i can’t figure out how to plot a these.

• What happened?
  I can only plot 1 data point, not all three. All three belong to the same plot as well, these are NOT 3 separate plots, but 1 plot with 3 samples of it.

• What did you expect to happen?
  I expect to be able to plot 1 line given 3 data samples of it every 100ms over mqtt receiving a json blob

[ebabeshko]

Example with Infinity and UQL:

parse-json
| scope "Sensor1"
| jsonata "$zip(TimeStamp, Data)"
| project "Time"=unixtime_nanoseconds_todatetime("0"),"Value"="1"

Which datasource are you using to parse JSON?

[natwez22]

I appreciate the help ebabeshko. I am using mqtt as the data source. I have attached a photo of the setup with table view so you can see the data come in.

If a do a transform of extract field (replace fields) i get the following:

I could do another individual extraction on time and data and I can plot 1 point (t1,data1)

however i can’t figure out how to plot the 3 sets of points as one data set. Any advice would greatly be appreciated.

[yosiasz]

does mqqt provide a rest api endpoint? like this

HiveMQ REST API :: HiveMQ Documentation

[natwez22]

@yosiasz
I am using mosquito on my own server as the MQTT broker. From another computer i am sending data over MQTT to the broker. I am not sure if mosquito provides a rest API endpoint. I dont think it does.

[yosiasz]

please post json text not json image?

[natwez22]

@yosiasz
the json blob received over mqtt is in the first post at the top

[yosiasz]

oops, missed it. which visualization do you want to plot this data into?

[natwez22]

@yosiasz
time series is fine, i will be receving data like this at 100ms intervals over MQTT. I need to plot all those points as 1 line or data series if you will.

[natwez22]

@yosiasz
The end goal is the photo below, need to be able to see the data over mqtt in real time. The only thing i have achieved so far is to grab the first pair of data in each query and throw the others away. This is not desired though and I will need to see all the data.

[ebabeshko]

I was able to transform such initial data:

to the following result using 9 transformations:

I don’t like such approach, looks pretty ugly to me Should be an easier way.

[natwez22]

@ebabeshko
Thats a lot of transitions.
This is not exactly what i am looking for. This is one signal that has been sampled three times in time. I need 1 line and all three samples plotted per query.

[yosiasz]

should be easy to do with Business Chart plugin.

return {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['100', '110', '120', '130', '140', '150', '160']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      smooth: true,
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
};

plugin your own data.

read docu

Business Charts | Volkov Labs

[ebabeshko]

Or transform JSON via middleware as grant2 suggested in the other topic:

Show mqtt JSON messages in Grafana

So in my example, I was sending the entire JSON array (just as you posted). That is what shows up in the first Debug node. [image] The object that you want (in your example) is available_percent, which is msg.payload.fields.available_percent, so I put a Change node in there and set the msg.payload to be msg.payload.fields.available_percent: [image] Then it will pass that one object to the MQTT broker (circled in black). You could send other objects as well and regulate the frequency of h…

[yosiasz]

more details to let you parse your data coming from mqqt

[yosiasz]