Tablechart Tutorials

Step by step tutorial

The user story

I’m a Supply Chain Director and I need to see detailed information about my products: reference, images, sold units on stocks etc…

Since I need a quick overview of quantitative and qualitative information, let’s do a tablechart!

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

tablechart dataset

Very simple, isn’t it ? 😉 There is one line per product containing all information I want : description, image, manual link, price, reference, sales variation, stock, type and units.

Note

Don’t forget to add units to your price and sales variation columns to contextualize the information and give meaning to your story!

Code mode

Once my data has been setup, I just need to go to the code mode and copy/paste (or take example) on the code below and I’m done! ✅

level: 3
id: 22451
parent_id: 2245
title: "Tablechart"
datasets:
  my_dataset:
    id: "my_dataset"
    query:
      domain: "tablechart"
    units:
      price: " $"
      "sales variation": " %"
    precision:
      price: ".1f"
charts: [
  {
    dataset: "my_dataset"
    chartType: "tablechart"
    columns: [
      {
        type: "tag"
        label: "reference"
      }
      {
        type: "tag"
        label: "type"
      }
      {
        type: "value"
        label: "price"
      }
      {
        type: "variation"
        label: "sales variation"
      }
      {
        type: "comment"
        label: "description"
      }
      {
        type: "bullet"
        label: "sales/stocks"
        value: "units"
        target: "stock"
      }
      {
        type: "link"
        linkType: "external"
        url: "manual"
        label: "Manual Info"
      }
      {
        type: "image"
        linkType: "asset"
        label: "images"
      }
    ]
  }
]

Here we go! 🎉

tablechart image

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 Tablechart with label and value

Image of chart

Image of chart

Data structure

name of the domain : main_country

| country     | imdb_score | gross | budget | comment               |
|-------------|------------|-------|--------|-----------------------|
| Canada      | 5.8        | 10    | 15     | This is a comment ... |
| France      | 6.2        | 40    | 34     | This is a comment ... |
| Japan       | 7.4        | 324   | 763    | This is a comment ... |
| Mexico      | 9.1        | 3     | 7      | This is a comment ... |
| UK          | 7.3        | 92    | 32     | This is a comment ... |
| USA         | 8.3        | 79    | 84     | This is a comment ... |
| Greece      | 4.5        | 4     | 5      | This is a comment ... |
| South Korea | 6.4        | 0     | 4      | This is a comment ... |

Configuration

{
   title:'Simple tablechart with tag and value'
   level:3
   id: 12001
   parent_id: 120
   chartOptions:
     data:
       query:
         domain:'main_country'
     chartType: "tablechart"
     columns:[
       type: 'tag'
       label: 'country'
     ,
       type: 'value'
       label: 'imdb_score'
     ]
 }

Ex2: Simple Tablechart with tag, value and context

Image of chart

Image of chart

Data structure

name of the domain : main_country

| country     | imdb_score | gross | budget | comment               |
|-------------|------------|-------|--------|-----------------------|
| Canada      | 5.8        | 10    | 15     | This is a comment ... |
| France      | 6.2        | 40    | 34     | This is a comment ... |
| Japan       | 7.4        | 324   | 763    | This is a comment ... |
| Mexico      | 9.1        | 3     | 7      | This is a comment ... |
| UK          | 7.3        | 92    | 32     | This is a comment ... |
| USA         | 8.3        | 79    | 84     | This is a comment ... |
| Greece      | 4.5        | 4     | 5      | This is a comment ... |
| South Korea | 6.4        | 0     | 4      | This is a comment ... |

Configuration

{
   title:'Simple tablechart with tag, value and context'
   level:3
   id: 12002
   parent_id: 120
   chartOptions:
     data:
       query:
         domain:'main_country'
       # This is new!
       precision:
         imdb_score: '.1f'

     chartType: "tablechart"
     columns:[
       type: 'tag'
       label: 'country'
     ,
       type: 'value'
       label: 'imdb_score'
     ]
     # This is new!
     units:
       imdb_score:'/10'
 }

Ex3: Simple Tablechart with tag, value and sentiment

Image of chart

Image of chart

Data structure

name of the domain : main_country

| country     | imdb_score |
|-------------|------------|
| Canada      | 5.8        |
| France      | 6.2        |
| Japan       | 7.4        |
| Mexico      | 9.1        |
| UK          | 7.3        |
| USA         | 8.3        |
| Greece      | 4.5        |
| South Korea | 6.4        |

Configuration

