Timeline Tutorials

Step by step tutorial

The user story

I’m a CEO of an important real estate company and wants to have an overview of the major milestones of my company ! ✌

However, what were the main events for the company over the last years ?

What were the main subjects of the achievements in the company ? When did those projects happened ? How can i put in context different figures in different charts with the main events and achievements of the company?

Since I need an overview of the key milestones of my company. Let’s do a Timeline!

Warning

Before you start!

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

The dataset

Here is an example of the dataset expected to create a nice Timeline :

date domain headli ne media_sourc e media_type perime tre text
01/01/ 2019 Key Facts Restru cturin g im1 asset Real Estate Delive ry of the two restru cturin g / renova tion operat ions
01/04/ 2019 Key Facts Increa se im2 asset Real Estate Signif icant increa se in gross rents (+1%)
01/06/ 2019 Key Facts Merger im3 asset Real Estate Merger with real estate manage ment compan y
01/09/ 2019 Key Facts Improv ement im4 asset Real Estate Improv ement in the physic al occupa ncy rate of busine ss parks
01/11/ 2019 Key Facts Integr ation im5 asset Real Estate Integr ation of our partne r’s real estate progra ms
01/01/ 2020 Key Facts Odysée 2020 im6 asset Real Estate Delive ry of the new Odysée 2020 real estate progra m

Might seem a little bit difficult ? No worries, I’ll give you some hints to prepare your data 😉

  • headline : is the general subject of the milestone in the company
  • media_source : is the name of your image file
  • media_type : is generally asset, this is where your images are loaded in the app (custom assets)
  • perimetre : is the scope of the milestone
  • text : is the description of the milestone

Pretty easy now , isn’t it ? 😁👍

Note

Don’t forget to give simple names to your images so you can add them easily in your dataset !

Chart Parameters

Once my data has been setup, I just need to follow the steps and in 3 clicks I’m done! ✅

I need at least :

  • a date column - that will be displayed as the dates for your milestones in your Timeline

Note

You can adjust your date format from your dataset. And you can use it for several dates at once.

datasets:
  my_dataset:
    id: "my_dataset"
    query:
      domain: "timeline"
    date: [
      {
        selector: "start_date"
        format: "%Y-%m-%d %H:%M:%S"
      }
      {
        selector: "end_date"
        format: "%Y-%m-%d %H:%M:%S"
      }
    ]
  • a headline column - that will be displayed as headlines for the general subject of each milestone
  • a text column - that will be displayed as descriptions of each milestone
timeline parameters

Another important thing is to take a look at 3 optional parameters:

  • Select the “media_source” column for the “media” parameter
  • Select the “media_type” column for the “media type” parameter
  • Select the “headline” column for the “images legends” parameter
timeline parameters

And you’re done 🎉

timeline parameters