In this section, we will create a chart component using Chartist, which will display the open task progress of projects over time. To do this, we'll use a line chart with a specific interpolation that provides quantized steps rather than lines with directly connected points.
We are also providing some interactivity in that the user will be able to switch the displayed time frame using a toggle button. This allows us to reuse the Toggle component that we created in Chapter 2, Ready, Set, Go!, of this book.
Let's first look at the data that we have in our system and how we can transform it into the data needed by Chartist.
We can rely on two data attributes of our tasks in order to draw them onto a timeline. The created attribute is set to the timestamp at the moment when the task was created. If a task is marked as done, the done attribute is set to the timestamp at that time.
As we're only interested in the amount of open tasks at any given time, we can safely presume...