Leaderboard Centered Average Tutorials

Step by step tutorial

The user story

I’m a C-level manager in a film company.

The company produces different types of movies. The average revenue is 100k€. I want to know what film categories (action, comedy etc…) are driving the revenue up or down.

Which categories are above the average ? Which one needs more attention to make sure the sales will go back up ?

As I’m analyzing the revenue distribution around the average revenue, let’s do a leaderboardCenteredAverage

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 leaderboardCenteredAverage, the chart needs to understand what is the average and the value.

So your data should reflect this structure in some way.

You need :

• a value column: in our case the “revenue”.
• a label column: what am I comparing ? in our case, the film “categories”.
• and sometimes an average column : in our case, it could be the “average revenue”.

If your data is alredy in this format, move on to the next step.

After following the tutorial, this is how my query should look like in the Dataset Editor.

Add units to your revenue column to contextualize the information and give meaning to your story.

Chart Parameters

Once my data has been setup I can now choose to configure a leaderboard centered average.

I just need to follow the steps, and in 3 clicks I’m done!

Add a pack

Let’s say that my film company produces movies for France and Belgium. I can compare the countries by setting up some packs in the optional parameters.

Only 1 click away !

And it looks great :

Use the Reverse Sentiment

Also, sometimes the color coding needs to be reversed. For instance, when you compare the amount of the actual expenses versus a target : if the expenses are above, it means that too much money was spent versus what was targeted.

Again, in the optional parameters, reverse the sentiment :

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: Mode 1 - LeadearboardCenteredAverage simple and value as average

The average is a fixed value and is determined in the configuration block.

Image of chart

Configuration

{
  level: 3
  id: 13000
  parent_id: 130
  title: " Mode 1 - LeaderboardCenteredAverage simple"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
  ]
}

Ex2: Mode 2 - LeadearboardCenteredAverage simple and average as a query result

The average is the result of a query.

Image of chart

Configuration

{
  level: 3
  id: 130000
  parent_id: 130
  title: " Mode 2- LeaderboardCenteredAverage simple"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        data:
          query:[
            $match:
              domain: "theme_country"
              country: "Belgium"
              gross: $ne: null
          ,
            $addFields:
              avg: $literal: 100
          ]
        joins: [
          "genre_type"
        ]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    average:
      value: "avg"
  ]
}

Ex3: LeadearboardCenteredAverage with sort

Image of chart

Configuration

{
  level: 3
  id: 13011
  parent_id: 130
  title: "LeaderboardCenteredAverage with sort"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    average:
      value: "value"
  ]
}

Ex4: LeadearboardCenteredAverage with units

Image of chart

Configuration

{
  level: 3
  id: 13001
  parent_id: 130
  title: "LeaderboardCenteredAverage with units"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    average:
      value: "value"
  ]
}

Ex5: LeadearboardCenteredAverage with variation

Image of chart

Configuration

{
  level: 3
  id: 13003
  parent_id: 130
  title: "LeaderboardCenteredAverage with variation"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
        imdb_score: "%"
      average:
        values: [value: 100]
        precision:
          imdb_score: ".0f"

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    variation: "imdb_score"
    variationLegend: "vs N-1"
    average:
      value: "value"
  ]
}

Ex6: LeadearboardCenteredAverage with precision

Image of chart

Configuration

{
  level: 3
  id: 13002
  parent_id: 130
  title: "LeaderboardCenteredAverage with precision"

 datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      precision:
        duration: ".1f"
      average:
        values: [value: 100]
        precision:
          value: ".0f"

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    average:
      value: "value"
  ]
}

Ex7: LeadearboardCenteredAverage with rank

Image of chart

Configuration

{
  level: 3
  id: 13007
  parent_id: 130
  title: "LeaderboardCenteredAverage with rank"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    rank: true
    average:
      value: "value"
  ]
}

Ex8: LeadearboardCenteredAverage with sorter

Image of chart

Configuration

