Double axes in flot

Question

I want to create a graph with four quadrants using flot. I need to have labels on both the left and right-hand sides of the graph - with the same ticks. Here is my code:

$.plot($("#placeholder"), [ [<%=points%>] ], { series: {lines: { show: false },
  points: { show: true }}, 
  yaxes: [{ ticks:[[0,"Left"]],max: 100, min:-100 },
          { position: "Right",ticks:[[0,"Right"]], max:100, min: -100 }],
  xaxis: { ticks:[[0,"Bottom"]], max: 100, min:-100 } });

I get the "Left" and "Bottom" labels but nothing on the right-hand side. Thanks in advance for any help you can provide.

Answer 1

I had this same issue. In order to have the secondary y-axis appear on the right side of the plot, you need to have a series connected to it, but that lies outside your displayed data range:

{label:"dummy data",data:[[-1000,-100],[-1000,100]], yaxis:2} //yaxis array is indexed from 1

Since your range appears to be fixed, matching the ticks is pretty straighforward. My range and ticks was highly dynamic, so I got the ticks to match by including a complete duplicate series of my primary data hooked to the secondary yaxis. I just shifted it on the xaxis to be completely out of range for display.

Yes, this is wasteful, since it involves delivering extra data. But until Flot supports showing yaxes without series conencted, this will get it done.