“Flipping/Mirroring” a Flot chart

Question

I'm using a framework called Lorikeet which is built off of the Flot Javascript framework. Currently I'm able to use their basic usage of the charts and it shows a nice graph as such:

However, my ultimate goal is to have two different graphs lined up as such:

My basic question is how can I "flip/mirror" a Flot chart?

Essentially, how do I have it such that I'm able to display the percentages descending from 100% to 0% and back to ascending 100%, as well as show a "mirrored" data set that grows downward depending on intensity?

EDIT:

Here's what I have done so far: http://hologos.org/stackoverflow/html/example_use%20-%20Copy.html I was only able to create two separate graphs that had the same zoom functionality as the original one.

Answer 1

Here's an example that draws two flot charts, one a mirror of the other. The key is to use a yaxis transform function that will allow the axis to run in "reverse":

var somePlot1 = $.plot("#placeholder", 
                  [ {data: d1} ],
                  { 
                      xaxis: { position: 'top'} // place on top
                  }
);
var somePlot2 = $.plot("#placeholder2", 
                  [ {data: d1} ],
                   { 
                       xaxis: { position: 'bottom'}, // place on bottom
                       yaxis: { 
                           ticks: [0.5, 1.0, 1.5, 2.0, 2.5], // custom ticks to avoid overlap on 0
                           transform: function (v) { return -v; }, // run the yaxis in reverse
                           inverseTransform: function (v) { return -v; }
                        } 
                   }
);

Example here .