Documentation Plugins Infinity data source JSON

Visualize JSON with Infinity

Visualize JSON data from your REST APIs using infinity data source plugin

📊 Overview

Give it a try using Grafana Play

With Grafana Play, you can explore and see how it works, learning from practical examples to accelerate your development. This feature can be seen on Infinity plugin JSON demo.

Try it

Select Type of the query to JSON. You can either specify the URL of the JSON API, JSON file or can provide inline CSV.

Using public JSON API endpoints

The following example shows how to fetch data from a publicly accessible JSON API endpoint.

URL : https://jsonplaceholder.typicode.com/users

In the preceding example, the data in the URL is an array, so there is no need to configure any additional fields except the URL in the panel.

Accessing nested properties of JSON data

URL : https://thingspeak.com/channels/38629/feed.json

In the above example, data is in the feeds property, which is specified as root/rows field. However, the plugin still doesn’t recognize the fields or its types. To do so, we’re going to add the columns to make it more meaningful.

We’re adding columns and defining their types as shown below:

JSON Data without time field

URL : https://gist.githubusercontent.com/yesoreyeram/2433ce69862f452b9d0460c947ee191f/raw/f8200a62b68a096792578efd5e3c72fdc5d99d98/population.json

In the example above, we’re visualizing JSON data without time field. Our JSON has only two fields aka country and population, so we asked the plugin to add a dummy time field to the data so that we can visualize them in any of the stock panels in Grafana. If you look closely at the image above, you can see we specified ‘format’ as timeseries.

For reference, JSON data from the URL is provided below:

json Copy

[
  { "country": "india", "population": 300 },
  { "country": "usa", "population": 200 },
  { "country": "uk", "population": 150 },
  { "country": "china", "population": 400 }
]

JSON Inline

Instead of specifying URL, you can hardcode a JSON object. For example, you can specify the JSON as shown in the example below:

json Copy

[
  { "country": "india", "population": 420 },
  { "country": "india", "population": 440 },
  { "country": "usa", "population": 200 },
  { "country": "uk", "population": 150 },
  { "country": "china", "population": 400 }
]

You also need to specify the column names manually for display purposes.

JSONPath in root selector

In the root selector, you can use the selector in JSONPath format.

Example:

json Copy

{
  "customers": [
    { "name": "mary", "age": 22, "gender": "female" },
    { "name": "joseph", "age": 41, "gender": "male" }
  ],
  "premium_customers": [{ "name": "john doe", "age": 21, "gender": "male" }]
}

In the preceding JSON, if $.premium_customers is the root selector then the query returns john doe. If $.* is the root selector, the query returns all the three rows.

UQL Parser

If you are looking for more JSON options like group by, order by, JSONata, field manipulation or similar, then use UQL query. Below you will find a UQL command:

sql Copy

parse-json
| scope "feeds"
| project "ts"=todatetime("created_at"), "Density of Westbound Cars"=tonumber("field1"), "Density of Eastbound Cars"=tonumber("field2")

Backend Parser

If you need advanced options such as alerting/recorded queries, then use backend as the parser.

When using the backend as parsing option, your timestamp fields need to follow the ISO date/time format. Example: 2006-01-02T15:04:05Z07:00. If they’re not in the ISO timestamp format, you can specify the format using the layout option. The layout needs to be in golang time layout spec.

When using the backend parser, you also have an option to summarize the numeric fields into a single aggregated number using Summarize field. Example usage: last(density_of_eastbound_cars) - last(density_of_westbound_cars). You can also use numeric options such as sum,min,max,mean,first and last.