{
  level: 3
  id: 130015
  parent_id: 130
  title: "LeaderboardCenteredAverage with sorter"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      precision:
        imdb_score: ".0f"
      units:
        duration: " min"
        imdb_score: "%"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    variation: "imdb_score"
    variationLegend: "vs N-1"
    average:
      value: "value"

    sorter:
      default: "duration"
      legend: "Sort by"
      values: [
        label: "Theme"
        sort:
          by: "genre_type"
          order: "asc"
      ,
        label: "Variation"
        sort:
          by: "imdb_score"
          order: "desc"
      ,
        label: "Duration"
        sort:
          by: "duration"
          order: "desc"
      ]

  ]
}

Ex9: LeadearboardCenteredAverage with reverse

Image of chart

Configuration

{
  level: 3
  id: 13010
  parent_id: 130
  title: "LeaderboardCenteredAverage reverse"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    reverse: true
    average:
      value: "value"
  ]
}

Ex10: LeadearboardCenteredAverage with averageText

Image of chart

Configuration

{
  level: 3
  id: 13008
  parent_id: 130
  title: "LeaderboardCenteredAverage with averageText"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    averageText: "Avg"
    average:
      value: "value"
  ]

}

Ex11: LeadearboardCenteredAverage with hideAverageBox

Image of chart

Configuration

{
  level: 3
  id: 13009
  parent_id: 130
  title: "LeaderboardCenteredAverage hideAverageBox"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    hideAverageBox: true
    average:
      value: "value"
  ]
}

Ex12: LeadearboardCenteredAverage with packs

Image of chart

Configuration

{
  level: 3
  id: 13005
  parent_id: 130
  title: "LeaderboardCenteredAverage with packs"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    packs:"country"
    average:
      value: "value"
  ]
}

Ex13: LeadearboardCenteredAverage with packsLabelWidth

Image of chart

Configuration

{
  level: 3
  id: 130013
  parent_id: 130
  title: "LeaderboardCenteredAverage with packsLabelWidth"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    packs:"country"
    packsLabelWidth: 150
    average:
      value: "value"
  ]
}

Ex14: LeadearboardCenteredAverage with labelWidth

Image of chart

Configuration

{
  level: 3
  id: 1300130
  parent_id: 130
  title: "LeaderboardCenteredAverage with labelWidth"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    packs:"country"
    labelWidth: 150
    average:
      value: "value"
  ]
}

Ex15: LeadearboardCenteredAverage with compactLabels

Image of chart

Configuration

{
  level: 3
  id: 130014
  parent_id: 130
  title: "LeaderboardCenteredAverage with compactLabels"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    packs:"country"
    compactLabels: true
    average:
      value: "value"
  ]
}

Ex16: LeadearboardCenteredAverage with legend

Image of chart

Configuration

{
  level: 3
  id: 130021
  parent_id: 130
  title: "LeaderboardCenteredAverage with legend"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]
        precision:
          value: ".0f"

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    legend: true
    average:
      value: "value"
  ]
}

Ex17: LeadearboardCenteredAverage with meta

Image of chart

Configuration

{
  level: 3
  id: 130022
  parent_id: 130
  title: "LeaderboardCenteredAverage with meta"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      precision:
        duration: ".1f"
        imdb_score: ".0f"
      units:
        duration: " min"
        imdb_score: "%"
      average:
        values: [value: 100]
        precision:
          value: ".0f"

  charts: [
    chartType: "leaderboardCenteredAverage"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    legend: true
    meta: ["imdb_score"]
    average:
      value: "value"
  ]
}

Ex18: LeadearboardCenteredAverage with sparklines

For sparklines detailed configuration, please check the specific documentation.

Configuration

{
  level: 3
  id: 130130
  parent_id: 130
  title: "LeaderboardCenteredAverage with sparklines"

  datasets:
    my_dataset:
      query:
        domain: "theme_country"
        country: "Belgium"
        gross: $ne: null
      units:
        duration: " min"
      average:
        values: [value: 100]
        units:
          duration: " min"
      history:
        data:
          query:
            domain: "lca_sparklines"
        joins: [
          "genre_type"
        ]

  charts: [
    chartType: "leaderboardCenteredAverage"
    dataset: "my_dataset"
    value: "duration"
    label: "genre_type"
    sort: "desc"
    reverse: true
    average:
      value: "value"
    sparklines:
      orderDates: true
      value: "duration"
      date: "time"
  ]
}