Barlinechart Tutorials

Step by step tutorial

Warning

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

The dataset

We will work on a movies dataset to explore the barlinechart properties. Below are a sample of rows from the dataset to get a sense its structure:

movie country title_year num_voted_users imdb_score
movie0 USA 2008 3329 6.8
movie1 USA 2011 1837 7.2
movie2 USA 2016 2205 6.0
movie3 France 2013 1007 7.1
movie4 France 2014 823 6.3
movie5 UK 2013 789 6.4

Very simple ! There is one line per movie, each movie being identified by a unique id in the column ‘movie’. Every movie has a nationality (‘country’), a release year (‘title_year’), a number of reviewers on the IMDb site (‘num_voted_users’), and an average IMDb score (‘imdb_score’) resulting from the reviewers vote.

Let us visualise this data !

0. Basic configuration with mandatory properties

In a first step, we will look at all the movies released between 2010 and 2016 inclusive. The release years will be the common x-axis shared by the bars and line which will represent respectively:

  • the total number of reviews (column ‘num_voted_users’)
  • the average IMDB score (column ‘imdb_score’)

Here is the basic configuration code:

{
  level: 3
  parent_id: 70
  id: 7000
  title: 'Basic configuration'

  datasets:
    bars_data:
      query: [
        $match:
          domain: 'source'
          title_year:
            $gte: '2010'
      ,
        $group:
          _id: '$title_year'
          value:
            $sum: '$num_user_for_reviews'
      ]
    lines_data:
      query: [
        $match:
          domain: 'source'
          title_year:
            $gte: '2010'
      ,
        $group:
          _id: '$title_year'
          value:
            $avg: '$imdb_score'
      ]

  chartOptions:
    chartType: 'new-barlinechart'

    bars:
      dataset: 'bars_data'
    label: '_id'
    value: 'value'

    lines:
      dataset: 'lines_data'
      x: '_id'
      y: 'value'
}

In the query block, we first select all the movies from 2010 to 2016 inclusive, and then we group the data by year, summing the number of reviews for the bars dataset, and averaging the IMDB notes for the line dataset (please see the MongoDB documentation for further details on the MongoDB aggregation framework).

Here is what the first rows of the bars query output (‘bars_dataset’) look like:

_id value
2010 50955
2011 48182
2012 57939

And here is what the first rows of the lines query output (‘bars_dataset’) look like:

_id value
2010 6.265
2011 6.262
2013 6.369

Both datasets have 7 lines, one for each release year.

Here is how the visualisation looks like:

Image of chart

Image of chart

Now you think “Well Toucan ! This one is named barlinechart, so where is my line ??”

Well, you may have noticed the points at the bottom of the chart. This is where your flattened line lies, because your bars and line not only share the same x-axis, but they also share a common y-axis (because as specified at the top of this page, the commonScale property is set to true by default). In some cases the default configuration will work, but here you can see in the above datasets that the bars and lines values are not of the same order of magnitude…

1. Adding specific axis scales, precision, units and a legend

We will give a specific y-axis scale to IMDb scores, ranging from 0 to 10. We we also add a specific scale for our bars in order to let space for the line above them. For that purpose, we will use the domain property of the bars and lines blocks, that will overwrite the default configuration of commonScale (i.e. true).

Eventually we will add precision, units and a legend to be more accurate about the information we display.

See below the new configuration and the corresponding output:

{
  level: 3
  parent_id: 70
  id: 7001
  title: 'Adding specific axis scales, precision, units and a legend'

  datasets:
    bars_data:
      query: [
        $match:
          domain: 'source'
          title_year:
            $gte: '2010'
      ,
        $group:
          _id: '$title_year'
          value:
            $sum: '$num_user_for_reviews'
      ]
      units:
        value: ' reviewers'
    lines_data:
      query: [
        $match:
          domain: 'source'
          title_year:
            $gte: '2010'
      ,
        $group:
          _id: '$title_year'
          value:
            $avg: '$imdb_score'
      ]
      precision:
        value: '.1f'
      units:
        value: '/10'

  chartOptions:
    chartType: 'new-barlinechart'

    bars:
      dataset: 'bars_data'
      domain: [0, 80000]
    label: '_id'
    value: 'value'

    lines:
      dataset: 'lines_data'
      x: '_id'
      y: 'value'
      domain: [0, 7]

    legend: true
}

And here is what the visualisation looks like:

Image of chart

Image of chart

Better right ?

2. Adding groups / series colors

But it is still unclear what information we talk about, and we would like to have colors to distinguish the number of reviewers and the IMDb score series.

So the trick here is to use the groups and serie properties for the bars and lines respectively as shown below:

