Building Your Own Cohort Report with Highcharts

My favourite type of cohort report is the state based percentage area report shown in my last post. Before creating this using Highcharts I’ll first explain the basic parts a chart.

Title

Being able to differentiate between charts easily is valuable. Don’t forget to use good titles. This should go without saying.

Legend

Useful for differentiating between series of a chart easily. Most charting systems are colour based, but there are some that use patterns to differentiate as well.

x Axis

This axis runs horizontally on a chart, sometimes called the category axis. Each item on the axis is known as a category. In the chart below the categories are dates for a week of signups.

y Axis

The axis that runs vertically on the chart. The y Axis is the value that a series will have for a category. For example, the initial series has a value of 51% for the 9/15/2012 category.

Series

A series is a group of similar numeric values across a group categories. Usually a series will have a name which is coded in the legend. Continuing on with the above example, the Initial series looks like this: [57.14%, 51.72%, 44.74%, 41.02%, 37.97%, 37.24%, 38.58%].

Highcharts

Jump ahead and check out the results here: http://jsfiddle.net/n9pCh/2/.

The best part about Highcharts is that it’s easily embedded into Geckboard. We’ll cover that later, for now let’s take a look at the different parts of the code. We’ll skip over any part that’s not interesting or self-explanatory.

Area Chart

chart: {
    renderTo: 'container',
    type: 'area'
},

Render the chart inside the html element on the page with the id of ‘container’. It also sets the type of chart to area.

xAxis: {
    type: 'datetime',
},

Tells the chart that the categories on the x Axis are dates.

Tooltips

tooltip: {
    formatter: function() {
        return this.series.name +': ' + Highcharts.numberFormat(this.y, 2) +' (' + Highcharts.numberFormat(this.percentage, 1) + '%) for week ending '+ Highcharts.dateFormat('%b %d', this.x);
    }
},

This one’s messy. It makes the tooltips have specific information in them. They end up looking like this: embedded: 10.00 (34.5%) for week ending Sep 16.

Plotting Options

plotOptions: {
    area: {
        stacking: 'percent',
        pointStart: Date.parse('2012-Sep-09'),
        pointInterval: 7 * 3600000 * 24, // 7 day interval
    }
},

This stacks the series on top of each other and converts their values into percentages. It sets the point start date, and how much time is between each point.

The pointInterval is a little confusing. It’s the number of milliseconds between each point. So the full calculation above is really 7 (days) * 24 (hours) * 60 (minutes) * 60 (seconds) * 1000 (milliseconds).

Series

series: [
    {
        name: 'initial',
        data: [8, 15, 17, 137, 150, 200, 250]
    }
]

The final and most important part. I’ve only included one series here, but you can add as many as you want (check the jsFiddle for a full example). It’s made up of the name of the series and the values for each category.

Now you know how to create a cohort report using Highcharts you can start to impress your investors. The next step will be to get it generating real data using SQL queries from your database.

-Cameron