Flot(js) is a great JavaScript library for drawing graphs, and is used by a bunch of people and companies around the globe. When one digs below the surfuce of the basics of the API and you start looking at what can be achieved using the functions exposed by Flot(js), you get to the real power of this library.

Recently I was working on a graphing solution that displayed data usage of various periods of time. For some of the time periods however, there will sometimes be no data available as the user did not make use of any data but, the graph still needed to show, whether the user was throttled or not during this period of time.

To clearly indicate this apart from the normal usage statictics, the bars were set to a negative value which would cause the bars to be rendered below the zero baseline. In turn, this caused a problem as Flot(js) would simply calculate a minus value for the y-axis and use that as the tick for the down facing bars, which is incorrect.

Another problem that needed to be taken care of on the y-axis was, that the data used caused some quirky situations where the numbers following the decimal point, will get completely out of hand and cause some numbers on the y-axis to have 10 or more numbers after the decimal point. Not ideal.

Luckily one can take care of all of these using the tickFormatter function. We use this as follows:

options.yaxis = {
    tickFormatter: function(val, axis) {

    }
}

In the callback we get passed the value of the current tick as well as the axis object. This is all the info we need to enable our customizations. The first thing we need to do is change the negative number on the y-axis to display something more discriptive, like for example ‘No Data’:

var numberOfTicks = axis.ticks.length;

if((numberOfTicks > 0) && (val < 0)) {
    axis.ticks[0].label = "No Data";
}

Inside the if statement we want to first ensure that out axis.ticks array is populated as on the first pass this will not be the case. Once at least one tick as been added, we check whether this is a negative number and if so, we want to go ahead and change the label of this tick. This will then solve our first problem.

All that is left, is to ensure that we only allow two decimal points. This is done using the toFixed JavaScript function:

return val.toFixed(2) + " " + data.unit;

We simply return this and, in this case, I append the type of data, resulting in something like 200 MB. The complete function then looks as follows:

options.yaxis = {
    tickFormatter: function(val, axis) {
        var numberOfTicks = axis.ticks.length;

        if((numberOfTicks > 0) && (val < 0)) {
        axis.ticks[0].label = "No Data";
    }
    return val.toFixed(2) + " " + data.unit;
    }
}

And that is it. With a couple of lines of code we are able to display the exact labels we want for our ticks on the y-axis.

After a failed attempt and screwing up the repository completely, I have finally gotten my user page up here on Github with Octopress. For those who landed here by accident and are thinking what, who, where? Here is a little background.

My name is Schalk Neethling and I see myself as an evangelist, writer, teacher and developer with an insatiable passion for open source, web standards and accessibility. I have been so involved with these worlds that I cannot foresee a future where these topics will not be a part of my daily life. You can find me here on Github, follow me on Twitter or, head over to my main blog over at Expansive Derivation.

So what will you find here? Here, I will be writing about anything and everything that has to do with the code I write and release to Github, which is pretty much everything. I hope to keep things interesting so, if you feel so inclined, grab the feed and add it to your RSS reader.