How to duplicate Y Axis on JQuery Flot

Question

I'm being able to use JQuery Flot, and it's a very nice tool. However, I could not find a GOOD solution for my problem.

I want to duplicate Y axis, so I can display 1 on the left and 1 on the right, so the users, when comparing data from the rightmost side of the chart, won't have to scroll through the leftmost side of the chart. I'm assuming they will be accessing it through a smartphone.

JQuery Flot allows multiple axis, but for each axis, I would need a different set of data, as in this example: http://people.iola.dk/olau/flot/examples/multiple-axes.html

But I don't want to duplicate the data. Can't I just 'tell' Flot to duplicate the yaxis using the same set of data?

Answer 1

You can use the hooks functionality to force flot to show the second yaxis even though it has no data series assigned to it:

// hook function to mark axis as "used"
// and assign min/max from left axis
pOff = function(plot, offset){
    plot.getYAxes()[1].used = true;
    plot.getYAxes()[1].datamin = plot.getYAxes()[0].datamin;
    plot.getYAxes()[1].datamax = plot.getYAxes()[0].datamax;
}

$.plot("#placeholder2", [ { data: d2 } ], { 
    hooks: { processOffset: [pOff] },
    yaxes: [ {},
             {position: 'right'} // add second axis
    ]
});

Depending on how your axis is configured though, this might be messy. You'll have to steal parameters from the left axis to get it to work (as I've done above with datamin/datamax).

If it was my code, I'd go with your duplicate data approach. You aren't really duplicating anything, just assigned the same array to two series. I'd then configure the 2nd series to simply not draw.

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

// use the same data but toggle off the lines...
$.plot("#placeholder", [ { data: d2 }, {data: d2, yaxis: 2, lines: {show: false}} ], {
    yaxes: [ {},
             {position: 'right'} ]
});

Here's a fiddle demonstrating the two approaches.