Tablechart
Purpose & Application
Very useful when you have a lot of different metrics and dimensions to present all together. Indeed, use it to display a mix of quantitative and qualitative information.
📝 For example, I want to see detailed information about my products : reference, images, sold units on stocks, instagram posts etc…
I am a business manager, and I need to sum up all the information regarding my business in 1 chart.
I will use Toucan Toco’s upgraded version of a tablechart with :
performance tags on values
images
clickable url links
bulletchart
colored tags
readable text
Key features
What makes this chart a killer story?
Images: to illustrate your data with a picture 🖼️! An image worth a thousand words.
As a marketing manager, I want to see an image of the packaging of the products presented in my performance review in the tablechart.
Url links: to go further in the analysis 🌐. They will take you anywhere : in another website or to another chart in the Toucan application.
As a social media manager, I have a review containing the 10 most liked post on instagram. I want to click on the post link to be redirected to instagram and see/read the post.
Tags: to categorize the data and related information.
As a social media manager, I want to easily see the posts by social media. Hopefully, the colored tags help me to see which ones are from instagram, facebook and twitter.
Integrated bulletchart: to get a better vision of the realised vs target figures 🎯.
As a social media manager, I want to monitor the total reach vs what was expected.
Compatible and optimised mobile display, read your chart from anywhere!
I just arrived in London, I’m in the cab, I can check my data one last time before the meeting.
Configuration
* Mandatory paramers
| Section | Option | Configuration tutorial |
|---|---|---|
Dataset* | Select the dataset used by the chart | |
Columns* | ||
Display | Rows Per Page | Allows to increase numbers of rows for each page |
Display | Row Color Coding | Apply a color on the full row based on data column |
Display | Row Height | In px. Determine the height of rows |
Display | Hide Headers | Hide the headers of the table |
Display | Hide Search | Remove the possibility to search on unique values |
Display | Make First Column Sticky | Make the first column sticky when we scroll horizontally |
Display | Size | Define the chart size when having multiple ones |
Display | Mobile Size | Define the chart size when having multiple ones on mobile |
Display | Compact Rows | Display the rows with a decrease height in order to optimize display. It also compact tags & images |
Display | Total Rows | Display a new row that sum columns based on the data type. On numbers, Toucan makes a "sum", on other types, Toucan makes a "count". |
Display | Custom CSS Class | Set a custom CSS class to target this specific chart with CSS |
Tutorial | Tutorial | Set a tutorial to help your users to understand the chart by giving him an id and a message |
Tag
This column type is like a label since each value has a given color. This makes it a great way to visually see patterns and commonalities.
| Option | Description |
|---|---|
Tag Text | Select the column containing the text to display |
Tag Color | Select a column containing values that groups label together. They will be segregated by groups with different series colors. |
Column Width | In px. Determine the width of the column. |
Date Format | Customize date format when your "Tag text" is a Date. |
Use Uniform Color | Deactivate color affectation on tags. Will result with neutral (grey) color. |
Group | Display the column as a sub-column in a groups of columns. |
Value
This column type is perfect to display numbers.
Tip
Always add precision to have a perfect display!
| Option | Description |
|---|---|
Value | Select the column containing the value to display |
Variation | Select the column containing a meaningful variation (ex: evolution vs. N-1) |
Value alignement | Determine whether to align the value on the left, on the center or the right. By default, it's centered. |
Column Width | In px. Determine the width of the column. |
Display Sentiment | Display the sentiment on the figure if one is configured on the "value" field. |
Sentiment Display Type | Choose whether if the sentiment is displayed on the text or on the cell. On the text by default. |
Group | Display the column as a sub-column in a groups of columns. |
Variation
This column type is perfect to display an evolution.
| Option | Description |
|---|---|
Variation | Select the column containing a meaningful variation (ex: evolution vs. N-1) |
Variation alignement | Determine whether to align the value on the left, on the center or the right. By default, it's centered. |
Column Width | In px. Determine the width of the column. |
Group | Display the column as a sub-column in a groups of columns. |
Comment
This column type is perfect to display long text.
Note
By default, Toucan will place quotes around the comment. In this case, we’ll remove the comments by making sure the ADD QUOTES option is turned off.
| Option | Description |
|---|---|
Text | Select the column containing the text to display. |
Text alignement | Determine whether to align the value on the left, on the center or the right. By default, it's centered. |
Column Width | In px. Determine the width of the column. |
Add quotes | If turned off, quotes will disppear. |
Group | Display the column as a sub-column in a groups of columns. |
Bullet
This column type is useful to display objectives with target within a tablechart.
| Option | Description |
|---|---|
Value | Select the column containing the value to display |
Target | Select the column containing the target to reach |
Column Header | Fill the table column header with text. |
Overwrite Automatic Sentiment | Select the column to override the default sentiment rules (value over target) |
Use Same Scale for All Bars | Enable to use the same scale across all bars within the tablechart. False by default. |
Group | Display the column as a sub-column in a groups of columns. |
Link
This column type is useful to display and format URLs for interactive tablechart.
| Option | Description |
|---|---|
URL | Select the column containing URLs |
Link Name | Select the column containing a meaningful text for the given URLs |
Text alignement | Determine whether to align the text on the left, on the center or the right. By default, it's centered. |
Column Width | In px. Determine the width of the column. |
Group | Display the column as a sub-column in a groups of columns. |
Image
This column type is useful to display images within the tablechart.
| Option | Description |
|---|---|
Image | Select the column containing image path (either a URL or name of the asset in Toucan) |
Image type | Select the type according to the image you want to display. "Asset" is an image hosted in Toucan and "External" is an image hosted on the web, accessible with an URL. |
Image Size | Select the display size between "small", "medium" and "large. "Small" by default. |
Column Width | In px. Determine the width of the column. |
Group | Display the column as a sub-column in a groups of columns. |
Last updated