Toucan 3.0
YouPrep documentationHelp centerGet a demo
  • Welcome
    • 👋Welcome to Toucan
    • ⚙️Technical resources
      • ⚙️Toucan stack
      • Setup mode
        • Toucan SaaS mode
      • ⚙️Security
        • Application Security
        • Source Code Quality
        • Global Security Practices
        • Security of Docker Images
  • TUTORIALS
    • 📊Getting Started : Embedded Analytics
    • 🤓Advanced tutorials
      • Embedding a story with user attributes
        • Dynamic filter with user attributes
        • Dynamic Tables
        • Dynamic Database
        • Dynamic Host
      • Using the HTTP API connector in advanced use cases
      • Using advanced syntax for SQL queries
      • Merging filters with our tool
      • Deep customization chart (CSS)
        • Homepage customization
        • Chart customization
        • Dashboard customization
  • Data Management
    • 🧮Overview of Data In Toucan
    • 📡Datasources in Toucan
      • 🔌Managing Connectors
        • 🔌Creating, editing and deleting a connector
        • 🔌Set up OAuth2 credentials for your platform
        • 🔌Setting up a connector
          • 🔌Generic Connectors
            • 🔌Setting up an HTTP API connector
            • 🔌Setting up an ODBC Connector
          • 🔌Database and data warehouse Connectors
            • 🔌Setting up an AWS Redshift Connector
            • 🔌Setting up a Snowflake Connector
            • 🔌Setting up a PostgreSQL Connector
            • 🔌Setting up a Google Big Query Connector
            • 🔌Setting up an AWS Athena connector
            • 🔌Setting up a MySQL connector
            • 🔌Setting up a MongoDB connector
            • 🔌Setting up a Microsoft SQL Server connector
            • 🔌Setting up an Azure SQL connector
            • 🔌Setting a Databricks Connector
            • 🔌Setting up a ElasticSearch Connector
            • 🔌Setting up a Clickhouse Connector
          • 🔌Online services connectors
            • 🔌Setting up a Sharepoint Connector
            • 🔌Setting up a Google Sheets Connector
            • 🔌Setting up a Salesforce Connector
            • 🔌Setting up a Hubspot Connector
          • 🔌Setting up an AWS S3 connector
      • 🗄️Managing remote file storages
        • 🗂️Setting up a file storage
          • SFTP
        • 📄Create a dataset from a file
      • 📁Managing Files
        • 📁Adding, editing and deleting local files
        • 📂Using advanced file settings
        • 📁Adding and combining remote files in Toucan
    • 🔢Datasets in Toucan
      • 🔢Stored and Live Datasets
      • 💿Managing datasets
        • 🔢Creating datasets
        • 🔢Editing, Duplicating and Deleting a dataset
        • 🔢Refreshing and Publishing Datasets
        • 📈Optimize data performance
        • 🗂️Adding indexes to stored datasets
        • 👩‍💻Code mode and single mode
      • 🛑Setting permissions on dataset
      • 🗃️Maintaining Data
        • 🗃️Tagging datasets
        • 🗃️Identifying datasets dependencies
        • 🗃️Set validation rules
    • 🧑‍🍳Preparing data
      • Overview of YouPrep™
        • 🎹Column header
          • Rename column
          • Duplicate column
          • Fill null values
          • Replace values
          • Sort values
          • Convert columns data types
        • Add
          • Add text column
          • Add formula column
          • Add conditional column
        • Filter
          • Delete columns
          • Keep columns
          • Filter rows
          • Top N rows
          • ArgMax
          • ArgMin
        • Aggregate
          • Group by
          • Add total rows
          • Hierarchical rollup
          • Get unique groups/values
        • Compute
          • Compute evolution
          • Cumulated sum
          • Percentage of total
          • Rank
          • Moving average
          • Compute statistics
          • Absolute value
        • Text
          • Concatenate
          • Split column
          • Extract substring
          • To lowercase
          • To uppercase
          • Compare text columns
          • Trim spaces
          • Replace text
        • Date
          • Convert text to date
          • Convert date to text
          • Extract date information
          • Add missing dates
          • Compute duration
          • Normalize date granularity
        • Reshape
          • Pivot
          • Unpivot
          • Waterfall
        • Combine
          • Append datasets
          • Join datasets
        • Geo
          • Geographic dissolve
          • Geographic hierarchy
          • Geographic simplify
          • Prepare geo data (with basemap)
      • YouPrep™ Native SQL
      • Hybrid pipeline
    • ➿Managing variables in Toucan
      • ➿Variables hub
      • ♈Use variables in YouPrep™
      • ➿Easy reference to variables
    • 🧞Using advanced data concepts
      • 🧞Data personnalisation with user attributes
        • Connector setup with a user attribute
        • Database selection with a user attribute
        • YouPrep data filtering with a user attribute
        • Filter data in SQL with a user attribute
      • 🧞Advanced syntax for variables
      • 🧞Data cache
  • Visualizations and Layouts
    • 📺Apps
      • 📺Managing Apps
        • ➕Creating Apps
        • 📄Duplicating Apps
        • 🖨️Publishing Apps
        • 🚮Deleting Apps
        • ✍️Editing within an App
      • 🖌️Customizing Apps
        • Customizing chart color elements
        • Customizing the app's font
        • Adding Assets
        • Adding Glossary
        • Setting up, Managing and testing custom visibilities
        • Customizing the "no data error" message
        • Creating a dynamic background based on an Filter's column
      • 🏠Home
        • Creating the Home
        • Creating Tiles
          • Tile Dynamic Value
          • Tile Leaderboard
          • Tile Line
          • Tile Scorecard
          • Tile Bullet
          • Tile Heatmap
          • Tile PDF
          • Tile Video
          • Tile Image
          • Tile Text
          • Tile HTML
          • Tile Separator
      • ✨Stories
        • Creating a Story
        • KPIs
        • Narrative
        • Crossfilter
      • 📽️Filters
        • Managing Filters
          • Creating, reusing and editing Filters
          • Applying Filters
          • Unpinning and deleting Filters
        • Type of Filters
          • Dropdown
          • Checkboxes
          • Buttons
          • Date Range
          • Hierarchical
          • Slider
        • Templating from Filters' values
        • Dependant Filters
      • 📈PDF Report
      • 🎡Datawall
      • 🏗️Dashboard Builder
        • Create a Dashboard Builder
        • Embed a Dashboard Builder
        • Dashboard export options
      • 🌟MyFavorites
    • 📊Creating Visualizations
      • 🤩Viz Gallery
        • ✨New Viz Designs
          • Barchart
          • Barlinechart
          • Bubblechart
          • Circularchart
          • Heatmap
          • Leaderboard
          • Linechart
          • Stacked Barchart
          • Tablechart
        • 📁Legacy Viz Designs
          • Bulletchart
          • Funnelchart
          • Gantt chart
          • HTML
          • Leaderboard Centered Average
          • Mapchart
            • Configure a drill
          • Mediachart
          • Radarchart
          • Timeline
          • Versuschart
          • Waterfallchart
          • Score Card
      • 🧠Common Chart Configuration
      • 💅Customizing chart colors
      • 🧞‍♂️Advanced chart configuration
        • Templating from chart's dataset
        • Add units, precisions and sentiments
        • Adding Tutorials
        • Add sparklines
        • Navigate with stories
        • Group informations in your stories
        • Multiple charts in one story
        • Manage dates
        • Customize tiles' sources
        • Add stars to tiles' title
        • Manage data order in your tiles
        • Navigate with tiles
    • 👩‍💻Embedding
      • 🔐Authentication
      • 🖇️Integration
        • Generate and manage embeds
        • Customize embeds
        • Embedding a Toucan App Using iFrames
        • Passing Extra Variables to Your Toucan Embed
      • ⚙️Embed SDK
        • Embed SDK Authentication
      • ❓FAQ
    • 🙋Self-Service
      • Self-Service Dashboard
        • The embedded Self-Service Dashboard
        • The in-platform Self-Service Dashboard
      • Self-service PDF Report
  • Collaboration
    • ⏰Creating alerts
    • 📧Managing notifications
    • ➕Enriching a story with descriptions
    • 💌Sharing content
    • 💬Adding comments to stories
  • Administration
    • ⚙️Instance Management
      • ⚙️Managing operations in SaaS
      • ⚙️Customizing your instance (whitelabel)
    • 👥Managing Users
      • 👥Users
      • 👥Managing user groups
      • 👥Managing user properties
      • 👥Setting up permissions and visibilities
    • 🌐Managing languages in Toucan (internationalisation)
    • 📈Monitoring Engagement with User Analytics
      • 🎛️How to Filter your User Analytics?
      • 🖥️Understanding your User Analytics Dashboards
  • Additional Ressources
    • 📚External documentation
    • 🚁Support for App-builders
    • 🆕Latest releases
      • 🎁2025 Releases
      • 🎁2024 Releases
      • 🎁2023 Releases
    • 🔧Troubleshooting
      • Troubleshoot:: DataHub
      • Cross-Site Cookies
      • How to :: read the inspector error
      • How to :: troubleshoot the toucan way
