Creating your first chart

In this section, we will create our first chart using Chartist, to provide a project activity overview over the past 24 hours. This bar chart will only provide some visual clues about the project activity, and our goal isn't to provide detailed information. For this reason, we will configure it to hide any labels, scales, and grid lines. The only visible part should be the bars of the bar chart.

Processing activity data

Before we start creating the activity chart itself, we need to look at how we should transform and prepare our data for the charts.

Let's look at what data we already have in our system. As far as the activities go, they all have a timestamp stored in the time field. However, for our chart, a list of timestamps is not sufficient enough. What we're looking for is a chart that displays one bar for each hour of the past 24 hours. Each one hour bar should represent the count of activities during that time.

The following illustration shows our source data...