{
   title:'Simple tablechart with tag, value and context'
   level:3
   id: 12002
   parent_id: 120
   chartOptions:
     data:
       query:
         domain:'main_country'
       # This is new!
       precision:
         imdb_score: '.1f'

     chartType: "tablechart"
     columns:[
       type: 'tag'
       label: 'country'
     ,
       type: 'value'
       label: 'imdb_score'
     ]
     # This is new!
     units:
       imdb_score:'/10'
 }

Ex4: Simple Tablechart with tag, value and uniforms labels

Image of chart

Image of chart

Data structure

name of the domain : main_country

| country     | imdb_score |
|-------------|------------|
| Canada      | 5.8        |
| France      | 6.2        |
| Japan       | 7.4        |
| Mexico      | 9.1        |
| UK          | 7.3        |
| USA         | 8.3        |
| Greece      | 4.5        |
| South Korea | 6.4        |

Configuration

{
   title:'Simple tablechart with tag, value and uniformColorLabels'
   level:3
   id: 120022
   parent_id: 120
   chartOptions:
     data:
       query:
         domain:'main_country'

     chartType: "tablechart"
     columns:[
       type: 'tag'
       label: 'country'
       # This is new
       uniformColor: true
     ,
       type: 'value'
       label: 'imdb_score'
     ]
 }

Ex5: Simple Tablechart with tag and variation

Image of chart

Image of chart

Data structure

name of the domain : main_country

| country     | profits.   |
|-------------|------------|
| Canada      | 5.8        |
| France      | 6.2        |
| Japan       | 7.4        |
| Mexico      | 9.1        |
| UK          | 7.3        |
| USA         | 8.3        |
| Greece      | 4.5        |
| South Korea | 6.4        |

Configuration

{
   title:'Simple tablechart with tag and variation'
   level:3
   id: 12003
   parent_id: 120
   chartOptions:
     data:
       query:
         domain:'main_country'
     chartType: "tablechart"
     columns:[
       type: 'tag'
       label: 'country'
     ,
       type: 'variation'
       label: 'profits'
     ]
 }

Ex6: Simple Tablechart with tag and bullet-chart

Image of chart

Image of chart

Data structure

name of the domain : main_country

| country     | imdb_score | gross | budget |
|-------------|------------|-------|--------|
| Canada      | 5.8        | 10    | 15     |
| France      | 6.2        | 40    | 34     |
| Japan       | 7.4        | 324   | 763    |
| Mexico      | 9.1        | 3     | 7      |
| UK          | 7.3        | 92    | 32     |
| USA         | 8.3        | 79    | 84     |
| Greece      | 4.5        | 4     | 5      |
| South Korea | 6.4        | 0     | 4      |

Configuration

{
   title:'Simple tablechart with tag and bullet-chart'
   level:3
   id: 12004
   parent_id: 120
   chartOptions:
     data:
       query:[
         $match:
           domain:'main_country'
       ]
     chartType: "tablechart"
     columns:[
       type: 'tag'
       label: 'country'
     ,
       type: 'bullet'
       label: 'Revenue vs budget'
       value:'gross'
       target:'budget'
     ]
 }

Ex7: Simple Tablechart with tag, bullet-chart and commonScale

Image of chart

Image of chart

Data structure

name of the domain : main_country

| country     | imdb_score | gross | budget |
|-------------|------------|-------|--------|
| Canada      | 5.8        | 10    | 15     |
| France      | 6.2        | 40    | 34     |
| Japan       | 7.4        | 324   | 763    |
| Mexico      | 9.1        | 3     | 7      |
| UK          | 7.3        | 92    | 32     |
| USA         | 8.3        | 79    | 84     |
| Greece      | 4.5        | 4     | 5      |
| South Korea | 6.4        | 0     | 4      |

Configuration

{
   title:'Simple tablechart with tag and bullet-chart and commonScale'
   level:3
   id: 120041
   parent_id: 120
   chartOptions:
     data:
       query:[
         $match:
           domain:'main_country'
       ]
     chartType: "tablechart"
     columns:[
       type: 'tag'
       label: 'country'
     ,
       type: 'bullet'
       label: 'Revenue vs budget'
       value:'gross'
       target:'budget'
       # This is new!
       commonScale: true
     ]
 }

Ex8: Simple Tablechart with tag and comment

Image of chart

Image of chart

Data structure

name of the domain : main_country

| country     | comment               |
|-------------|-----------------------|
| Canada      | This is a comment ... |
| France      | This is a comment ... |
| Japan       | This is a comment ... |
| Mexico      | This is a comment ... |
| UK          | This is a comment ... |
| USA         | This is a comment ... |
| Greece      | This is a comment ... |
| South Korea | This is a comment ... |

