Flot - Is it possible to have a third y-axis or hidden data set?

Question

Hey,

I have a graph showing a persons races times (if you copy/paste the code below into any of the flot examples it should work). I'm showing the time on the y1 axis and the pace per km on the y2 axis, since they are both times %H/%M/%S. But i'd also like to show the distance for each race within the graph. Since the units on this dataset (distance) are different to the yaxis, it doesn't make sense to show it via the y-axis. I was thinking i could add the distance details to the x-axis tick strings, but this would not allow me to reuse the data in a tooltip later. Has anybody any ideas, on how i can access the dataset 'distance' from a tooltip, or somehow fudge a third y-axis scale onto the chart?

<h1>Times and Distances</h1>

<pre>
Event  Distance Time  Pace Km
R1  4 Mile  00:23:14  
R2  5 Mile  00:28:27  
R3  5 Mile  00:29:08  
R4  4 Mile  00:21:16  
R5  5 KM  00:16:42  
R6  5 Mile  00:25:41 00:03:12 
R7  5 KM  00:16:03 00:03:13 
R8  5 Mile  00:28:13 00:03:30 
</pre>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script id="source" language="javascript" type="text/javascript">
$(function () {
 var d1 = [ 
  {
   label: "Time",
   lines: {show: true, fill: false},
   points: {show: true, fill: false},
   data: [ [0,600000],[1,1200000],[2,1800000],[3,1800000],[4,2400000],[5,3600000],[6,4800000],[7,5200000] ]
  },
  {
   label: "Pace per Km",
   yaxis: 2,
   lines: {show: true, fill: false},
   points: {show: true, fill: false},
   data: [ [0,3000],[1,2800],[2,3000],[3,3000],[4,2500],[5,3000],[6,2500],[7,3000] ]
  }
                    //,
  //{
  // label: "Distance",
  // yaxis: 2,
  // bars: {show: true},
  // data: [ [0,3],[1,2.8],[2,3],[3,3],[4,2.5],[5,3],[6,2.5],[7,3] ]
  //}
 ];

 $.plot($("#placeholder"),
    d1,
     { 
   xaxis: { 
     ticks: [ [0,'R1'],[1,'R2'],[2,'R3'],[3,'R4'],[4,'R5'],[5,'R6'],[6,'R7'],[7,'R8'] ] 
   },
   yaxis:{
     mode: "time",
     min: 500000,
     max: 6000000,
     timeformat: "%H:%M:%S"
   },
   y2axis:{
     mode: "time",
     min: 2000,
     max: 4000,
     timeformat: "%M:%S"
   },
   selection: { mode: "xy" },
   grid: { hoverable: true, clickable: true }
  });

 var previousPoint = null;
 $("#placeholder").bind("plothover", function (event, pos, item) {
 $("#x").text(pos.x.toFixed(2));
 $("#y").text(pos.y.toFixed(2));

 if (item) {
 if (previousPoint != item.datapoint) {
 previousPoint = item.datapoint;

 $("#tooltip").remove();
 var x = item.datapoint[0].toFixed(2),
 y = item.datapoint[1].toFixed(2);

 showTooltip(item.pageX, item.pageY,
 item.series.label + " of " + x + " = " + y);
 }
 }
 else {
 $("#tooltip").remove();
 previousPoint = null; 
 }
 });

 function showTooltip(x, y, contents) {
 $('<div id="tooltip">' + contents + '</div>').css( {
 position: 'absolute',
 display: 'none',
 top: y + 5,
 left: x + 5,
 border: '1px solid #fdd',
 padding: '2px',
 'background-color': '#fee',
 opacity: 0.80
 }).appendTo("body").fadeIn(200);
 }
});
</script>

Answer 1

I'm pretty sure you're out of luck for a 3rd y-axis.

What I usually do in this situation is just have a global array that maps the x coordinate to whatever data you want to show in the tooltip, so imagine this:

var y3data = [3,2.8,3,3,2.5,...];//y-values from your Distance series

Then in your plothover function your call to showTooltip becomes:

showTooltip(item.pageX, item.pageY,
    item.series.label + " of " + x + " = " + y + 
    ' and the race was '+y3data[x]+'km long');