CODEWITHSUNDEEP
javascriptchartsflot
jonagoldman
jonagoldman

Reputation: 8754

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

I am trying to recreate with Flot something like this:

enter image description here

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?

Upvotes: 5

Views: 2319

Answers (1)

Frederik H
Frederik H

Reputation: 1506

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/

Upvotes: 1

Related Questions