JS Flot charts: 2 y-axes with the same data. one with number data and one with percentages

Question

I am trying to recreate with Flot something like this:

The left y-axis represents money and the right y-axis is a percentage based on the Goal (the green line)

So in this example, the goal is $20000 (100%) so the right y-axis need to be aligned according.

I managed to get this jsFiddle, but as you can see, the right y-axis showing the percentages is not 'aligned' with the real data.

Formatting the axis is not a problem:

var percFormatter = function(val, axis) {
    return (val * 100).toFixed() + '%';
}

But how can I make a series be relative to both axis?

Answer 1

You can draw the plot to get the max of the first axes. And then edit the options with the new max value for the 2nd axes. The min values is always 0 for both axes.

var plot = $.plot($("#placeholder"), [series.money, series.goal], options);

options.yaxes[1].max = plot.getYAxes()[0].max;

$.plot($("#placeholder"), [series.money, series.goal], options);

It is working in this fiddle with some of my comments: http://jsfiddle.net/LXrLf/1/