Configuration

{
   title:'Simple tablechart with tag and comment'
   level:3
   id: 12005
   parent_id: 120
   chartOptions:
     data:
       query:[
         $match:
           domain:'main_country'
       ]
     chartType: "tablechart"
     columns:[
       type: 'tag'
       label: 'country'
     ,
       type: 'comment'
       label: 'comment'
     ]
 }

Ex9: Simple Tablechart with multiple columns

Image of chart

Image of chart

Data structure

name of the domain : main_country

| country     | imdb_score | gross | budget | comment               |
|-------------|------------|-------|--------|-----------------------|
| Canada      | 5.8        | 10    | 15     | This is a comment ... |
| France      | 6.2        | 40    | 34     | This is a comment ... |
| Japan       | 7.4        | 324   | 763    | This is a comment ... |
| Mexico      | 9.1        | 3     | 7      | This is a comment ... |
| UK          | 7.3        | 92    | 32     | This is a comment ... |
| USA         | 8.3        | 79    | 84     | This is a comment ... |
| Greece      | 4.5        | 4     | 5      | This is a comment ... |
| South Korea | 6.4        | 0     | 4      | This is a comment ... |

Configuration

{
   title:'Tablechart with multiple columns'
   level:3
   id: 12008
   parent_id: 120
   chartOptions:
     data:
       query:[
         $match:
           domain:'main_country'
       ,
         $addFields:
           profits: $subtract: ['$gross','$budget']
       ]
     chartType: "tablechart"
     columns:[
       type: 'tag'
       label: 'country'
     ,
       type: 'value'
       label: 'imdb_score'
     ,
       type: 'variation'
       label: 'profits'
     ,
       type: 'bullet'
       label: 'Revenue vs budget'
       value:'gross'
       target:'budget'
       commonScale: true
     ,
       type: 'comment'
       label: 'comment'
     ]
 }

Ex10: Simple Tablechart with multiple columns o/w some fixed

Image of chart

Image of chart

Data structure

name of the domain : main_country

| country     | imdb_score | gross | budget | comment               |
|-------------|------------|-------|--------|-----------------------|
| Canada      | 5.8        | 10    | 15     | This is a comment ... |
| France      | 6.2        | 40    | 34     | This is a comment ... |
| Japan       | 7.4        | 324   | 763    | This is a comment ... |
| Mexico      | 9.1        | 3     | 7      | This is a comment ... |
| UK          | 7.3        | 92    | 32     | This is a comment ... |
| USA         | 8.3        | 79    | 84     | This is a comment ... |
| Greece      | 4.5        | 4     | 5      | This is a comment ... |
| South Korea | 6.4        | 0     | 4      | This is a comment ... |

Configuration

{
   title:'Tablechart with multiple columns and fixed columns'
   level:3
   id: 12009
   parent_id: 120
   chartOptions:
     data:
       query:[
         $match:
           domain:'main_country'
       ,
         $addFields:
           profits: $subtract: ['$gross','$budget']
       ]
     chartType: "tablechart"
     columns:[
       type: 'tag'
       label: 'country'
       fixed: true
     ,
       type: 'value'
       label: 'imdb_score'
     ,
       type: 'variation'
       label: 'profits'
     ,
       type: 'bullet'
       label: 'Revenue vs budget'
       value:'gross'
       target:'budget'
       commonScale: true
     ,
       type: 'comment'
       label: 'comment'
     ,
       type: 'comment'
       label: 'comment'
     ,
       type: 'comment'
       label: 'comment'
     ,
       type: 'comment'
       label: 'comment'
     ]
 }

Ex11: Simple Tablechart with multiple columns and custom column width

Image of chart

Image of chart

Data structure

name of the domain : main_country

| country     | imdb_score | gross | budget | comment               |
|-------------|------------|-------|--------|-----------------------|
| Canada      | 5.8        | 10    | 15     | This is a comment ... |
| France      | 6.2        | 40    | 34     | This is a comment ... |
| Japan       | 7.4        | 324   | 763    | This is a comment ... |
| Mexico      | 9.1        | 3     | 7      | This is a comment ... |
| UK          | 7.3        | 92    | 32     | This is a comment ... |
| USA         | 8.3        | 79    | 84     | This is a comment ... |
| Greece      | 4.5        | 4     | 5      | This is a comment ... |
| South Korea | 6.4        | 0     | 4      | This is a comment ... |

