Leaderboard Tutorials

Step by step tutorial

The user story

I’m a local manager in a national retail company. This year, my revenue has increased by 20%! 💸 Are all of my products concerned about this amazing growth? Is there some specific product categories to focus on?

What are my top/flop 20 selling products? Between all of my products, is there some specific product category that stands out?

As I’m looking for the top N elements from a category, let’s do a leaderboard.

Warning

Before you start!

Make sure you added your datasource to your application. Once you’re done create a new story.

Pick some data

To create a nice leaderboard, it’s very easy! All we need are two columns: label and value.

  • a label column: this will define the name of each of the bars you want to display
  • a value column: this will define the bar value

Many other options are available if you want to add some extra value to your viz. Here are some examples of how you can make it shine:

  • an evolution column: this will define an additional value to display on the right side of each bar
  • a pack column: this will define the way bars will be displayed in « packs », which means they belong to a common category
  • an average column: this will define an average value that can help compare some specific performance to the overall average

You can find out more about these different options here 👈.

If you don’t have any data to use, feel free to use our amazing fake data generator Design First!, which is also available in beta mode in the studio.

Chart Parameters

Once I have gathered the data I need, I can choose to configure a leaderboard.

I just need to fill the label and value fields, and that’s it! ✨

leaderboard parameters

Add a variation

You can use a variation column to add some evolutions to your bars: are your top performers forever the bests, or are they new comers? 🤔

To make the ↗️ appear, go the chart parameters menu and I add the optional parameter variation to your configuration.

leaderboard evolution

Sort descending to get the best values first

You can use the sort optional parameter to get the top / flop results within your dataset: using desc will make the top players pop first, and use asc to look for the ones that need to improve.

leaderboard sort

Other configuration examples

Warning

These examples are from the code mode. ⚠️ the chartOptions & data are deprecated, make sure to use de datasets/charts configuration.

Ex1: Horizontal Barchart Simple

Data structure

name of the domain : time_country

country pack gross
Canada immortel 10
France immortel 40
Japan immortel 324
Mexico immortel 3
UK immortel 92
USA immortel 79
Greece immortel 4
South Korea immortel 0

Configuration

{
  level: 3
  title: "Horizontalbarchart simple"
  id: 9001
  parent_id: 90

  datasets:
    my_dataset:
      query:
        domain: "time_country"

  charts: [
    chartType: "horizontal-barchart"
    dataset: "my_dataset"
    label: "country"
    value: "gross"
  ]
}

Ex2: Horizontalbar ordered with units

Image of chart

Image of chart

Data structure

name of the domain : time_country

Country pack Gross
Canada immortel 9.6108855
France immortel 40.0879785
Japan immortel 323.50554
Mexico immortel 3.10526
UK immortel 91.5875932
USA immortel 78.543564
Greece immortel 3.707794
South Korea immortel 0.4011455

Configuration

{
  level: 3
  title: "Horizontalbarchart simple ordered"
  id: 9002
  parent_id: 90

  datasets:
    my_dataset:
      query:
        domain: "time_country"
      units:
        gross: ' m$'
      precision:
        gross: '.1f'

  charts: [
    chartType: "horizontal-barchart"
    dataset: "my_dataset"
    label: "country"
    value: "gross"

    sort: "desc"
  ]
}

To sort the horizontal-barchart, just add the sort block and tell if it is ascendant (asc) or descendant (desc).

The Numbers in the value are too big so we want to adjust them. As you can see, we add a precision block in the dataset regarding the value in the “gross” collumn. We also add a small unit block in the dataset definition to put a unit a the end of the value.

On both subjects, there is more about them in the documentation “precision & unit”.

Ex3: Horizontalbar with variation

A leaderboard with variations

A leaderboard with variations

Data structure

name of the domain : time_country

country pack gross gross_variation
Canada immortel 9.6108855 0.18411480279960515
France immortel 40.0879785 4.616564398102196
Japan immortel 323.50554 2.940738631808193
Mexico immortel 3.10526 0.48366272766197
UK immortel 91.5875932 2.503365780463479
USA immortel 78.543564 1.053107378593496
Greece immortel 3.707794  
South Korea immortel 0.4011455  

Configuration

{
  level: 3
  title: 'Horizontalbar with variation'
  id: 9003
  parent_id: 90

  datasets:
    my_dataset:
      query:
        domain: "time_country"
      units:
        gross: " m$"
        gross_variation: ""
      precision:
        gross: ".1f"
        gross_variation: ".1%"

  charts: [
    chartType: "horizontal-barchart"
    dataset: "my_dataset"

    label: "country"
    value: "gross"

    variation: "gross_variation"

    sort: "desc"
  ]
}

By simply adding the line variation: "gross_variation", we add the variation value at the end of each bar. Also, we can add a precision and a unit to this new column in their respectives blocks.

Ex4: Horizontalbar with average

A leaderboard with an average bar

A leaderboard with an average bar

Data structure

name of the domain : time_country