Powered by GitBook
On this page
  • Double charts¶
  • Crossfilter charts (ex master-slave)
  • Chart Size
  • Filter on Multiple Charts¶

Was this helpful?

  1. Visualizations and Layouts
  2. Creating Visualizations
  3. Advanced chart configuration

Multiple charts in one story

How to :: multiple charts in one story

Last updated 1 year ago

Was this helpful?

Double charts¶

When creating a story 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 separate information with no common interaction, except filters if so desired.

Crossfilter charts (ex master-slave)

When creating a story, you can insert 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 “crossfilter chart”.

📝 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 my revenue 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 revenue per month

  • a leaderboard with the revenue 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 leaderboard 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 will only need to set up the link option on your primary chart to cross filter your second chart

  • You have now defined that the line chart is the primary chart and the leaderboard is the filtered chart

  • The primary chart will crossfilter the filtered chart and your whole story will be customized to your users needs

  • The date is what the filtered chart will be filtered on

Hover on your first chart, the primary. Click on the link button to create the crossfilter.

  • on : the name of the column on which the filter will be applied. It should be in both charts dataset. 📝 In our example above, the crossfilter would be on a column containing the date.

  • datasets : the name of the filtered chart dataset. 📝 In our example above, I would use the name of the barchart dataset, usually my_dataset_1.

