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!