Circularchart Tutorials

Step by step tutorial

The user story

I’m a local manager in a national retail company. I want to better understand my financial repartition for my lines of business.

What are my top/flop categories? Between all of my segmentations, which shop is performing the best?

As I’m looking for the part-of-whole, let’s do a circularchart.

Warning

Before you start!

Make sure you added your datasource to your application. Once you’re done create a new story.

Pick some data

To create a nice circularchart, it’s very easy! All we need are two columns: label and value.

• a label column: this will define the name of each of the segments you want to display
• a value column: this will define the segment value

Many other options are available if you want to add some extra informations to your viz. Here are some examples of how you can make it shine:

• Legend option : this will add a block where you will find all the values of your segment.
• Additional info column: You can add as many additional info as you want. They will be displayed in the legend when focussing on a segment.
• Segment selected by default option: this will select by default one of your segment.
• DRILL option: It’s the perfect option if you want to explore the repartition of your segmentation
• MAX NUMBER OF ARCS PER LEVEL option: this will display as many number of arcs as you want (by default set at 4).

You can find out more about these different options here 👈.

If you don’t have any data to use, feel free to use our amazing fake data generator Design First!, which is also available in beta mode in the studio.

Chart Parameters

You can pick the following dataset:

CA	Target	Branch level 2
3660878	3282008	Sports
7543800	6842574	Hairdressers
6189712	6401056	General Alimentation
9889564	8293278	Technologie
4756526	5098616	Fashion
6709196	5752026	Services
1050796	654632	Family Fashion

Once I have gathered the data I need, I can choose to configure a leaderboard.

I just need to fill the dataset,label and value fields, and that’s it! ✨

Add a selected segment by default

You can use the Segment selected by default option to focus the analysis on a dedicated segment.

To make the ↗️ appear, go the chart parameters menu and add the optional parameter Legend to your configuration:

With Legends and Additional Info

You can use the Legend and the Additional info optionals parameters to provide some deeper information to your users:

With Filters

A nice way to make your charts more interactive is to add a filter/requester on it. With a circularchart, it could be nice to switch between the value of my revenue and the percentage of each segment.

In order to do it, let’s play with YouPrep™:

1/ You can add a Percentage of total step to generate a new column containing the % of each category:

youprep compute row percentage of

Your dataset now looks like:

2/ Unpivoting your data will allow you to have your revenue and % of revenue in the same column.

3/ Then add your Filter/Requester to your story:

And here you go!!!

With Hardcoded number of Arcs

If you want to display all your Arcs you can plau with the MAX NUMBER OF ARCS PER LEVEL option in the Display pannel:

hadcoded number of arcs

With Drill

You can add the following datasources to your app:

Branch level 2	Retailer name	CA	Target
Services	Agence 4	312741	209407
Services	Agence 4	312741	209407
Services	Agence 5	263380	191184
Services	Agence 5	263380	191184
Services	Boutique 33	232729	232729
Hairdressers	Boutique 6	254826	209407
Hairdressers	Boutique 6	254826	209407
Hairdressers	Boutique 2	242134	186962
Hairdressers	Boutique 2	242134	186962
Hairdressers	Magasin 18	228373	175715
Technologie	Boutique 11	394119	394119
Technologie	Boutique 11	394119	394119
Technologie	Boutique 18	394119	394119
Technologie	Boutique 18	394119	394119
Technologie	Boutique 18	318285	202920
General Alimentation	Magasin 9	249213	260350
General Alimentation	Magasin 9	249213	260350
General Alimentation	Magasin 8	249143	191184
General Alimentation	Magasin 8	249143	191184
General Alimentation	Magasin 11	238075	249213
Family Fashion	Boutique 8	322186	209407
Family Fashion	Boutique 8	322186	209407
Family Fashion	Boutique 9	203212	117909
Family Fashion	Boutique 9	203212	117909
Sports	Agence 1	216604	194159
Sports	Agence 2	216604	148282
Sports	Agence 3	216604	194159
Sports	Agence 4	216604	148282
Sports	Agence 1	216604	194159
Fashion	Magasin 3	335471	216604
Fashion	Magasin 3	335471	216604
Fashion	Magasin 7	210622	245916
Fashion	Magasin 7	210622	245916

1/ You can start by adding a hierarchical rollup step with Youprep™:

youprep hierchical

2/ Then Switch to the Charts configuration and select the label generated thanks to the Hierarchical rollup step:

circular drill label

3/ Go to the Drill section and add the columns defining your hierarchy:

Note

You need to add as many columns as hierarchy level you want. Take the same order as the hierarchical columns from the first step of this tutorial.

circular drill hierarchy

4/ So easy isn’t? 🔥

circular drill final

With Crossfilter

Crossfilter is a really powerful option to showcase dynamically another chart based on the selection of a main chart. Ex: We want to display in a circularchart the segmentation of my CA and the repartition of the CA between my shops in a secondary chart:

1/ In order to create this configuration, you need to create a primary chart: here let’s create a circularchart:

circular crossfilter first

2/ Define the chart configuration:

circular crossfilter second

3/ You can now create your secondary chart based on the following data:

circular crossfilter slave first

4/ It should look like this with a leaderboard:

circular crossfilter slave second

5/ Our primary and secondary chart have been created. We can set up the crossfilter configuration

circular crossfilter configuration first

6/ You need to select the column on which your column will be filtered

Important

On Column parameters should match exactly the output label column selected in your primary chart. SELECT THE FILTERED DATASETS parameters should match the dataset on which you want to apply the filter.

circular crossfilter configuration final

7/ Not that complex isn’t??

circular crossfilter tadal