How to :: add sparklines to your charts

Overview

Sparklines are used to represent the trend of a metric with a small line.

They are available for :

  • horizontal barcharts
  • leaderboards centered average
  • scorecards
  • bulletcharts

Sparklines are setup in two steps:

  • define an historical dataset
  • configure the sparkline parameter

Define an historical dataset

For the data in the sparklines to match your labels, Toucan needs to understand the relationship between two datasets:

  • the one from your chart
  • the one from your sparklines

You need to add a history block in your dataset configuration from the code mode.

datasets:
  my_dataset:
    query: [...]
    [...]
    history:
      data:
        query:
          domain: "sparklines-formation"
      joins: [
        "Label"
      ]

In the data attribute, you have to specify the query needed to retrieve the historical data, what data source contains your sparkline values.

Note

All parameters available for querying a dataset are available there: postprocess, multiple_queries,…

joins specifies a list of columns to match dataset rows with their historical ones.

For example, a historical/sparkline dataset could look like:

Date Label Value
05/2019 Telecom 34
06/2019 Telecom 45
07/2019 Telecom 50
05/2019 IT 56
06/2019 IT 43
07/2019 IT 29

and could be joined on the "Label" column with a chart dataset like:

Label Value
Telecom 50
IT 29

Important

Filters can be applied to the history dataset. Make sure to add the column filter’s name in the join parameter.

Set up sparklines in the chart parameters

Switch back to the visual mode of the studio and make sure you are on a compatible chart parameters menu.

Just follow the steps to add your sparklines and make sure to use the preview to test what you’re building!

sparklines