```coffeescript { level: 3 parent_id: 70 id: 7002 title: ‘Adding groups / series colors’

datasets: bars_data: query: [ $match: domain: ‘source’ title_year: $gte: ‘2010’ , $group: _id: ‘$title_year’ value: $sum: ‘$num_user_for_reviews’ , $addFields: groups: $literal: ‘Number of reviewers’ ] units: value: ‘ reviewers’ lines_data: query: [ $match: domain: ‘source’ title_year: $gte: ‘2010’ , $group: _id: ‘$title_year’ value: $avg: ‘$imdb_score’ , $addFields: serie: $literal: ‘IMDb score’ ] precision: value: ‘.1f’ units: value: ‘/10’

chartOptions: chartType: ‘new-barlinechart’

bars:
  dataset: 'bars_data'
  domain: [0, 80000]
label: '_id'
value: 'value'
groups: 'groups'

lines:
  dataset: 'lines_data'
  x: '_id'
  y: 'value'
  domain: [0, 7]
  serie: 'serie'

legend: true

} ```

Below is what the bars query ouptut looks like:

_id value groups
2010 50955 Number of reviewers
2011 48182 Number of reviewers
2012 57939 Number of reviewers

And here is what the lines query ouptut looks like:

_id value serie
2010 50955 IMDb score
2011 48182 IMDb score
2012 57939 IMDb score

Finally here is the visualisation:

Image of chart

Image of chart

Way better now !

Note how we modified the query to add information on the nature of the data. The created fields are then used in the groups and serie properties for bars and lines respectively.

3. Adding filters

Now what if we want to be able to juggle different countries data ? Let us add an upper-middle dropdown filter (if you want to add a bottom-right filter, remember that you should put its block of code outside chartOptions block). We will need to specify that we want

We will set a defaultSelected value to ‘USA’, and we will specify that we want to apply the filter to both the bars and lines datasets (for more details, please see the dedicated documentation on filters here). We also rescaled bars (using the domain property as previously shown).

Here is what it looks like:

{
  level: 3
  parent_id: 70
  id: 7003
  title: 'Adding filters'

  datasets:
    bars_data:
      query: [
        $match:
          domain: 'source'
          title_year:
            $gte: '2010'
      ,
        $group:
          _id:
            title_year: '$title_year'
            country: '$country'
          value:
            $sum: '$num_user_for_reviews'
      ,
        $addFields:
          groups:
            $literal: 'Number of reviewers'
          title_year: "$_id.title_year"
          country: "$_id.country"
      ]
      units:
        value: ' reviewers'
    lines_data:
      query: [
        $match:
          domain: 'source'
          title_year:
            $gte: '2010'
      ,
        $group:
          _id:
            title_year: '$title_year'
            country: '$country'
          value:
            $avg: '$imdb_score'
      ,
        $addFields:
          serie:
            $literal: 'IMDb score'
          title_year: "$_id.title_year"
          country: "$_id.country"
      ]
      precision:
        value: '.1f'
      units:
        value: '/10'

  chartOptions:
    chartType: 'new-barlinechart'

    bars:
      dataset: 'bars_data'
      domain: [0, 60000]
    label: 'title_year'
    value: 'value'
    groups: 'groups'

    lines:
      dataset: 'lines_data'
      x: 'title_year'
      y: 'value'
      domain: [0, 7]
      serie: 'serie'

    legend: true

    filters:
      'upper-middle':
        on: 'country'
        type: 'dropdown'
        defaultSelected: 'USA'
        datasets: ['bars_data', 'lines_data']
}
Image of chart

Image of chart

Nice !

Note how we modified the query (please see the MongoDB documentation for further details on MongoDB queries) to include a country field so that we are able to filter on it. This change in query has an impact on our fields name so be careful of the serie and x properties !

4. Adding groups / series with several items (for several bars and lines)

So now I can get my information country by country. But what if I want to tell a comparison story ? For example, we would like to be able to build a view allowing to quickly compare the number of reviewers and the IMDb notes for American and French films.

To achieve this result, we will forget our filter for a while, and we will use the groups and serie properties for the bars and lines respectively. Note that the serie property is inside the lines block. Both groups and serie have a similar impact on the visualisation: they create a separate series for every unique item found in the column specified to the groups / serie property. So it will translate in several bars / lines on the visualisation, with a color per group / series.

Let us see at what it looks like in our example :

