Linechart Tutorials

Step by step tutorial

The user story

I’m a Chief Financial Officer of an important company and want to have an overview on the company’s Turnover over 2 years ! 💰💲

My Turnover increased by 27 % between 2016 and 2018 ! Awesome 🤩

However, what really happened between those two years in every quarter ?

Which quarter recorded the highest increase in Turnover ? When did the turnover decreased ? Which links can I make between the decisions made by the company and the evolution of the turnover ?

Since I need an overview of my company’s financial growth over all the quarters between 2017-2019 - let’s do a Linechart!

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 linechart:

PERIOD TURNOVER
Q1 2016 152
Q2 2016 178
Q3 2016 165
Q4 2016 185
Q1 2017 153
Q2 2017 161
Q3 2017 186
Q4 2017 165
Q1 2018 191
Q2 2018 167
Q3 2018 175
Q4 2018 193

Very simple, isn’t it ? 😉 There is one line per time period (Quarter here) and for each line, there is the value of the Turnover !

Note

Don’t forget to add units to your turover value for each period of time 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 2 clicks I’m done! ✅

I need at least :

  • a value column - that will be displayed as y axis for your linechart
  • a date column - that will be displayed as x axis for your linechart
linechart parameters
linechart parameters

Add Multiple lines

To have multiple lines in the same chart, you need to have a slight different dataset. But no worries 😎 No major changes !

Here is an example of the dataset expected to have multiple lines in the same chart:

TYPE PERIOD VALUE
TURNOVER Q1 2016 152
TURNOVER Q2 2016 178
TURNOVER Q3 2016 165
TURNOVER Q4 2016 185
TURNOVER Q1 2017 153
TURNOVER Q2 2017 161
TURNOVER Q3 2017 186
TURNOVER Q4 2017 165
TURNOVER Q1 2018 191
TURNOVER Q2 2018 167
TURNOVER Q3 2018 175
TURNOVER Q4 2018 193
EXPENSES Q1 2016 84
EXPENSES Q2 2016 93
EXPENSES Q3 2016 91
EXPENSES Q4 2016 92
EXPENSES Q1 2017 103
EXPENSES Q2 2017 110
EXPENSES Q3 2017 94
EXPENSES Q4 2017 101
EXPENSES Q1 2018 88
EXPENSES Q2 2018 84
EXPENSES Q3 2018 97
EXPENSES Q4 2018 99

Once my data is set up, i just need to follow the same steps of chart parameters above and one additional optional parameters and i’m done ✅

I need as below :

  • Select the advanced optional parameters
  • Select the column “TYPE” in the “Groups: Multi-linechart” option
linechart parameters

AND TADAAA 🎉

linechart parameters

Add Sentiment Zone

You can add sentiment zones within your linechart so you can easily identify when you reached a critical value. Practical, isn’t it ? 👌

For this, you need to do it in codemode.

Basically, your domain is your “y axis” and you choose the values you need to specify for each sentiment zone as in the code below.

