Slopegraph Tutorials

Step by step tutorial

The user story

I’m a regional manager, I want to compare my shops average basket from one year to another.

What shops are the top performers on Year 1 and is the ranking the same on Year 2 ?

As I’m looking to compare the shops over the time based on a value, let’s do a slopegraph.

Warning

Before you start!

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

Pick some data

All we need to create a nice slopegraph is 3 columns: label, value and date.

  • a label column : this will define the name of each of the line you want to display. In our case, the shops
  • a value column : this will define the value. In our case, the average basket.
  • a date column : this will define the start and end dates of the comparison period.

You can add the following option to make your viz more precise :

  • add evolution to display the variation rate between the 2 periods.

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.

My dataset should look like this :

slopegraph dataset

Remember to set units to the value !

Chart Parameters

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

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

slope parameters

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 slopegraph

Data structure

| Retailer name | date | value |
| --------------| -----| ------|
| Agence 1      | 2018 | 216604|
| Agence 1      | 2017 | 218961|

Config file

{
    title: "Slopegraph"
    level: 3
    id: 150001
    parent_id: 150
    commentary: "Good to visualize the trend between 2 dates or to analyze the evolution between 2 situations. The more crossing there are, the more the initial ranking have been shuffled.How my top 10 shops have changed since last year? Is this shop still #1?"
    chartOptions:
      data:
        query:
          domain: "ventes_magasins"
      chartType: "slopegraph"
      label: "Retailer name"
      value: "value"
      date: "date"
      units:
        value: " $"
}
Ex2: Add Evolution and filter

Data structure

| Retailer name | date | value | branch |
| --------------| -----| ------| -------|
| Agence 1      | 2018 | 216604| sports |
| Agence 1      | 2017 | 218961| arts   |

Config file

{
    title: "Slopegraph with units"
    level: 3
    id: 150004
    parent_id: 150
    commentary: "add units"
    chartOptions:
      data:
        query:
          domain: "ventes_magasins"
      chartType: "slopegraph"
      label: "Retailer name"
      value: "value"
      date: "date"
      units:
        value: " $"
      evolution: "evolution"
    filters:
      "bottom-right":
        on: "branch"
        type: "buttons"
}

That’s it!