Step by step tutorial¶
The user story¶
I’m a cinema manager, I need to know what movie genre has been the most profitable over the years. 🎥
What is the evolution of my revenues per movie genre among the years?
As I’m looking to compare the weight of individual categories over time, let’s do a barchart.
Before you start!
Make sure you added your datasource to your application. Once you’re done create a new story.
Pick some data¶
All we need to create a nice barchart is two columns:
labelcolumn: this will define the name of each of the bars you want to display
valuecolumn: this will define the bar value
You can add other options to make your viz precise :
groupsto display several bars for the same
tickFormatto display your dates just the way you want
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.
Once I have gathered the data I need, I can choose to configure a barchart.
I just need to fill the
value fields, and that’s it! ✨
Other configuration examples¶
Add groups to go deepeer in your analysis.
📝 For example, I want to compare movies’ budget by type for this year and last year.
Your dataset should look like this :
Add a group option like this 👇
You’re all set !
Want to see the variation/evolution of your different categories? Add a heatbar that would help you vizualy understand if you’re doing better or worst.
📝 For example, I want to compare countries’ revenue and see if they are performing better than last year.
Simply add a sentiment configuration on your value column:
Here the color depends of the revenue per country : above 50 = you did great, below = 😔 The specificity of the heatbar is that it will also display a label for the sentiment (not just a color). By default the name of your sentiment will be displayed.
For groups, it will be computed for each group (not each bar).
You want to customize the labels ? You can switch in code mode and add a
labels array to the sentiment configuration. The values of the
labels array will be matched with the values of the range array. In this
example, a ‘negative’ value will be labeled ‘Shame on you!’, a
‘positive’ value will be labeled ‘Congrats!’.
"Shame on you!"