Tablechart Tutorials

Step by step tutorial

Upload your data

To learn how to upload data into Toucan, check out this Tutorial.

Once the data has been setup, we can head over to the CHART tab.

Tablechart selection

Let’s pick Tablechart for our chart. You can set up different columns category:

tablechart_chart

Create a Tag column

Let’s add our first column!

Our first column is going to be a TAG type column that will visualize our REFERENCE column. Think of this column type like a label since each value is given a color. This makes it a great way to visually see patterns and commonalities.

tablechart_column

As you can see, we are building our TABLE CHART column by column.

Let’s add a second column by clicking the add column button. Our second column will also be a TAG TYPE column, but it will be visualizing our TYPE column instead.

tablchechart_column_option

Create a Value column

Our third column will be used to visualise our PRICE column. We’ll use a VALUE TYPE column to visualise this one.

tablechart_column3

Tip

Don’t forget to add precision! Otherwise, your value will round to a whole number. Here, I used the precision $,.02f to display the values like they are above. To learn more about precision and how to use it, check out this doc!

tablechart\_precision

tablechart_precision

Add a Variation column

Our fourth column will be a sales variation column. For this one, we’ll be using the column SALES VARIATION inside our dataset. We’ll use the VARIATION COLUMN TYPE.

Here, we’ll add a % as a unit to ensure that it is being displayed as a percentage.

tablechart_units

Add a Comment column

Our next column is a text column. We’ll use the DESCRIPTION column inside our dataset, and we’ll visualize it with a COMMENT TYPE column.

tablechart_column4

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.

tablechart\_quotes

tablechart_quotes

Add a Bullet column

Our next column will be used to visualize a target/goal, done so via a small BULLET CHART embedded inside each cell.

The column type for this is BULLET.

The VALUE input field is expecting the actual value we’re measuring. In this example, that can be found in the UNITS column.

The TARGET input field is expecting the goal. In this example, that data can be found in the STOCK column.

The COLUMN HEADER allows us to specify what we want this column to be called. This is value we type in. For this example, we’ll call this column “SALES / STOCK” .

Your screen should look like the screenshot below:

tablechart_edition

Add an Image column

Great! We’re almost done!

Our last column is going to contain an image.

Let’s create a new table chart column, and click on the IMAGE TYPE column.

There are two ways to bring in images to Toucan’s Table Charts. The first is by uploading into the ASSETS MENU (Bottom Menu –> THEME –> ASSETS) and hosting them there, or by having them hosted externally.

For this example, we are going to have the images hosted in the Assets panel. To learn how to upload / manage assets, please check out this documentation.

Once the asset is uploaded, we need to make sure that our column’s contents point to an asset’s name. In this case, we have an asset named “BG-1” and that is the content of our column.

When IMAGE TYPE is set to ASSET, Toucan will automatically try to match your column’s contents to an asset that lives within the application.

tablechart_asset

In this case, it worked like a charm!

tablechart_image

Perfect! Let’s save our changes, and we’re done! 🎉

This is how our table chart should look like:

tablechart_final

Advanced tutorial

Tablechart Sentiment

Follow this tutorial to learn how you can implement the type of sentiment as seen on the PRICE column above.

We need to first start by applying sentiment on the column itself. To learn how to add sentiment to a column, check out this tutorial.

Once you’ve applied sentiment on your column, you should see the values in your column now have colors assigned, much like this:

tablechart_sentiment

We now need to find that column in our table chart configuration on the left, and check the DISPLAY SENTIMENT checkmark.

tablechart_sentiment_column

And now we’ve activated sentiment! But keep in mind that the TABLE CHART allows for two (2) different modes of sentiment.

To change the mode click on SENTIMENT DISPLAY TYPE.

tablechart_sentiment_option

You should now have access to a drop down menu that allows you to switch between TEXT and CELL sentiment types.

The TEXT SENTIMENT MODE is the standard one, and paints the numbers the colors of the sentiment shown below.

tablechart_sentiment_option_selection

The CELL SENTIMENT MODE actually changes the color of the cell itself. See picture below.

tablechart_sentiment_cell

You’re now ready to apply sentiment to your own charts! 🎉