Configuration

{
   title:'Tablechart with multiple columns and custom width'
   level:3
   id: 12010
   parent_id: 120
   chartOptions:
     data:
       query:[
         $match:
           domain:'main_country'
       ,
         $addFields:
           profits: $subtract: ['$gross','$budget']
       ]
     chartType: "tablechart"
     columns:[
       type: 'tag'
       label: 'country'
       fixed: true
     ,
       type: 'value'
       label: 'imdb_score'
     ,
       type: 'variation'
       label: 'profits'
     ,
       type: 'bullet'
       label: 'Revenue vs budget'
       value:'gross'
       target:'budget'
       commonScale: true
     ,
       type: 'comment'
       label: 'comment'
       # This is new!
       width: 1000
     ]
 }

Ex12: Simple Tablechart with linkTo on column “country”

Data structure

name of the domain : main_country

| country     | imdb_score | gross | budget | comment               | budget_detail_url         |
|-------------|------------|-------|--------|-----------------------|  https://budget_detail.io |
| Canada      | 5.8        | 10    | 15     | This is a comment ... |  https://budget_detail.io |
| France      | 6.2        | 40    | 34     | This is a comment ... |  https://budget_detail.io |
| Japan       | 7.4        | 324   | 763    | This is a comment ... |  https://budget_detail.io |
| Mexico      | 9.1        | 3     | 7      | This is a comment ... |  https://budget_detail.io |
| UK          | 7.3        | 92    | 32     | This is a comment ... |  https://budget_detail.io |
| USA         | 8.3        | 79    | 84     | This is a comment ... |  https://budget_detail.io |
| Greece      | 4.5        | 4     | 5      | This is a comment ... |  https://budget_detail.io |
| South Korea | 6.4        | 0     | 4      | This is a comment ... |  https://budget_detail.io |

Configuration

{
   title:'Tablechart with multiple columns and a linkTo '
   level:3
   id: 12011
   parent_id: 120
   chartOptions:
     data:
       query:[
         $match:
           domain:'main_country'
       ,
         $addFields:
           profits: $subtract: ['$gross','$budget']
       ]
     chartType: "tablechart"
     columns:[
       type: 'link'
       linkType: 'external'
       label: 'country'
       url:'budget_detail_url'
       fixed: true
     ,
       type: 'value'
       label: 'imdb_score'
     ,
       type: 'variation'
       label: 'profits'
     ,
       type: 'bullet'
       label: 'Revenue vs budget'
       value:'gross'
       target:'budget'
       commonScale: true
     ,
       type: 'comment'
       label: 'comment'
       # This is new!
       width: 1000
     ]
 }

Ex13: Simple Tablechart with packs on “region”

Data structure

name of the domain : main_country

| country     | imdb_score | gross | budget | comment               | budget_detail_url         | region  |
|-------------|------------|-------|--------|-----------------------| --------------------------|---------|
| Canada      | 5.8        | 10    | 15     | This is a comment ... |  https://budget_detail.io | America |
| France      | 6.2        | 40    | 34     | This is a comment ... |  https://budget_detail.io | Europe  |
| Japan       | 7.4        | 324   | 763    | This is a comment ... |  https://budget_detail.io | Asia    |
| Mexico      | 9.1        | 3     | 7      | This is a comment ... |  https://budget_detail.io | America |
| UK          | 7.3        | 92    | 32     | This is a comment ... |  https://budget_detail.io | Europe  |
| USA         | 8.3        | 79    | 84     | This is a comment ... |  https://budget_detail.io | America |
| Greece      | 4.5        | 4     | 5      | This is a comment ... |  https://budget_detail.io | Europe  |
| South Korea | 6.4        | 0     | 4      | This is a comment ... |  https://budget_detail.io | Asia    |

Configuration

{
   title:'Tablechart with multiple columns and packs'
   level:3
   id: 12012
   parent_id: 120
   chartOptions:
     data:
       query:[
         $match:
           domain:'main_country'
       ,
         $addFields:
           profits: $subtract: ['$gross','$budget']
       ]
     chartType: "tablechart"
     packs:'region'
     columns:[
       type: 'tag'
       label: 'country'
       fixed: true
     ,
       type: 'value'
       label: 'imdb_score'
     ,
       type: 'variation'
       label: 'profits'
     ,
       type: 'bullet'
       label: 'Revenue vs budget'
       value:'gross'
       target:'budget'
       commonScale: true
     ,
       type: 'comment'
       label: 'comment'
       # This is new!
       width: 1000
     ]
 }