Scorecard Tutorials

Step by step tutorial

The user story

I’m a C-level manager in an international company. ✈️

I’d like an overview of KPIs which are not directly related to each other.

📝 For example, I’d like an overview of the number of facebook likes for each country and of the budget evolution.

Since I need to display indicators that have no direct correlation amongst each other and that have different units, let’s do a scorecard!

Warning

Before you start!

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

The dataset

Here is an example of the dataset expected to create a nice scorecard:

budget cast_total_facebook_likes country genre_type region
  1981.0 Belgium Action Europe
34.0 369.0 Belgium Comedy Europe
27.73 4946.846153846154 Canada Action North America
13.290 3147.682926829268 Canada Comedy North America

Very simple, isn’t it ? 😉 There is one line per country, per region and per genre, and for each one of them there is the budget evolution and the number of facebook likes.

Note

Don’t forget to add units to your budget and cast_total_facebook_likes columns to contextualize the information and give meaning to your story!

Chart Parameters

Once my data has been setup, I just need to follow the steps and in 3 clicks I’m done! ✅

I need at least :

  • a label column

    In our case my countries

  • a value column

    In our case my total of facebook likes

  • and sometimes a variation column

    In our case my budget evolution

heatmap parameters

Tip

💡 Did you know? Your value can be a number or some text. In our exemple, it could have been the genre type column instead of the cast_total_facebook_likes one.

Add packs

The last step in order to get your scorecard even more pretty and readable is to add packs, in other words: spacing. 😊

I want my countries split into two blocks depending on their related areas : Europe & North America.

In order to do so, I click on advanced optional parameters and I add region at the packs level.

heatmap parameters

Here we go! 🎉


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: Simple Scorecard

Image of chart

Image of chart

Data Structure

Dataset used for most of the examples bellow :

budget cast_total_facebook_likes country genre_type region
  1981.0 Belgium Action Europe
34.0 369.0 Belgium Comedy Europe
27.73 4946.846153846154 Canada Action North America
13.290 3147.682926829268 Canada Comedy North America

Configuration

{
    level: 3
    title:"Simple Scorecard"
    parent_id: 100
    id:100000

    chartOptions:
      chartType: "score-card"
      value: "cast_total_facebook_likes"
      label: "country"
      data:
        query:
          domain:"theme_country"
          region: $in:["Europe", "North America"]
          genre_type: "Action"
}

Ex2: With Units

Image of chart

Image of chart

Configuration

{
    level: 3
    title:"With units"
    parent_id: 100
    id:100001

    chartOptions:
      data:
        query:
          domain:"theme_country"
          region: $in:["Europe", "North America"]
          genre_type: "Action"
      chartType: "score-card"
      value: "cast_total_facebook_likes"
      label: "country"
      units:
        cast_total_facebook_likes: " fbk likes"
}

Ex3: With Variation

Image of chart

Image of chart

Configuration

{
    level: 3
    title:"With variationLegend"
    parent_id: 100
    id:1000030

    chartOptions:
      chartType: "score-card"
      data:
        query:
          domain:"theme_country"
          region: $in:["Europe", "North America"]
          genre_type: "Action"
      value: "cast_total_facebook_likes"
      variation: "budget"
      label: "country"

      units:
        cast_total_facebook_likes: " fbk likes"
        budget: " M$"
}

Ex4: With variationLegend

Image of chart

Image of chart

Configuration

{
    level: 3
    title:"With variationLegend"
    parent_id: 100
    id:1000030

    chartOptions:
      chartType: "score-card"
      data:
        query:
          domain:"theme_country"
          region: $in:["Europe", "North America"]
          genre_type: "Action"
      value: "cast_total_facebook_likes"
      variation: "budget"
      variationLegend: "Budget"
      label: "country"

      units:
        cast_total_facebook_likes: " fbk likes"
        budget: " M$"
}

Ex5: With precision

Image of chart

Image of chart

Configuration

{
    level: 3
    title:"With precision"
    parent_id: 100
    id:100004

    chartOptions:
      chartType: "score-card"
      data:
        query:
          domain:"theme_country"
          region: $in:["Europe", "North America"]
          genre_type: "Action"
        precision:
          cast_total_facebook_likes: ",.0f"
          budget:".0f"
      value: "cast_total_facebook_likes"
      variation: "budget"
      variationLegend: "Budget"
      label: "country"

      units:
        cast_total_facebook_likes: " fbk likes"
        budget: " M$"
}

