Fleet. Is it possible to have a third Y-axis dataset or a hidden dataset?

Question

I have a graph showing the time of the race of people (if you copy / paste the code below in any of the fleet examples, it should work). I show the time on the y1 axis and the pace on km on the y2 axis, since they are both% H /% M /% S both times. But I would also like to show the distance for each race in the graph. Since the units on this dataset (distance) are different from yaxis, it makes no sense to display it through the y axis. I thought I could add distance data to the rows along the x axis, but that would not allow me to reuse the data in the tooltip later. Does anyone have any ideas on how I can access the “distance” dataset from the tooltip or somehow release a third plot of the Y axis to 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 sure you are out of luck on the 3rd axis.

What I usually do in this situation just has a global array that matches the x coordinate with any 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 showTooltip call will look like this:

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

Answer 2

I still need to try, but it seems to be supported in the documentation . He does not indicate anywhere and says:

Typically, the various interfaces in Flot that process the data either accept the xaxis / yaxis parameter to indicate which axis number to use (starting from 1), or it allows you to directly specify the coordinate as x2 / x3 / ... or x2axis / x3axis /. .. instead of "x" or "xaxis".