Grafana with JSON API
Published: 2023-10-27 12:49:07

**Introduction**

Grafana is an open-source, composable observability and data visualization platform. It empowers users to effortlessly query, visualize, alert on, and gain insights from their metrics, regardless of where they are stored.

One of the notable strengths of Grafana is its extensive support for various data sources, including but not limited to Prometheus, Loki, Elasticsearch, InfluxDB, Postgres, and data fetched from APIs. This wide range of compatibility ensures that users can seamlessly integrate their preferred data sources into Grafana.

Grafana is renowned for its visually appealing and informative dashboards, which enable users to visualize metrics, logs, and traces from multiple sources simultaneously. These dashboards can be dynamic and reusable, fostering a collaborative and data-driven culture within teams. Sharing dashboards with other team members is effortless, promoting effective collaboration and knowledge sharing.

Among the key features offered by Grafana are comprehensive data visualization capabilities, customizable dashboards, robust alerting mechanisms, efficient data exploration tools, and the ability to combine data from various sources. These features empower users to gain valuable insights and make informed decisions based on their data.

While there are numerous online resources available discussing the utilization of popular data sources like InfluxDB or Postgres databases, there is a lack of comprehensive guides or informative posts explaining the correct usage of a JSON API. To address this gap, this blog post aims to provide a practical demonstration of effectively utilizing the JSON API Datasource in Grafana. The U.S. BUREAU OF LABOR STATISTICS' Public data source will serve as an illustrative example throughout the post. For more detailed information on the BLS public data API, please refer to the official documentation available at https://www.bls.gov/developers/api_signature_v2.htm.

**JSON API**

The Grafana JSON API is a data source plugin that allows you to query arbitrary JSON endpoints and parse the response into Grafana dataframes. This makes it possible to use Grafana to visualize data from a wide range of sources, including third-party APIs, custom data sources, and even log files. For more detailed information on the JSON API, please refer to the official documentation available at https://grafana.github.io/grafana-json-datasource. 

**Start with Grafana to begin using JSON API Plugin**

To access Grafana, launch your preferred web browser and navigate to the default Grafana port at http://localhost:3000/.

To proceed further, access the Grafana Toggle Menu or Hemberger Menu and locate the connection option. Within the connection section, select the Add New Connection feature. Utilize the search box to locate the JSON API Plugin as demonstrated in the image below, and select it to proceed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0eelw4idxahfz5739bd.png)

Please proceed with the installation of the JSON API Data Source Plugin by clicking on the 'install' button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kuw0dj80e7nz3lliaqpt.png)

After installation, a new option called "Add new data source" will be presented. Simply click on this option to proceed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1o64bvms2ebaqf6byl0m.png)

Provide any text in the name field. I have entered BLSPublicData for Reference. Locate the Url field and insert the following JSON API URL: https://api.bls.gov/publicAPI/v2/timeseries/data/.  (The URL can be found at Shingle Series section of BLS Public Data API https://www.bls.gov/developers/api_signature_v2.htm). Proceed to click on the Save & Test button, as demonstrated in the image provided below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66r8l9r743tddrdxu863.png)

The Save & Test button's execution time may vary depending on the internet connection. After execution, an error will be thrown indicating "JSON API: Method Not Allowed". However, there is no need to be concerned as this error will be rectified once we provide the appropriate Payload to the API at a later stage.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2css3ceqy7m1aniqhx22.png)

Select the option 'Build Dashboard' depicted in the image below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06xdcbuu4utptzfdb3bf.png)

Select BLSPublicData as the data source, resulting in the creation of a fresh panel within a newly generated dashboard, subsequently leading to the navigation into edit mode.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55xwtwhixwc5dtray3tl.png)

This is the appearance of the panel while in edit mode. If you observe any sample data within the panel, Click the refresh button to begin with a clean slate.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bugxd0v7ipn181fxqga.png)

Navigate to the Query Tab and locate the "A" section. Within this section, click on the "Path" tab and insert "/LAUCN040010000000005" as the payload in the GET API.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/be4rjovs2x71dxjz4njv.png)

Please proceed to the "Fields" tab and input "$.Results" as directed. Once you enter, you can begin observing the data in panel view.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw2zg71xhtog1vtg8hm4.png)

To view the data for "year", input "$.Results.series[*].data[*].year" and click enter. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evtrwcuewb8rjshsttxr.png)

For additional data, simply click on the "+" button to add a new field and enter the required details as illustrated in the image below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8rbcn8cse5ymso74fh7.png)

Click on the apply button to display the ultimate outcome in the panel on the dashboard.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1t5ld8e5lsry68yxr32m.png)

**Conclusion**
The JSON API Plugin proves to be an invaluable tool for users who require real-time visualization of server data without the need for local or remote database storage. This ensures that the data retrieved is always current, allowing for further analysis to be conducted based on the latest information to meet any business needs.