Trouble finding your dataset name?

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

dataset names

Available charts for primary charts

Note

All charts can be used as filtered charts but only those listed below can be used as primary charts.

The following charts can be used as primary:

  • barandlinechart , 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 label selected on the barchart

  • circularchartt : The value used for filtering will be the value of the label selected on the circularchart

  • stackedbarchart : The value used for filtering will be the value of the label selected on the stackedbarchart

  • mapchart : The value used for filtering will be the value of the label (zone or marker) selected on the mapchart

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

    x
    y
    value

    France

    Shoes

    1

It will filter the second chart with France_Shoes.

Crossfilter on Dates

Warning

Date formats can be tricky. So here’s some advice.

Make sure to define the same format of your date column in both the primary and filtered datasets.

Crossfilter on HKPI

Note

KPIs can be used with a crossfilter from the master chart. Just make sure you add your hkpi dataset in the crossfilter configuration.

Make sure to define the same format of your date column in both the primary and filtered datasets.

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 find the size parameters on your chart options (into the Advanced Optional Parameters category)

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 mobile size option (if there is no mobile size option, the size option will also be used for mobile).

Filter on Multiple Charts¶

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

For each filter, choose which dataset will be filtered.

📊
🧞‍♂️
displaying separate information with no common interaction
two charts into the same story that are dependent on one another
Multiple charts in one story
create 2 charts
create the crossfilter
find the names of your available datasets
choose which dataset will be filtered
Multiple charts in one story
find the names of your available datasets
choose which dataset will be filtered