How to Change Axis Color in FLOT

One of my project requires me to code web page the screen for showing time series data in the form of graphics. It should featured multiple y axes and clear information about what certain y axis belongs to data that plotted into the graph.

There’s a multiple y axes sample that I found in the original FLOT package, so I decided to take a look at it and incorporated it into my prototype webpage:

flot01

The first thing I notice is that, although the graph for different data series shows as different color, the corresponding y-axes is not. It would be nice, if the y-axes color should also changed in accordance to the color of the graphics plot to convey more information about the data.

I’ve read through the manual and examples and found none for my specific requirement. So, I decided to take a direct look to the codes inside the FLOT javascript’s routine to identify functions responsible for this.

The difficulty of the above task is to identify the correct starting points to explore, so that it will at last arrive the correct routine. Since FLOT script is a rather complex one, finding this starting points proves to be a time consuming task, if it is not done with effective methods.

Considering this, I try the more practical approach, by guessing the main routines and perform remarking of the calls and re-run the script.

There are several calls to the routine before the graphics shows up, such as initPlugins, parseOptions, etc, and at first I remarked the draw() and bindEvents() function:

flot02

And here is the result when using the above pattern:

flot03

Notice that now, the grid and the graphics is missing and leaving only the ticks data item for y axes. By repeating the same process for setupGrid() in FLOT jquery.flot.js:

flot04

I at last know the routine responsible for drawing those tick numbers is insertAxisLabels function. This is because when I remark the calls to this function, the tick number is gone.

The color for axis label is retrieved from axis.options.color. The axis variable itself is assigned from allAxes() that retrieves all x and y axes to be drawn.

Now my requirement is to change the color attribute to corresponds to the color of the plot lines. This is done by revising the routine inside
parseOptions by adding color assignment for each y-axis:

flot05

And here is the end result:

flot06

And actually I am still not satisfied with the result, I want the color to be more contrast and this can be done by adjusting the options.color array inside Plot main function:

flot07

Advertisements

One Response to “How to Change Axis Color in FLOT”

  1. Ayesha Mulla Says:

    Thanks! Kindly Could you please share small running example code? Its not working at my end.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: