How to :: have multiple charts in one story

double charts

double charts

Double charts

When configuring a slide it is possible to insert two charts on the same story. From an existing story, go to the Edit menu and Add a chart.

Then create your second chart!

The charts you’ll be creating are not “connected” to each other, they will be displaying seperate information with no common interaction, except filters if you decided to.

double charts

double charts

📖 Learn More about the double charts from the code mode with this tutorial.

Master slave

When configuring a story, you can instert two charts on the same story that will be acting together. The upper chart will command the second chart and act like a filter. We call it “master slave”.

📝 In the example below, as I navigate through the months on the line chart, the bar chart beneath will update its value based on selected month.
master slave

master slave

See one live example here

Step 1: Create a double chart story

Start by creating your 2 charts without thinking about connecting them yet.

📝 For example, I want to see the evolution of the percentage of returning customers among the months, but I’d also have the breakdown for stores and web.

So I need to create 2 charts:

  • a line chart with the total percentage of returning customers
  • a bar charts with the percentage of returning customers for stores and online
master slave

master slave

Step 2: Crossfilter

Once my charts are created, I need to define what is “linking” them.

📝 In our example, as I navigate through the month, I want the bar chart to be updated with the selected month values. So if I go to May, I want to see the breakdown of stores and web for the month of May.
  • You have now define that the line chart is the master chart and the bar chart is the slave chart
  • The master chart will crossfilter the slave chart, and your whole story will be customized to your user need
  • The date is what the slave chart will be filter on

Go edit your master chart and from the chart parameters menu, you can define a crossfilter parameter.

This optional parameter has two mandatory keys:

  • on : the name of the column on wich the filter will apply. It should be in both charts data source. 📝 In our example above, the crossfilter would be on a colonne containing the date.
  • datasets : the name of the other chart’s dataset. 📝 In our example above, I would use the name of the bar chart dataset. Usually my_dataset_1.
Trouble finding your dataset name?

You can find the names of your available datasets in the tabs from the edition menu

dataset names

dataset names

Available charts for master slave

Note

All charts can be used as slave charts but only some of them (listed below) as master.

The following charts can be used as master:

  • barandlinechart , linechart : The current selected date is used to filter, see below for more info on dates crossfitler.

  • carto : The value used for the filtering will be the value of the join configuration key in the selected data object.

  • barchart : The value used for the filtering will be the value of the label configuration key in the selected data object.

  • heatmap : The value used for the filtering will be the concatenation with _ in between of the x and y configuration keys in the selected data object, eg X_Y If the selected value has this data underneath

    x y value
    France Shoes 1

It will filter the second chart with France_Shoes.

Crossfilter on dates

Tip

Dates format can be tricky. So here’s some advice.

Make sure to define the format of your date column in both datasets, master and slave.

Switch the to code mode and add a block of data defining the format of your date column.

This date/selector parameters transforms your date column into a date format type of data.

🚨 So make sure to do the same on your slave dataset. Also, your date column should have the same name. 🚨

  • selector: contain the name of your date column
  • format: contains the format your date. It describe how the date is displayed in your dataset. Find here accepted formats.

You should have something like this in your datasets block:

datasets:
  'my_dataset':
    date:
      selector:'date'
      format: '%Y-%m-%d'
    query:
      domain: 'my_master_dataset`
  'my_dataset_1':
    date:
      selector:'date'
      format: '%Y-%m-%d'
    query:
      domain: 'my_slave_dataset`

Step 3: Chart size

When having 2 charts at the same time, you might want to display one smaller than the other. By default, both charts will vertically occupy half of the screen height. But you might want to have the top chart smaller.

You can use the size optional parameter for this.

You can specify a size for each chart. Make sure size of the two charts does not exceed 1.

If you need to set a different ratio for mobile displays, use the mobileSize option (if there is no mobileSize option, the size option will also be used for mobile).

Filter on multiple charts

Switch the to code mode and look for your filters block.

When you have more than one chart in a story, you can decide if it will filters on one or both charts.

For each filter, in the datasets block, list the datasets you want to filter. Seperate them by ,.

🚨 Make sure the column your filtering on exists in both datasets. Also, it should have the same name. 🚨

filters:
  "bottom-right":
    on: "breakdown"
    type: "buttons"
    datasets: ["my_dataset","my_dataset_1"]