How to use Date values in charts made with gRaphael?

Question

A little premise: I'm on a diet and I'm trying to draw a chart of my weight loss.

To do that, I'm using a little django app to store the weight readings, and gRaphael (http://g.raphaeljs.com/) charting library to draw the reports. You can see the wip here: http://www.totanus.net/weight/

At this time I'm printing dates in the X-axis using 'ymd' format to order them properly, but I'm not quite satisfied (actually I'm not even sure that chart is correct at all...) and I'm wondering if there is a better way to render the dates.

The main questions are:

1. Is there a way to use different labels other than '100610' or '20100610'?
2. Is there a way to set fixed x and y axis labels every n-days or n-kg?
3. can you suggest me some best practice in rendering this kind of chart (I'm particularly interested in calculating my overall trend)

Thank you in advance for any help!

Teo

Answer 1

I haven't tested this code, but I was looking into the same issue.

If you store the integer representation of the time (ticks since 1/1/1970) as the x-axis values, you can then iterate over the values and convert them to dates.

I got the idea for this from: http://github.com/DmitryBaranovskiy/g.raphael/issues#issue/8

var canvas = Raphael("holder")
graph = canvas.g.linechart(....)

$each(this.graph.axis[0].text.items, function (label) {
    originalText = label.attr('text'); 
    newText = /* some transformation to originalText */
    label.attr({'text': newText});
});

Where your newText is a conversion from the original text value (which is your time in ticks) to a date string.

As I said, I haven't tested this code, but the idea is sound in theory.