Hello and welcome! My previous video outlined the primary criteria
to remember while choosing between the three most popular JSON API data sources. It was a conceptual video where I walked you
through the diagram. In this video, I will dive right into the
hands-on configuration and go over the steps I made to create these two charts. They look identical. The first is done via the JSON API data source,
and the second is via Infinity. The visualization itself is done with the
help of the fantastic Apache ECharts panel. Are you ready? Let's go! For this first demo, I will use the freshly released
Grafana version 9.3.1 The installation steps are identical for all three plugins. Click the hamburger menu on the left-hand
side, then the 'Administration'->'Plugins' menu, start typing ECharts, click on the plugin's
card, and then the 'Install' button. Go back to the Plugins menu, start typing
'Infinity', click on the plugin's card, and then the 'Install' button. Repeat again. Plugins menu, start typing JSON API, click
on the plugin's card and the 'Install' button. Now, if I create a panel and open the drop-down
with all installed visualizations, I see the Apache ECharts here. However, I do not yet have Infinity or JSON
API in the data sources drop-down. Before I can see them here, I need to add
them as data sources in 'Administration'-> 'Data sources' menu. Click 'Add data source', start typing 'Infinity',
click on the plugin's card. Repeat the same for JSON. Go to the Data Sources menu, the 'Add data
source' button, start typing JSON and click the plugin's card. And now, if I create a panel, I can see the
data sources in the drop-down to choose from. OK, Grafana is all set. The other important component is the data
to display. I chose the Bureau of Labor and Statistics
(bls.gov) since they provide the metric I am interested in today, the unemployment rate. There are many more open data sets out there. You can try data.gov or data.nasa.gov, or
kaggle.com. The list goes on and on. On the bls.gov, I found this 'data tools'
menu and then the 'Public Data API' section. On this page, you can find two options to
request data. Version 1.0 has more restrictions but does
not require registration. For simple experiments, this option is
more than enough. I decided to register to try how version 2.0
works. They asked to provide a company name and my email,
and in a matter of minutes, I received the email with my unique API key. Let me return to this page and go to the 'BLS
API signature' link. Here, they give you instructions on how to
request the data. The basics are you need to use this URL for
all requests with only one mandatory parameter, a series_id. Let me copy this link and add this data series
at the end. That would be the complete address for the
data file. To check that, I paste the link into my browser. Voila, here is the data in JSON format that
bls.gov returns for processing on my side. Let's switch back to Grafana. Open Administration-Data sources. If I open the infinity configuration and click
'Save and test', I see this OK message. That means that for elementary work, there
is no need to change anything in the default settings you got right after the installation. If I open the JSON API and click 'Save and
test', I see this error. One parameter is mandatory for JSON API, It is the URL. I enter the URL I copied from the bls.gov
instruction page with series_id at the end. Then, the 'Save and test' action shows success. That means the data flow. But I want a little more. I want to use multiple series and paraments. That's why I remove the series_id and only
keep the primary link I copied from bls.gov. 'Save and test'. This error is OK. The request attempt failed, but for the apparent
reason that series_id is not specified. I will specify the series_id later on the
panel configuration page. Now I create a new dashboard and save it. Add a new panel—select data source. JSON API to begin with and switch to the table
view to instantly see if the data flows from the source (from the bls.gov). This is some Grafana default data, not yet
what I want. Here is the place to configure your JSON API. Remember the series_id I omitted on the data
source configuration page? Now it is time to specify it on the panel
configuration page. To find the series_id, I go to the bls.gov,
'Data tools' menu, 'Data Finder' section, and start typing 'unemployment' in the search
box. The first link is the national unemployment
rate. Click on it. Scroll down if needed, and here is the series_id. Highlight and copy. Switch back to Grafana and paste it into the
Path parameter with the slash symbol in front. Data is not yet flowing. This is because JSON API expects you to describe
what elements exactly you want from the data source file It is done on the 'Fields' tab. One way to look up the element's names is
to look at the actual file. I take the primary link, add series_id and
open the file in my browser. Copy the content to open it in VS code. I use VS because I like the formatting function
here. Now the data file looks readable and I can
see the structure. Surely, you can look for the metadata on the
website as well. I can see only one series in the data file,
which is expected since I requested one. But there could be multiple series. The name of elements I want to work with are
year, month and value. Switch back to Grafana, 'Field' tab. and start typing the reference instructions. I say to start from the root element - Results,
then the 'Series' element with index 0. Even though I only have one series, there
could be multiple. Then for the series, I want all data elements
and the 'year' for my first field. The second field looks the same, except I
point to periodName, and in the last field, I point to 'value'. With that configuration, here is what the
successful request looks like. I select Apache ECharts in the drop-down to
convert it into nice looking visualization. Now I need to configure the visualization
panel. It is done in a free text format on the right-hand
side, in this Monaco code editor. Logically, the configuration could consist
of two parts - reading the data from Grafana data frames using JavaScript and setting up
the panel parameters in JSON format. I read the data points into arrays using this
JavaScript code. refId is the query's name from the left-hand
side, where I populated year, periodName, and value. The year and periodName need to be combined
into a two-dimensional array since it is the same time metric - month and year. For the visual configuration there is a simple way of doing it. Volkov Labs has created this helpful resource,
echarts.volkovlabs.io. You can find almost all examples published
on the official Apache ECharts demo website in there We adjusted the code for every single one
and made it ready to use in Grafana as is. For my chart example, I open the main menu
and select 'Line' from the list. I wanted the 'Smoothed Line Chart' as my base. So, I went to the 'Edit' mode and copied the
code from here. then I pasted it into my Grafana panel. Switched the 'Table view' toggle Here is the chart in action right away. The code is working as is. I surely want my data points, though. Hence, I used valueA for the data element
in the Series option. Need to reverse for the right order. And month_yearA for the data element of the
xAxis option. Need to reverse as well. I could have called it a day, but I wanted
to spice things up a little bit and emphasize the minimum and maximum values. My steps were:
Go to echarts.volkovlabs.io again. Click 'Examples', and select 'Line' from the
list. Scroll down to the graph 'Temperature Change
in the Coming Week'. It displays what looks very close to my idea. Go to the 'Edit' mode, and discover that the
emphasis is done via markPoint parameter. Copy the inspiration and paste it into my
Grafana. Now I have maximum, and minimum unemployment
rates emphasized. As a final touch, I like to customize colors,
fonts, and sizes. This gives a little hint of sophistication
and taste. One more modification is adding zoom, with
that I can zoom in and out. Beautiful! This is what my dashboard looks like for now. The national unemployment rate from
January 2020 until now. Now let's build the exact same visualization with
Infinity data source. Before I do, I copy the visualization panel
code from the Monaco code editor. I reuse it without any modifications. Add a panel, select the ECharts panel for
visualization and paste the code. The error is expected since I still need to
set up the data source. Switch to the 'table view'. It is the data from Grafana's default data
source. Select the 'Infinity' data source from the
drop-down. Keep the type JSON, there are many more types
to choose from, but this video is about JSON. Leave parser as default. Source URL. Here is where I enter the primary URL I was
given on bls.gov, plus the series_id at the end. Exactly the same as I already used for the
JSON API data source. Open the parsing option parameter and specify
the root element 'Results' and then all elements from the first existing series (which is the
only series in my case so far). That's it. The data flow. Note that I do not need to know the data structure
to read from the file. The data source reads everything and shows
me the headers right here. They are the same as I already have in the
ECharts panel code. Now, if I switch the 'table view', I see the
exact same visualization. Save, apply, and now admire two identical
visualizations created using different data sources. Let's move further and add parameters to my
API request. As bls.gov mentioned on their instruction
page right here, they provide three years of data by default. Let's say I want to expand the default and
start from 2013. Let me open the 'Edit' mode for the JSON API
data source. First things first, on the Path tab, I change
the HTTP request type from GET to POST. I will send my paraments in the request's
body since the body has a more flexible format, What exactly to send you can find on the bls.gov
instruction page. I copy it from here, and paste it into the
body tab. Too many spaces for my taste. Specify the series_id, I can take it from
the Path tab. Remove the second series_id. Change the start year and end year. Here is the place to use my API key. When I send the request with the API key, the
BLS API server recognizes me and lets me through some restrictions that otherwise would have
been off-limits. Switch to the 'table view' to confirm that
I have more years of data on my chart. Hm..Not yet, I need to delete the path parameter. Refresh. And now I do! Switch the 'table view' to confirm the line
on the chart looks different. Yes, it does. So, we just added a custom time range and
an API key to the API request and translated the results using JSON API data source. Now, let's apply the same changes to the panel
with the Infinity data source. I start with coping the body request from
here. Then open the panel in Edit mode. The question now becomes where to insert the
request body. It took me some time to find that place. You need to click this 'Options' right
here. Change the HTTP method to POST, keep the body
type as 'raw', change the body content type to JSON, and paste the body into the body
content. Refresh. Now i should have more years in my chart. And I do not, oh..I as well need to remove the series_id
from the URL. And now I do! Save, apply, and admire. Now I have an unemployment rate from 2013
until now, taken directly from the BLS website. All is great so far. Now let's display multiple series. Let's say I want to compare the national unemployment
rate with Florida's state unemployment rate. To find Florida unemployment series_id, go
to bls.gov Data tools menu -> Data Finder section, start
typing unemployment and click on this link, scroll down if needed. Here it is, the series_id for Florida state
unemployment rate. According to the instruction, you can request
multiple series in the same request. However, data sources expect the same file
length. That means the number of data points across
all series should match. In other words, if one series returns two
data points, for instance, November and December, whereas the other returns only one, December,
then the data source would not automatically translate it into the Grafana data frame. It could do it, but with some extra steps. I do not want to go that far. So, instead, I will do the following. Replicate request A using this little button
here. Request B appears. I replace the national series_id with the
Florida one. Change to the 'Table view'. Below here, I have a drop-down, change to
B to verify the data flow. All is good. In the Echarts code, I will add one more set
of arrays. By the way, I would need them all anyway,
regardless of whether I have one request for two series or a separate request for each
series. So, I need the same steps to read from the
B request. I populate year, periodName, and value. Next, I need a similar mapping to map year
and month values. Then I add another series, copy the existing
one and paste it after the first one. Rename to Florida. Assign element data to valueB. Ok, looking good, except for color. I change it to my favorite red, and ..oh now
the two data series overlap. It is because the requested data has been
cached. So here, I have 5 mins of caching time. I change to 0s in query B and to 0s in query
A. Click the refresh button. Alright, finally, I got what I wanted, the
national and Florida state unemployment rates starting from January 2013. Time to save, apply and admire the results. To replicate two series on the Infinity panel,
I copy the code from the JSON API panel. Then open the panel with Infinity data source
in Edit mode, and paste the code. Duplicate the request A. In there go to the options and replace the
nation series_id with Florida state series_id. That's all for this. Save, apply and now admire two identical charts
with two data series displaying the date from bls.gov. This is all I planned for this video. Now you know how to create these visualizations
on a very detailed level. As always, remember to check the description
box to find the resources I mentioned in this video Share your thoughts on what video I should
create next! Thanks for watching, and see you next time!
