Alternate x axis Intervals In g.raphaël.js linechart()

Download and try out everything that I talk about in this post, and check out the live demo over on code.bocoup.com.

Raphaël’s charting tools, gRaphaël, come with great out of the box functionality. The core charting library, and the individual chart scripts allow you to easily pass in arrays of x,y coordinates, and they just get charted. Since there are no docs, however, figuring out how to modify the default behavior can be tricky.

I recently worked on a gRaphaël linchart that required fixed 1/2 hour intervals of time on the x-axis, and various quantities on the y-axis. gRaphaël's linechart() default behavior presented two problems, which I found solutions for in the g.line.js source and the gRaphaël issues page on github and will demonstrate bellow:

1. The default x-axis label intervals are auto built by linechart() based on the number of data points, and the width in pixels of your chart.
2. linechart() assumes you are charting base 10 numbers and the x axis label text are created implicitly from the data. Therefore, the labels must be real base 10 numbers, and not wacky base 60 time with sexagesimal colons instead of decimal periods.

1) Modifying the default x-axis interval

The x-axis label interval is set on line 72 of g.raphael.js where width is the width argument passed into linechart(), and gutter is 10 (unless you override it):

Math.floor((width - 2 * gutter) / 20), 2)

You'll notice, if you read earlier in line 72, that this default condition only occurs if opts.axisxstep is not set. opts is an option object that you can pass in to linechart() as an optional last argument, and linechart() will try to use it all over the place.

All you have to do is pass in a object literal with an axisxstep property set to what ever value you want:

2)Modifying the the x-axis labels

I needed to represent time in the line chart that I was working on. Instead of modifying gRaphaël to operate on base 60 numbers, my solution was to send base 10 representations of time intervals, and convert the labels into time interval strings.

When you run linechart() on a raphael object, an object representation of your linechart is stored on the object you created. If your named linechart object lines you could grab a reference to the DOM element of each text node by iterating through this array:

lines.axis[0].text.items; //[array, of, DOM elements]

You can get the text for each text node like this:

var myTextElem = lines.axis[0].text.items[0];

myTextElem.attr('text');

You can set the text for each text node like this:

myTextElem.attr({'text' : 'new string of text'});

Thanks to Lindsay Holmwood for pointing this out.

In this way, you can traverse your instance of the linechart object, get the text nodes for each x axis label, manipulate them and set them again:

This entry was posted by Boaz Sender (@boazsender) on June 21, 2010 in JavaScript, RaphaëlJS, SVG and VML.

Tweet