Add sparklines

Sparklines reference

Represent the trend of a metric with a small line

Overview¶

📖 Find tutorial on the sparklines here.

Warning

Only available for:

• horizontal barcharts

• leaderboards centered average

• scorecards

• bulletcharts

Options¶

Available in studio¶

parameters	label	type	optional	description	choices
value		string		Column containing the line value
date		array		Column containing the time dimension
dateFormat	Date display format	string	True	Optional. Use d3 time format (like ‘%Y’ to display just years)
legend		string	True	Type in a legend
commonScatter	Common scale	boolean	True	Use the same scale for all sparklines (y axis)
showMissingValues	Show missing values	boolean	True	Display missing values as blank/white lines. By default missing values are filtered out to display a continuous line
prefix		string	True	Optional. Add a prefix to value display.
forceLexicalOrder	Automatic date ordering	boolean	True	Set to false to force lexical reordering of ordinal dates

Code mode sample¶

charts: [
  [...]
  sparklines:
    orderDates: true
    value: ""
    date: ""
]

How to :: add sparklines to your charts

Overview

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

Tuto :: Sparklines

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 🙏

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

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.