country gross gross_variation
Canada 9.6108855 0.18411480279960515
France 40.0879785 4.616564398102196
Japan 323.50554 2.940738631808193
Mexico 3.105269 0.48366272766197
UK 91.5875932 2.503365780463479
USA 78.543564 1.053107378593496
Greece 3.707794  
South Korea 0.4011455  

name of the domain : time_country_average

country gross
average 80

Configuration

{
  level: 3
  title: 'Horizontalbar with average'
  id: 9004
  parent_id: 90

  datasets:
    my_dataset:
      query:
        domain: 'time_country'
      units:
        gross: ' m$'
        gross_variation: ''
      precision:
        gross: '.1f'
        gross_variation: '.1%'
      average: # This is a new block in the dataset...
        data:
          query:
            domain: 'time_country_average'

  charts: [
    chartType: 'horizontal-barchart'
    dataset: 'my_dataset'

    label: 'country'
    value: 'gross'
    variation: 'gross_variation'

    sort: 'desc'

    average: # ...and a new block in the chart
      value: 'gross'
  ]
}

We add an average block in the dataset definition, with a query. This will fetch some data and add it to the original dataset as meta-data.

In the charts block, we can then declare another average block, saying that we want to display the average newly added to the data. In this block, we need the column in which resides the value of this average.

Ex4 - bis: Horizontalbar with average and filters

A leaderboard with an average bar

A leaderboard with an average bar

Data structure

name of the domain : time_country_filters

country gross gross_variation currency
Canada 9.6108855 0.18411480279960515 $
France 40.0879785 4.616564398102196 $
Japan 323.50554 2.940738631808193 $
Mexico 3.105269 0.48366272766197 $
UK 91.5875932 2.503365780463479 $
USA 78.543564 1.053107378593496 $
Greece 3.707794   $
South Korea 0.4011455   $
Canada 8.6108855 0.18411480279960515
France 39.0879785 4.616564398102196
Japan 305.50554 2.940738631808193
Mexico 2.105269 0.48366272766197
UK 87.5875932 2.503365780463479
USA 75.543564 1.053107378593496
Greece 2.707794  
South Korea 0.3011455  

name of the domain : time_country_average_filters

country gross currency
average 80 $
average 75

Configuration

{
  level: 3
  title: 'Horizontalbar with average'
  id: 9004
  parent_id: 90

  filters: # THIS IS NEW!
    'bottom-right':
      on: 'currency'
      type: 'buttons'

  datasets:
    my_dataset:
      query:
        domain: 'time_country'
      units:
        gross: ' m$'
        gross_variation: ''
      precision:
        gross: '.1f'
        gross_variation: '.1%'
      average:
        data:
          query:
            domain: 'time_country_average'
        joins: ['currency'] # THIS IS NEW! WE SPECIFY HOW TO LINK THE AVERAGE WITH THE MAIN DATASET

  charts: [
    chartType: 'horizontal-barchart'
    dataset: 'my_dataset'

    label: 'country'
    value: 'gross'
    variation: 'gross_variation'

    sort: 'desc'

    average:
      value: 'gross'
  ]
}

We add joins: [] declaration in the dataset’s average block. If we had 3 filters on columns filterA, filterB and filter C we would have written:

joins: ["filterA", "filterB", "filter C"]

Ex5: Horizontalbar with filters

Filters on a leaderboard

Filters on a leaderboard

Data structure

name of the domain : time_country

country gross gross_variation title_year
Canada 9.6108855 0.18411480279960515 2015
France 40.0879785 4.616564398102196 2016
Japan 323.50554 2.940738631808193 2015
Mexico 3.10526 0.48366272766197 2016
UK 91.5875932 2.503365780463479 2015
USA 78.543564 1.053107378593496 2016
Greece 3.707794   2015
South Korea 0.4011455   2016
Canada 9.6108855 0.18411480279960515 2015
France 40.0879785 4.616564398102196 2016
Japan 323.50554 2.940738631808193 2015
Mexico 3.105269 0.48366272766197 2016
UK 91.5875932 2.503365780463479 2015
USA 78.543564 1.053107378593496 2016
Greece 3.707794   2015
South Korea 0.4011455   2016

Configuration

{
  level: 3
  title: 'Horizontalbar with filters'
  id: 9005
  parent_id: 90

  datasets:
    my_dataset:
      query:
        domain: 'time_country'
      units:
        gross: ' m$'
        gross_variation: ''
      precision:
        gross: '.1f'
        gross_variation: '.1%'
      average:
        data:
          query:
            domain: 'time_country_average'
        joins: ['currency'] # THIS IS NEW! WE SPECIFY HOW TO LINK THE AVERAGE WITH THE MAIN DATASET

  charts: [
    chartType: 'horizontal-barchart'
    dataset: 'my_dataset'

    label: 'country'
    value: 'gross'
    variation: 'gross_variation'

    sort: 'desc'

    average:
      value: 'gross'

    filters:
      'upper-middle':
        on: 'title_year'
        type: 'buttons'
  ]
}

On this exemple, we simply add a filters block inside the chart block. Aviailable positions of filters inside this chart are upper-middle and upper-right.

Get more info about filters options in the filters documentation.

Ex6: Horizontalbar With groups

Data structure