{
  level: 3
  parent_id: 70
  id: 7004
  title: 'Adding groups / series with several items (for several bars and lines)'

  datasets:
    bars_data:
      query: [
        $match:
          domain: 'source'
          title_year:
            $gte: '2010'
          country:
            $in: ['France', 'UK']
      ,
        $group:
          _id:
            title_year: '$title_year'
            country: '$country'
          value:
            $sum: '$num_user_for_reviews'
      ,
        $addFields:
          title_year: "$_id.title_year"
          country: "$_id.country"
      ]
      units:
        value: ' reviewers'
    lines_data:
      query: [
        $match:
          domain: 'source'
          title_year:
            $gte: '2010'
          country:
            $in: ['France', 'UK']
      ,
        $group:
          _id:
            title_year: '$title_year'
            country: '$country'
          value:
            $avg: '$imdb_score'
      ,
        $addFields:
          title_year: "$_id.title_year"
          country: "$_id.country"
      ]
      precision:
        value: '.1f'
      units:
        value: '/10'

  chartOptions:
    chartType: 'new-barlinechart'

    bars:
      dataset: 'bars_data'
      domain: [0, 7000]
    label: 'title_year'
    value: 'value'
    groups: 'country'

    lines:
      dataset: 'lines_data'
      x: 'title_year'
      y: 'value'
      domain: [0, 7]
      serie: 'country'

    legend: true
}

Below is what the bars query ouptut looks like:

_id value title_year country  
{ “title_year”: “2013”, “country”: “France” } 180 2015 France  
{ “title_year”: “2016”, “country”: “France” } 168 2016 France  
{ “title_year”: “2010”, “country”: “UK” } 4282 2010 UK  

And here is what the lines query ouptut looks like:

_id value title_year country  
{ “title_year”: “2013”, “country”: “France” } 6.075 2015 France  
{ “title_year”: “2016”, “country”: “France” } 6.766 2016 France  
{ “title_year”: “2010”, “country”: “UK” } 6.619 2010 UK  

Finally here is the visualisation:

Image of chart

Image of chart

Wow !

Note how we got rid of the filter, and how we modified the query so that the country column now only contains ‘France’ and ‘UK’ (please see the MongoDB documentation for further details on MongoDB queries). We also rescaled bars (using the dedicated domain property).

5. Adding meta information about series

Bonus time ! Let us add some meta information about the series thanks to the… meta property !

{
  level: 3
  parent_id: 70
  id: 7005
  title: 'Adding meta information about series'

  datasets:
    bars_data:
      query: [
        $match:
          domain: 'source'
          title_year:
            $gte: '2010'
          country:
            $in: ['France', 'UK']
      ,
        $group:
          _id:
            title_year: '$title_year'
            country: '$country'
          value:
            $sum: '$num_user_for_reviews'
      ,
        $addFields:
          title_year: "$_id.title_year"
          country: "$_id.country"
          Info:
            $cond: {
              if: {
                $eq: ['$_id.country', 'France']
              }
              ,
              then: {
                $literal: 'This is where Toucan Toco comes from'
              }
              ,
              else: {
                $literal: 'This is where James Bond comes from'
              }
            }
      ]
      units:
        value: ' reviewers'
    lines_data:
      query: [
        $match:
          domain: 'source'
          title_year:
            $gte: '2010'
          country:
            $in: ['France', 'UK']
      ,
        $group:
          _id:
            title_year: '$title_year'
            country: '$country'
          value:
            $avg: '$imdb_score'
      ,
        $addFields:
          title_year: "$_id.title_year"
          country: "$_id.country"
          Info:
            $cond: {
              if: {
                $eq: ['$_id.country', 'France']
              }
              ,
              then: {
                $literal: 'This is where Toucan Toco comes from'
              }
              ,
              else: {
                $literal: 'This is where James Bond comes from'
              }
            }
      ]
      precision:
        value: '.1f'
      units:
        value: '/10'

  chartOptions:
    chartType: 'new-barlinechart'

    bars:
      dataset: 'bars_data'
      domain: [0, 7000]
    label: 'title_year'
    value: 'value'
    groups: 'country'

    lines:
      dataset: 'lines_data'
      x: 'title_year'
      y: 'value'
      domain: [0, 7]
      serie: 'country'

    legend: true
    metaSerie: ['Info']
}

Below is what the bars query ouptut looks like:

_id value title_year countr y Info
{ “title _year “: “2013” , “count ry”: “Franc e” } 180 2015 France This is where Tocan Toco comes from
{ “title _year “: “2016” , “count ry”: “Franc e” } 168 2016 France This is where Tocan Toco comes from
{ “title _year “: “2010” , “count ry”: “UK” } 4282 2010 UK This is where James Bond comes from

And here is what the lines query ouptut looks like:

_id value title_year countr y Info
{ “title _year “: “2013” , “count ry”: “Franc e” } 6.075 2015 France This is where Tocan Toco comes from
{ “title _year “: “2016” , “count ry”: “Franc e” } 6.766 2016 France This is where Tocan Toco comes from
{ “title _year “: “2010” , “count ry”: “UK” } 6.619 2010 UK This is where James Bond comes from

Finally here is the visualisation:

Image of chart

Image of chart

Note that we had to extend our query output again !

The end !!! Congratulations, you are a barlinechart master now !