How to :: Have Multiple Charts in One Story¶
When configuring a slide it is possible to insert two charts into 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 so desired.
📖 Learn More about double charts in code mode with this tutorial.
When configuring a story, you can instert two charts into the same story that are dependent on one another. The upper chart will affect the second chart, acting like a filter. We call it a “master slave”.
📝 As I navigate through the months on the line chart in the example below, the bar chart beneath will update its value based on the selected month.
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 chart with the percentage of returning customers for stores and online
Step 2: Crossfilter¶
Once my charts are created, I need to define what is “linking” them.
📝 As I navigate through the month in our example, I want the bar chart to be updated with the selected month, so if I go to May, I want to see the breakdown of stores and web for the month of May.
- You have now defined 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 needs as a user
- The date is what the slave chart will be filtered on
Go into edit mode for 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 which the filter will be applied. It should be in both charts’ data sources. 📝 In our example above, the crossfilter would be on a column 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
You can find the names of your available datasets in the tabs in the edit menu
Available Charts for Master Slave¶
All charts can be used as slave charts but only those listed below can be used as master charts.
The following charts can be used as master:
linechart: The current selected date is used as a filter, see below for more info on the dates crossfilter.
barchart: The value used for filtering will be the value of the
labelconfiguration key in the selected data object.
heatmap: The value used for filtering will be the concatenation of
_in between the
yconfiguration keys in the selected data object, eg
X_YIf the selected value has something like the following:
x y value France Shoes 1
It will filter the second chart with
Crossfilter on Dates¶
Date formats can be tricky. So here’s some advice.
Make sure to define the format of your date column in both the master and slave datasets.
Switch to code mode and add a block of data defining the format of your date column.
date/selector parameter transforms your date column into a date
format data type.
🚨 Make sure to do the same on your slave dataset. Also, your date column should have the same name. 🚨
selector:contains the name of your date column
format:contains the your date format. It describe how the date is displayed in your dataset. Find here accepted formats.
You should have something like this in your
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 as smaller than the other. By default, both charts will occupy half of the screen height but you might want to make 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 to code mode and look for your
When you have more than one chart in a story, you can decide if it filters on one or both charts.
For each filter, in the
datasets block, list the datasets you want
to filter. Seperate them with a
🚨 Make sure the column you’re 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"]