How to parse REST API JSON response as time series in Grafana?

Grafana Time Series Panel
,
1

Hi team,

I am relatively new to Grafana and was finding issues while trying to plot the following API response as a “Time Series” chart.

Following is the API response:

{
	"result": {
		"data": {
			"Category1": [
				{
					"eventTime": "2024-08-28T21:25:27.503454Z",
					"value": 1
				},
				{
					"eventTime": "2024-08-29T22:25:27.503454Z",
					"value": 2
				}
			],
			"Category2": [
				{
					"eventTime": "2024-08-30T23:25:27.503454Z",
					"value": 3
				},
				{
					"eventTime": "2024-08-30T23:35:27.503454Z",
					"value": 4
				}
			]
		},
		"limits": {
			"lower": 10,
			"upper": 20
		}
	}
}

I need to plot multiple series lines for category1 and category2. Also, I need to plot the limit lines as horizontal lines in the same plot. I was able to do this using Apache ECharts but I am unable to directly use the “Time Series” option of Grafana. Can someone please help how to parse the above API response using UQL or JSONata?

2

Welcome @sunilratnu to the Grafana forum.

Just to confirm, are you using the Infinity datasource? Here is what I got with your JSON. No need for UQL here.

image
image1530×880 64.9 KB

Here’s the link to the above in Play: Grafana

3

@grant2 Thanks a lot for your quick response and help.
Yes, I am using infinity data source. Categores can be dynamic in the json response. I want to plot multiple series lines for each category. e.g. in the above json response, I want to plot 2 points for category1 and other 2 points for category 2. Also, I want to plot 2 horizontal lines for the limits which are present in the json response. Could you please guide me how can I accomplish these using default parser?

4

Please use the dashboard I created for you and try different things. There is a lot of good documentation on the Infinity datasource that should help you achieve what you are looking for. If you try and try and are still stuck, please post your attempts here and other users may be able to assist.

1 Like
5

Sure. Let me give it a try. Thank you :+1:

6

So, I dug a bit more and figured out that I can use metric to plot each category as a separate time series frame. So, I modified my REST response something like this:

{
“result”: {
“timeSeries”: [
{
“time”: “2024-03-01T00:00:00Z”,
“value”: 10,
“metric”: “Category 1”
},
{
“time”: “2024-03-02T00:01:00Z”,
“value”: 15,
“metric”: “Category 1”
},
{
“time”: “2024-03-03T00:00:00Z”,
“value”: 25,
“metric”: “Category 1”
},
{
“time”: “2024-03-04T00:01:00Z”,
“value”: 35,
“metric”: “Category 1”
},
{
“time”: “2024-03-05T00:00:00Z”,
“value”: 20,
“metric”: “Category 2”
},
{
“time”: “2024-03-06T00:01:00Z”,
“value”: 30,
“metric”: “Category 2”
}
],
“limits”: {
“lower”: 5,
“upper”: 20,
“warning”: 15
}
}
}

I created query A to extract all this time series data and I am able to plot each category as separate lines in the time series plot. But I am unable to plot the horizontal limit lines. Here is what I tried.

I created a query B to extract the limit values using default parser.
$.result.limits
Extracted all the 3 limit values and did following steps.

  1. In the panel’s “Transform” tab, did following steps: a. Added a “New transformation” of type “Add field from calculation” and “Calculation” to “Last” and then set “Alias” to “Lower Limit” d. Did the same for for “Upper Limit” and “Warning Limit”

  2. In the panel visualization options, in the “Overrides” section: a. Added an override for each limit field (Lower Limit, Upper Limit, Warning Limit) b. Added a “Transform” property and set it to “Constant”

Can anyone suggest if I am missing anything here.

7

One way I was able to plot the limit lines was to send them as metric. But that would be very inefficient as I had to add same limit values for all the event times present in the timeSeries response.

e.g. Doing something like this will automatically plot limit lines.

{
“result”: {
“timeSeries”: [
{
“time”: “2024-03-01T00:00:00Z”,
“value”: 10,
“metric”: “Category 1”
},
{
“time”: “2024-03-02T00:01:00Z”,
“value”: 15,
“metric”: “Category 1”
},
{
“time”: “2024-03-03T00:00:00Z”,
“value”: 25,
“metric”: “Category 1”
},
{
“time”: “2024-03-04T00:01:00Z”,
“value”: 35,
“metric”: “Category 1”
},
{
“time”: “2024-03-05T00:00:00Z”,
“value”: 20,
“metric”: “Category 2”
},
{
“time”: “2024-03-06T00:01:00Z”,
“value”: 30,
“metric”: “Category 2”
},
{
“time”: “2024-03-01T00:00:00Z”,
“value”: 10,
“metric”: “lower”
},
{
“time”: “2024-03-02T00:01:00Z”,
“value”: 10,
“metric”: “lower”
},
{
“time”: “2024-03-03T00:00:00Z”,
“value”: 10,
“metric”: “lower”
},
{
“time”: “2024-03-04T00:01:00Z”,
“value”: 10,
“metric”: “lower”
},
{
“time”: “2024-03-05T00:00:00Z”,
“value”: 10,
“metric”: “lower”
},
{
“time”: “2024-03-06T00:01:00Z”,
“value”: 10,
“metric”: “lower”
}
]
}
}

But then I will have to un-necessarily add same lower, upper and warning limit for all the timestamps and append those values in rest response. This will un-necessarily add 3x lines in rest response