Connect a chart/story/tile to data

A simple query

The simpliest way to connect data to your chart/story/tile is to link the good data source to your chart.

To request the data, two ways are possible :

  • with the studio
  • with the front_config.cson file for stories and dashboard.cson for tiles on the dashboard.

Tutorial : Product Corporation

Solution 1 (using Studio) : From a story in staging mode:

  • Hit the edit button (pencil) of the story
  • Hover the chart you want to edit, then hit the edit button (pencil)
  • Select Data request editor instead of Chart parameters
  • Write in the editor the name of the data sources through its domain name.
  • Click on the Run request button or use Ctrl+Enter to refresh the data. You can finish the conception of the chart (in the Chart parameters) by linking the fields with the correct columns names.
  • Save changes. You new story is ready!

Solution 2 (using config files) :

  • Click on the FILES menu option.

  • Download the front_config.cson as Staging file.

  • Add your conception block of the front_config.cson

     {
       level: 3
       title : "My first story"
       id: 1000
       datasets:
     my_dataset:
       query:
         domain: 'data-product-corpo'
       charts: [
      dataset: 'my_dataset'
      chartType: "horizontal-barchart"
      value:
      label:
    ]
     }
    
  • Complete the configuration by adding the correct column in your dataset corresponding to the different options of your block. Example : If Turnover is the value column and Store is the label

    {
      level: 3
      title : "My first story"
      id: 1000
      datasets:
    my_dataset:
      query:
        domain: 'data-product-corpo'
      charts: [
     dataset: 'my_dataset'
     chartType: "horizontal-barchart"
     value: 'Turnover'
     label: 'Store'
    }
    

Use the datastore explorer

The datastore explore enables exploring data of your app. You have access to the list of the existing domains.

Open the datastore explorer

Open the datastore explorer

Where ?

In the staging stage, click on edit in the dashboard, the datastore explorer is accessible by a upper right button Open the datastore explorer

What ?

For each domain you can see :

  • the shape of the data (number of lines and columns)
  • the input data sources used to create the domain
  • the date of last update
  • a table that opens a query builder related to that domain
  • a list of other actions possibles : - run specific preprocess of that domain - compute the indexes of that domain - release to production this table - download the data of that domain

Query builder

To open the query builder, click on the table icon of the domain that you want to explore.

You can test your queries: The left panel is used for writing the query and the right panel for the result of your query.

If the request you want to play has an error, a warning in the left panel will appear explaining the error.

Data model for graphs

To feed a Toucan Toco graph, you need to know the following principles:

  • Each graph requires to have all the data coming from one single domain.
  • Each visual element of a graph (bar, circle, point, square) has to take all its data from a single row.
  • Filters are applied to rows and not columns.

On the other hand, data required to feed a Toucan Toco graph:

  • Doesn’t require data to have a specific set of columns names, but the columns names are referenced in the graph chartOption front_config.
  • Data precision can be configured through the front_config.
  • Data units can be specified depending on the graph from the front_config.
  • Color encodings are handled by the front config.

Data columns can be divided in different types depending on their usage:

  • LABEL : Used to tag the visual elements.
  • FILTERS : Used to select a subset of the data.
  • METRICS: (V, V-1, Evolution, Target)

Imagine you have a chart with :

  • a list of shops
  • one filter CA/Inventory
  • one requester for the date (2018, Juillet 2018)

You will need in your dataset a line by shop, by date and by filter value :

SHOP FILTER METRIC DATE
Shop A INVENTORY 1200 2018
Shop A CA 4000 2018
Shop A INVENTORY 50 Juillet 2018
Shop A CA 500 Juillet 2018
Shop B INVENTORY 4000 2018
Shop B CA 80 000 2018
Shop B INVENTORY 120 Juillet 2018
Shop B CA 2000 Juillet 2018