title_year country variable value
2015 Canada profitability 6.141235764705883
2016 Canada profitability 1.575555
2015 France profitability 0.24414739456419865
2016 France profitability 4.716232764705882
2016 Japan profitability 4.3134072
2016 Mexico profitability 1.0350896666666667
2015 UK profitability 1.0760523946078433
2016 UK profitability 1.3029651677534082
2015 USA profitability 1.8590738707427155
2016 USA profitability 1.310916538996283
2015 Japan profitability 3.143093142857143
2015 Mexico profitability 0.4585942142857143
2015 Canada budget 8.5
2016 Canada budget 6.1
2015 France budget 35.56666666666667
2016 France budget 8.5
2016 Japan budget 75
2016 Mexico budget 3
2015 UK budget 34
2016 UK budget 70.29166666666667
2015 USA budget 40.118187500000005
2016 USA budget 59.91499999999999
2015 Japan budget 35
2015 Mexico budget 14

Configuration

{
  level: 3
  title: "With groups"
  parent_id: 90
  id: 9006

  datasets:
    my_dataset:
      query:
        domain: "time_country"
      order:
        by: "label"
      units:
        value: "%"

  charts: [
    chartType: "horizontal-barchart"
    dataset: "my_dataset"

    groups: "variable"

    value: "value"
    label: "country"
    legend: true

    filters: "upper-middle":
      on: "title_year"
      type: "buttons"
  ]
}

You need to add the groups block groups: the column where resides the different groups.

Ex7: Horizontalbar with packs

A leaderboard organized in packs

A leaderboard organized in packs

Data structure

country duration region
Afghanistan 83 Asia
Argentina 121.5 South America
Aruba 91 South America
Bahamas 94 North America
Belgium 109 Europe
Brazil 100 South America
Bulgaria 109 Europe
Cambodia 100 Asia
Cameroon 104 Africa
Canada 68.33 North America
China 130.2 Asia
Colombia 101 South America
Czech Republic 113 Europe
Denmark 45 Europe
Dominican Repu 101 South America
Egypt 108 Africa
Egypt 108 Africa
Finland 93 Europe
France 100.3 Europe
Georgia 113 Europe
Germany 140.8 Europe
Greece 112 Europe
Hong Kong 100.78571 Asia
Hong Kong 113 Asia

The dataset is not not exhaustive

Configuration

{
  level: 3
  title: "With Packs"
  id: 9010
  parent_id: 90

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
      units:
        Pourcentage: " %"
        evolution: " %"

  charts: [
    chartType: "horizontal-barchart"
    dataset: "my_dataset"

    value: "duration"
    label: "country"

    packs :"region"
    packNames: true

    sort: "desc"

    filters: "upper-middle":
      on: "title_year"
      type: "buttons"
  ]
}

Ex8: Horizontalbar with drill

When using a hierarchical dataset, the chart will display the parent/child relationship of data rows.

A leaderboard with a second level of info

A leaderboard with a second level of info

Data structure

id parent libelle duration
Taiwan   Taiwan 345
Bulgaria   Bulgaria 327
Chile   Chile 381
Georgia   Georgia 339
Nigeria   Nigeria 380
Bulgaria-Action Bulgaria Action 109
Bulgaria-Sci-Fi Bulgaria Sci-Fi 109
Bulgaria-Thriller Bulgaria Thriller 109
Chile-Biography Chile Biography 127
Chile-Drama Chile Drama 127
Chile-History Chile History 127
Georgia-Action Georgia Action 113
Georgia-Drama Georgia Drama 113
Georgia-War Georgia War 113
Nigeria-Action Nigeria Action 95
Nigeria-Crime Nigeria Crime 95
Nigeria-Drama Nigeria Drama 95
Nigeria-Thriller Nigeria Thriller 95
Taiwan-Action Taiwan Action 112.5
Taiwan-Drama Taiwan Drama 112.5
Taiwan-Romance Taiwan Romance 120

Configuration

{
  level: 3
  title: "With children"
  id: 9011
  parent_id: 90

  datasets:
    my_dataset:
      query:
        domain: "my_domain"
      hierarchy:
        id: ["id"]
        parent: ["parent"]

  charts: [
    chartType: "horizontal-barchart"
    dataset: "my_dataset"

    value: "duration"
    label: "libelle"

    sort: "desc"

    legend: true
  ]
}

Ex9: Horizontalbar with custom highlighted labels

Highlighted labels on a leaderboard

Highlighted labels on a leaderboard

Data structure

country value highlight
Iceland 283 0
Thailand 173 1
West Germany 165 0
Sweden 161 0
Libya 156 0
Slovakia 141 0
India 135 1
Kyrgyzstan 135 0
Chile 127 0
New Zealand 122 0

Configuration

{
  level: 3
  title: "With custom highlighted labels"
  id: 1006
  parent_id: 10

  datasets:
    my_dataset:
      query:
        domain: 'theme_country'
      highlighted: 'highlight'

  charts: [
    chartType: "horizontal-barchart"
    dataset: "my_dataset"

    value: "value"
    label: "country"

    sort: "desc"
  ]
}