I have been taking my fitness more seriously and attending a bootcamp. To make it more fun I have been actively tracking my stats using my Jawbone.

I decided to created a personalised dashboard as a quick overview of my weekly progress. By opening the data up I also have the added incentive that anyone can see how much/little I am doing.

Implementation

As I am using a Jawbone I needed to use their API. You can register and create your app here. They are using oAuth so you need to enable your app to access your band’s data. To do this I am using simple-oauth library as it has a nice documentation.

The app must first authorise the url:

oauth2.AuthCode.authorizeURL({
    redirect_uri: '/callback',
    scope: 'basic_read extended_read mood_read move_read sleep_read generic_event_read'
});

Then you can get the token for your band:

oauth2.AuthCode.getToken({
        code: code,
        redirect_uri: '/callback',
    }, saveToken);

Once we have the token we can access the API. There is a good wrapper, jawbone-up, which I used.

up.moves.get({}, function(err, body) {
    var json = JSON.parse(body);
    res.send(json.data.items);
});

For visually displaying the data I am using the ChartJS library. Unfortunately I realised that there isn’t currently support for text inside doughnut. However, we can work around it with the following:

Chart.types.Doughnut.extend({
        name: "DoughnutAlt",
        draw: function() {
            Chart.types.Doughnut.prototype.draw.apply(this, arguments);
            this.chart.ctx.fillStyle = 'black';
            this.chart.ctx.textBaseline = 'middle';
            this.chart.ctx.fillText(this.segments[0].value + "%", this.chart.width / 2 - 20, this.chart.width / 2, 200);
        }
    });

See it live here.