sentimentZones: [
      {
        domain: [
          850
          2000
        ]
        label:
          text: "Above expectations"
          position: "bottom"
        sentiment: "positive"
      }
      {
        domain: [
          0
          850
        ]
        label:
          text: "Under the target"
          position: "top"
        sentiment: "negative"
      }

And you’re done 🎉

linechart 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: With Legend

Adding a legend to the line chart

With Legend

With Legend

Data structure

| title_year  | country     | gross |
|-------------|-------------|-------|
| 2016        | France      | 30.6  |
| 2016        | Argentina   | 59.2  |

Config file

{
  level: 3
  title: "Simple linechart with legend"
  parent_id: 20
  id: 2001
  commentary: "Adding a legend to the line chart"
  chartOptions:
    data:
      query:
        domain: "time_country"
    filters:
      'upper-right':
        on:'country'
        type:'dropdown'
        default: "France"
    chartType: "linechart"
    value: "gross"
    date: "title_year"
    legend: true
}
Ex2 : Simple linechart with units and precision

Adding precisions and units

Data structure

| title_year  | country     | gross |
|-------------|-------------|-------|
| 2016        | France      | 30.6  |
| 2016        | Argentina   | 59.2  |

Config file

{
  level: 3
  title: "Simple linechart with units and precision"
  parent_id: 20
  id: 2007
  commentary: "Adding precisions and units"
  chartOptions:
    data:
      query:
        domain: "time_country"
      precision:
        gross:'.1f'

    filters:
      'upper-right':
        on:'country'
        type:'dropdown'
        default: "France"

    chartType: "linechart"
    value: "gross"
    date: "title_year"

    units:
      gross: " m$"
    legend: true
}
Ex3 : Axis legend linechart

Legend to display for the axis, column name in your data source

Axis legend linechart

Axis legend linechart

Data structure

| title_year  | country     | gross |
|-------------|-------------|-------|
| 2016        | France      | 30.6  |
| 2016        | Argentina   | 59.2  |

Config file

{
  level: 3
  title: "Axis legend linechart"
  parent_id: 20
  id: 2006
  commentary: "Legend to display for the axis, column name in your data source"
  chartOptions:
    data:
      query:
        domain: "time_country"
      precision:
        gross:'.1f'

    filters:
      'upper-right':
        on:'country'
        type:'dropdown'
        default: "France"
    chartType: "linechart"
    value: "gross"
    date: "title_year"
    units:
      gross: " m$"
    legend: true
    xLegend: "Years"
    yLegend: "Gross Revenue"
}
Ex4 : Multiple linechart

Legend to display for the axis, column name in your data source

Mutliple linechart

Mutliple linechart

Data structure

| title_year  | country     | value | variable|
|-------------|-------------|-------|---------|

   | 2016       | France     | 30.6 | gross | | 2016 | Argentina | 59.2 | gross |     | 2016       | France     | 40.8 | budget | | 2016 | Argentina | 64.2 | budget |

Config file

{
  level: 3
  title: "Mutliple linechart"
  parent_id: 20
  id: 2005
  commentary: "The lines can represent multiple observations (labels, entities, etc.). Efficient with up to 5 lines, beeter to keep it under 3!"
  chartOptions:
    data:
      query:
        domain: "time_country"
      precision:
        value:'.1f'
    filters:
      'upper-right':
        on:'country'
        type:'dropdown'
        default: "France"
    chartType: "linechart"
    value: "value"
    groups: "variable"
    date: "title_year"

    units:
      value: " m$"
    legend: true
}
Ex5 : With sentiment zones

Attach a sentiment to any column of your data (value, variation, other) by mapping intervals of numbers to performance assessment, see example below.

With sentiment zones

With sentiment zones

Data structure

| title_year  | country     | gross |
|-------------|-------------|-------|
| 2016        | France      | 30.6  |
| 2016        | Argentina   | 59.2  |

Config file

{
  level: 3
  title: "With sentiment zones"
  id: 2002
  commentary: "Attach a sentiment to any column of your data (value, variation, other) by mapping intervals of numbers to performance assessment, see example below"
  parent_id: 20
  chartOptions:
    data:
      query:
        domain: "time_country"
      precision:
        gross:'.1f'
    filters:
      'upper-right':
        on:'country'
        type:'dropdown'
        default: "France"
    chartType: "linechart"
    value: "gross"
    date: "title_year"
    units:
      gross: " m$"
    legend: true

    sentimentZones:[
      domain: [2, 10]
      label:
        text: 'Low gross!'
        position: 'top'
      sentiment: 'negative'
    ]
}
Ex6 : Showing missing value

True/False to display missing values as blank/white lines (by default missing values are filtered out to display a continuous line).

Showing missing value

Showing missing value

Data structure

| title_year  | country     | gross |
|-------------|-------------|-------|
| 2016        | France      | 30.6  |
| 2016        | Argentina   | 59.2  |

Config file

{
  level: 3
  title: "Showing missing value"
  id: 2003
  commentary: "True/False to display missing values as blank/white lines (by default missing values are filtered out to display a continuous line)"
  parent_id: 20
  chartOptions:
    data:
      query:
        domain: "time_country"
      precision:
        gross:'.1f'
    filters:
      'upper-right':
        on:'country'
        type:'dropdown'
        default: "France"

    chartType: "linechart"
    value: "gross"
    date: "title_year"
    units:
      gross: " m$"
    legend: true
    showMissingValues:true
}
Ex 7: Represent projections

You can use a dotted line to represent forecast data. Add: groups: "groups"

Represent projections

Represent projections

Data structure

| title_year  | country     | gross |
|-------------|-------------|-------|
| 2016        | France      | 30.6  |
| 2016        | Argentina   | 59.2  |

Config file

{
  level: 3
  title: "Represent projections"
  id: 2004
  commentary: "Represent projections with dotted lines: use the css interface for this"
  parent_id: 20
  chartOptions:
    data:
      query:
        domain: "time_country"
      precision:
        gross:'.1f'
    filters:
      'upper-right':
        on:'country'
        type:'dropdown'
        default: "France"

    chartType: "linechart"
    value: "gross"
    date: "title_year"
    units:
      gross: " m$"
    legend: true
    groups: "groups"
    showMissingValues: false
}

CSS customization : add the following css blocks inside the Color interface

linechart g.serie[data-serie="my_forecasts"] path {
    stroke-dasharray: 5,5;
}

The stroke dasharray a,b parameter configures the size of a the line part (a pixels) followed by the blank space (b px).

Ex8 : Smooth linechart

True/false whether or not to use a smooth line display (false by default).

Smooth linechart

Smooth linechart

Data structure

| title_year  | country     | value | variable |
|-------------|-------------|-------|--------- |
| 2016        | France      | 30.6  | gross    |
| 2016        | Argentina   | 59.2  | gross    |
| 2016        | France      | 40.8  | budget   |
| 2016        | Argentina   | 64.2  | budget   |

Config file

{
  level: 3
  title: "Smooth linechart"
  parent_id: 20
  id: 2009
  commentary: "True/false whether or not to use a smooth line display (false by default)"
  chartOptions:
    data:
      query:
        domain: "time_country"
      precision:
        value:'.1f'
    filters:
      'upper-right':
        on:'country'
        type:'dropdown'
        default: "France"
    chartType: "linechart"
    value: "value"
    groups: "variable"
    date: "title_year"
    smoothLine: true
    units:
      value: " m$"
    legend: true
}
Ex9 : Filtered linechart

Bottom-right (add me outside of chartOptions). Upper-right. Upper-middle.

Filtered linechart

Filtered linechart

Data structure

| title_year  | country     | value | variable |
|-------------|-------------|-------|--------- |
| 2016        | France      | 30.6  | gross    |
| 2016        | Argentina   | 59.2  | gross    |
| 2016        | France      | 40.8  | budget   |
| 2016        | Argentina   | 64.2  | budget   |

Config file

{
  level: 3
  title: "Filtered linechart"
  parent_id: 20
  id: 2010
  commentary: "Bottom-right (add me outside of chartOptions). Upper-right. Upper-middle"
  chartOptions:
    data:
      query:
        domain: "time_country"
      precision:
        value:'.1f'
    filters:
      'upper-right':
        on:'country'
        type:'dropdown'
        default: "France"

    chartType: "linechart"
    value: "value"
    groups: "variable"
    date: "title_year"
    smoothLine: true
    units:
      value: " m$"
    legend: true

    filters:
      'bottom-right':
      on:'variable'
      type:'buttons'
      default: "gross"
}
Ex10 : Linechart with event hardcoded

Hardcode extra information highlighted when a data point is selected.

Image of chart

Image of chart

Data structure

| title_year  | country     | gross |
|-------------|-------------|-------|
| 2016        | France      | 30.6  |
| 2016        | Argentina   | 59.2  |

Config file

{
  level: 3
  title: "Linechart with event hardcoded"
  parent_id: 20
  id: 2011
  commentary: "Extra information highlighted when a data point is selected"
  chartOptions:
    data:
      query:
        domain: "time_country"
      precision:
        gross:'.1f'

    chartType: "linechart"
    value: "gross"
    date: "title_year"
    smoothLine: true

    units:
      gross: " m$"

    legend: true
    "events": [
      {
        date: "2008"
        name: "Bienvenue Chez les Ch'tis"
      }
      {
        date: "2000"
        name: "Taxi 2"
      }
      {
        date: "1991"
        name: "Tous les matins du monde"
      }]
}
Ex11 :Multiple Linechart with event hardcoded

Hardcode extra information highlighted when a data point is selected.

Image of chart

Image of chart

Data structure

| title_year  | variable    | value |
|-------------|-------------|-------|
| 2016        | gross       | 40.6  |
| 2011        | gross       | 19.2  |
| 2008        | gross       | 57.2  |
| 2015        | gross       |  8.2  |
| 2006        | Budget      | 13.6  |
| 2006        | Budget      | 13.6  |

Config file

{
  level: 3
  title: "Linechart with event hardcoded"
  parent_id: 20
  id: 2011
  commentary: "Extra information highlighted when a data point is selected"
  chartOptions:
    data:
      query:
          domain: "time_country"

      precision:
        gross:'.1f'
    chartType: "linechart"
    value: "gross"
    date: "title_year"
    smoothLine: true
    units:
      gross: " m$"
    legend: true
    "events": [
      {
        date: "2008"
        name: "Bienvenue Chez les Ch'tis"
        label: "gross"
      }
      {
        date: "2000"
        name: "Taxi 2"
        label: "gross"

      }
      {
        date: "1991"
        name: "Tous les matins du monde"
        label: "gross"

      }]
}

That’s it!