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 !
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 :
countrycolumn: contains the
serie. This will define the name of the lines (in our case, the film markets).
kpicolumn: contains the
label. This will define the label of the axis (in our case the criteria).
kpi_valuecolumn: contains the
valueof 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.
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!
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
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 :