How to :: add sparklines to your charts

Overview

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

Warning

This option requires to use the code mode for the step 2. Don’t worry, just follow this tutorial and you’ll have your sparklines setup in no time 🙏

Note

Follow along this tutorial with the Story Tuto :: Sparklines in the Advanced Stories of your Demo App.

Step 1 : Build you chart

To add sparklines in a story, first you should… build a story.

Sparklines are an option available for the following charts :

  • leaderboards (horizontal barcharts)
  • leaderboards centered average
  • scorecards
  • bulletcharts

Use the Studio to select your dataset and create one of the chart listed above. Easy ! 🧸

Find here the datasets we used to build our leaderboard in our example.

In our example, our leaderboard dataset (tuto_sparlkines_leaderboard) looks like this :

Product evolution value pack
Product 1 0.7 71.69397184 group1
Product 2 0 85.69342131 group1
Product 3 1.8 73.15038154 group2
Product 4 2.2 29.78448854 group2
Product 5 -0.3 7.116178841 group2

Step 2 : Define an historical dataset

Warning

This option is only available in code mode for now.

To create sparklines, you need to create a relationship between two datasets:

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

To which bars of the leaderboard my sparklines data go to? We call this parameter history.

For example, a historical/sparklines dataset (tuto_sparlkines) could look like in our example:

date Product value
1/1/20 Product 1 77.3
1/2/20 Product 1 78.5
1/3/20 Product 1 79.3
1/1/20 Product 2 87.4
1/2/20 Product 2 86.2
1/3/20 Product 2 84.5

and remember, our leaderboard dataset (tuto_sparlkines_leaderboard) looks like this :

Product evolution value pack
Product 1 0.7 71.69397184 group1
Product 2 0 85.69342131 group1
Product 3 1.8 73.15038154 group2
Product 4 2.2 29.78448854 group2
Product 5 -0.3 7.116178841 group2

Switch to code mode

From the Story level, switch to code mode.

Find the dataset parameter

In code mode you see the code version of everything you do in the Studio.

You’ll find a datasets block of code. This is where we define what data we used to build the leaderboard.

Define an historical dataset

Now we are going to define another dataset that contains your sparklines data and how it’s link to our leaderboard data.

You need to add a history block in your dataset configuration.

datasets:
  my_dataset:
    query: [...]
    pipeline: [...]
    history:

In the data attribute, you have to specify the query needed to retrieve the historical data, what data source contains your sparklines values. In our example, the domain is the tuto_sparklines dataset.

datasets:
  my_dataset:
    query: [...]
    pipeline: [...]
    history:
      data:
        query:
          domain: "tuto_sparklines"

Note

All parameters available for querying a dataset are available there: postprocess, multiple_queries,… NB: If you want to retrieve an existing dataset to use it as a sparkline, then you need to copy your dataset’s query and paste it on the history >> data >> query block.

joins specifies a list of columns to match dataset rows with their historical ones. So on which column you can do the match between your 2 datasets.

Both datasets must have the same columns header and same values (case sensitive) for the joins to work.

datasets:
  my_dataset:
    query: [...]
    pipeline: [...]
    history:
      data:
        query:
          domain: "tuto_sparklines"
      joins: [
        "Product"
      ]

Important

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

In our example both datasets tuto_sparklines and tuto_sparklines_leaderboard have the same Product column. This allows the matching of the sparklines data and the leaderboard bars.

Step 3 : Activate sparklines in your chart

Switch back to the visual mode of the Studio and edit your Chart.

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