Ex5: With packs and packsNames

Image of chart

Image of chart

Configuration

{
    level: 3
    title:"With packs and packNames"
    parent_id: 100
    id:100005

    chartOptions:
      chartType: "score-card"
      data:
        query:
          domain:"theme_country"
          region: $in:["Europe", "North America"]
          genre_type: "Action"
        precision:
          cast_total_facebook_likes: ",.0f"
          budget:".0f"
      value: "cast_total_facebook_likes"
      variation: "budget"
      variationLegend: "Budget"
      label: "country"

      packs:"region"
      packNames:true
      units:
        cast_total_facebook_likes: " fbk likes"
        budget: " M$"
}

Ex6: With packsOrder

Image of chart

Image of chart

Configuration

{
    level: 3
    title:"With packsOrder"
    parent_id: 100
    id:1000050

    chartOptions:
      chartType: "score-card"
      data:
        query:
          domain:"theme_country"
          region: $in:["North America","Europe"]
          genre_type: "Action"
        precision:
          cast_total_facebook_likes: ",.0f"
          budget:".0f"
      value: "cast_total_facebook_likes"
      variation: "budget"
      variationLegend: "Budget"
      label: "country"

      packs:"region"
      packNames:true
      packsOrder: ["North America","Europe"]
      units:
        cast_total_facebook_likes: " fbk likes"
        budget: " M$"
}

Ex7: With sparklines

Image of chart

Image of chart

Sparklines dataset

Data structure used for the sparklines only :

| cast_total_facebook_likes |   country |   genre_type | region       | month
| 1981.0                    | Belgium | Action     | Europe       | Jan
| 3395.0n                   | Bulgaria| Action     | Europe       | Jan
| 1585.0                    | Belgium | Action     | Europe       | Feb
| 2263                      | Bulgaria| Action     | Europe       | Feb

Configuration

{
    level: 3
    title:"with sparklines"
    parent_id: 100
    id:100007

    chartOptions:
      chartType: "score-card"
      value: "cast_total_facebook_likes"
      label: "country"
      data:
        query:
          domain:"theme_country"
          region: "Europe"
          genre_type: "Action"
      sparklines:
        data:
          query:[
            [ # january data
              $match:
                domain: "theme_country"
                region: $in:["Europe", "North America"]
                genre_type: "Action"
            ,
              $addFields:
                month: $literal: "Jan"
            ]
            [ # february data
              $match:
                domain: "theme_country"
                region: $in:["Europe", "North America"]
                genre_type: "Action"
            ,
              $addFields:
                month: $literal: "Feb"
                cast_total_facebook_likes: $multiply:["$cast_total_facebook_likes", 0.8]
            ]
            [ # march data
              $match:
                domain: "theme_country"
                region: $in:["Europe", "North America"]
                genre_type: "Action"
            ,
              $addFields:
                month: $literal: "Mar"

            ]
            [ # april data
              $match:
                domain: "theme_country"
                region: $in:["Europe", "North America"]
                genre_type: "Action"
            ,
              $addFields:
                month: $literal: "Apr"
                cast_total_facebook_likes: $multiply:["$cast_total_facebook_likes", 1.2]

            ]
            [ # may data
              $match:
                domain: "theme_country"
                region: $in:["Europe", "North America"]
                genre_type: "Action"
            ,
              $addFields:
                month: $literal: "May"
                cast_total_facebook_likes: $multiply:["$cast_total_facebook_likes", 1.1]

            ]
          ]
          multiple_queries: true
        joins: [
          'country'
        ]
        legend: 'Evolution'
        value: 'cast_total_facebook_likes'
        date: 'month'
        unit: ''
        orderDates: true
      legend: true

}

Ex8: With bottom-right filter

Image of chart

Image of chart

Configuration

{
    level: 3
    title:"With packsOrder"
    parent_id: 100
    id:1000050

    chartOptions:
      chartType: "score-card"
      data:
        query:
          domain:"theme_country"
          region: $in:["North America","Europe"]
          genre_type: "Action"
        precision:
          cast_total_facebook_likes: ",.0f"
          budget:".0f"
      value: "cast_total_facebook_likes"
      variation: "budget"
      variationLegend: "Budget"
      label: "country"

      packs:"region"
      packNames:true
      packsOrder: ["North America","Europe"]
      units:
        cast_total_facebook_likes: " fbk likes"
        budget: " M$"
}