Project 3: Working with data with correction

What you will learn in this TP

• Retrieve data in JSON format
• Understand the notion of default settings
• Override the default settings
• Configure alignment based on a specific criterion
• Display an image instead of its URL
• Display a gauge instead of its value
• Apply a 'Threshold'
• Apply a 'Value mapping'
• Add a dynamic link
• Rename the columns
• Change the column order
• Hide a column
• Rename the columns

Introduction #

This project aims to teach you how to work with the table visualization and apply various transformations to it: alignment, sorting, images...

INFO: the table visualization behaves like spreadsheets by default — for instance it will always align numbers to the right and text to the left.

To do this, we'll work with this data (See the data) and display it like this in Grafana (See the expected result)

Queries #

What you will learn in this section

• Retrieve data in JSON format

1. Retrieving the data

   You must use the Infinity data source to retrieve data from the repository at: https://github.com/RousselTM/grafana-formation/blob/main/tp/data/projet3.json.

   INFO: to be usable in JSON format, it must be converted to RAW.

   To do this, open the provided URL. On the GitHub page, just click 'Raw' and you'll get a new URL (https://raw.githubusercontent.com/RousselTM/grafana-formation/refs/heads/main/tp/data/projet3.json) in RAW format. This one can be used in Grafana.

   INFO: the procedure may vary depending on the tool: GitLab, Azure DevOps, ...

Visualizations #

What you will learn in this section

• Understand the notion of default settings
• Override the default settings
• Configure alignment based on a specific criterion
• Display an image instead of its URL
• Display a gauge instead of its value
• Apply a 'Threshold'
• Apply a 'Value mapping'
• Add a dynamic link
• Rename the columns

1. Visualization type

   You must choose a visualization that represents the data as a table

   To do this, in the 'Visualization' section choose the 'Table' type, which displays the data as a table

2. Title and description

   You must set the visualization's title to 'My first table' and its description to 'Description of my first table'

   To do this, fill in the 'Title' and 'Description' fields in the 'Visualization' section

3. Alignment

   You must change the default alignment to match the expected result image. All cell content is centered except the 'category' field, which is right-aligned.

   There are several ways to do this, but best practice is to set the default alignment to 'center' and set a specific alignment for 'category'. To do this, in 'Visualization', select 'Center' in the 'Column alignment' option. Then you just need to create an override rule. There's an add button at the bottom of the 'Visualization' section, but in some versions you may find a tab button under 'Overrides'. Click 'Add field override' and follow these steps:

   1. Select 'Fields with name': since we already know the field name.
   2. Select 'category': as requested in the instructions
   3. Click 'Add override property'.
   4. Select 'Column alignment'.
   5. Select 'Right': as requested in the instructions

   INFO: when you override an option, Grafana shows this by adding a colored dot (blue, orange, ...) right after the option's title.

4. Renaming

   You must use the 'Visualization' section to rename the 'category' column to 'Category'.

   INFO: further down we'll see that the same thing can be done another way: with transformations.

   To do this, we'll add a new override rule. Since there's already a rule on this field, we won't add a new rule but will add a new property to the previous alignment rule instead. Click 'Add override property' and follow these steps:

   1. Select 'Standard options > Display name'.
   2. Enter 'Category': as requested in the instructions

5. Links

   Grafana lets you add interactivity to your table with links. You must add a link so that clicking a row leads to the course page. The link must be in the form https://elearning.rousseltm.fr/training_chapter?id=ID, where 'ID' matches the content of the 'id' field.

   To do this, in the same 'Visualization' section, add a link with 'Add link' in the 'Data links and actions' section.

6. The 'Mapping'

   Grafana lets you transform how your data is displayed. You must create a mapping so Grafana turns the text 'true' into 'Yes' and 'false' into 'No'. You must also set 'Yes' values to the color 'purple' and 'No' to transparent. We'll also combine this with an 'override' to make Grafana color the entire row based on the 'certification' column's color.

   To do this, in the same 'Visualization' section, add a link with 'Add value mappings' in the 'Value mappings' section. In the window that opens, add two mappings with these values respectively:
   - true:
   

   • Value: true
   • Display text: Yes
   • Color: purple

   
   - false:
   

   • Value: false
   • Display text: No
   • Color: transparent

7. The 'Threshold'

   Grafana lets you color numbers based on their value. You must add 'Thresholds' so that numbers are colored as follows: red: default, orange: > 50000, yellow: > 700000, green: > 800000.

   To do this, in the same 'Visualization' section, in the 'Thresholds' section, add several 'Thresholds' with 'Base' set to red and each other color set to the requested value

8. Coloring mode

   Grafana lets you color (text or background) a cell or row based on a value. You must ask Grafana to color the row based on the content of 'certification' and apply it to the whole row. As a reminder, in the previous step we already defined two colors, so there's no need to specify them again.

   Since this applies to every column, there's no need to add an 'override' — apply it to the whole table instead. To do this, in the same 'Visualization' section, in 'Cell options', set 'Cell type' to 'Colored background' and enable 'Apply to entire row'

9. Gauge mode

   Grafana lets you display a number as a gauge to visually compare values. You must display the view count (Views column) as a gauge

   This can't be applied generally since it only concerns the 'Views' column. You must add an 'override' on it and set the 'Cell options > Cell type' property to 'Gauge'

Transformations #

What you will learn in this section

• Change the column order
• Hide a column
• Rename the columns

1. The HTTP method

   Depending on the call you want to make, the API documentation will tell you which method to use.

   INFO: by default Infinity sends your requests using the 'GET' method. Can you find the option to change it?

   Right next to the URL field, click the 'HTTP method, Query, Headers' button. Once the window opens, go to the 'Method & Body' tab and set the method that matches the endpoint given in the URL field.

2. Authentication

3. The accept header

   Grafana relies on 'curl' to query your URLs for the Infinity plugin. Depending on the format you want to get back, you need to request it from the API via a header.

   INFO: we invite you to look into the different values, but in our case the key is 'accept' and the value is:

   • JSON: application/json
   • CSV: text/csv

   How do you configure this parameter in Grafana for the Infinity plugin?

   Right next to the URL field, click the 'HTTP method, Query, Headers' button. Once the window opens, go to the 'Headers' tab

Difficulty level : ●●●○○ (3/5)