Radarchart Tutorials

Step by step tutorial

The user story

I’m a manager in an international film company present in 3 countries : France, Japan and USA. My performance is determined by the film duration, the profitability and the public rating score.

I want to compare the performance patterns of the markets based on 3 criteria.

Can a performance be explained the same way among different entities ?

As I want to compare 2 or 3 entities among several indicators (related or not), let’s do a radarchart to check it out ! It allows you to compare entities based on three indicators.

Note that this chart could work with only 1 line, but it would not be a powerful visualization. Make sure that you always have 2 lines in the chart !

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 radarchart, the chart needs to understand what are the axis, the value for the axis, and the names of the lines.

So your data should reflect this structure in some way.

You need :

• a country column: contains the serie. This will define the name of the lines (in our case, the film markets).
• a kpi column: contains the label. This will define the label of the axis (in our case the criteria).
• a kpi_value column: contains the value of the kpi. This will define the value.

If your data is alredy in this format, move on to the next step.

Also, remember that you can create fake data fitting the radarchart format with our awesome fake data generator Design First! directly from the story :)

This is how my query should look like in the Dataset Editor.

See on the left side how the data has been formatted!

Add units to your columns to contextualize the information and give meaning to your story.

Chart Parameters

Once my data has been setup I can now choose to configure a radarchart.

I just need to follow the steps, and in 3 clicks I’m done!

radar chart

Add a filled shape

Sometimes, I want my reference market to outstands in the chart. To do so, I can set the fillShapeForSeries option directly from the optional parameters of the chart. It will color the shape of one of my series.

In our example, it is France. After saving my changes, the chart looks like this :

Display parallel plot

Also, I can change the display of the axis using the displayParallelPlot of the optional parameters. It is commonly used to look at multi criteria data.

After saving my changes, the chart looks like this :