mkell mkell - 6 months ago 77
Javascript Question

Flot chart tooltip

I am using Flot interactive chart, the data being displayed is taken in from a datatable.

When the user hover's over a point the tooltip displays "Height(cm) on 6.00 = 168", basically the "168" represents the y value which is correct as it corresponds with the y-axis labels.
However the "6.00" should be a date, as is displayed on the chart along the x-axis, "6.00" is the sequence number , I need to get the label.....
any ideas ?

//Show ToolTip Part 2
function showTooltip(x, y, contents)
{
$('<div id="tooltip">' + contents + '</div>').css(
{
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid #333',
padding: '4px',
color: '#fff',
'border-radius': '3px',
'background-color': '#333',
opacity: 0.7
}
).appendTo("body").fadeIn(400);
}

//Show ToolTip Part 1
var previousPoint = null;
$("#VitalsChart").bind("plothover", function (event, pos, item)
{
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));

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

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



showTooltip(item.pageX, item.pageY, item.series.label + " on " + x + "=" + "<strong>" + y + "</strong>");


}
}
else
{
$("#tooltip").remove();
previousPoint = null;
}
});

//Plot Data
var plot = $.plot($("#VitalsChart"), [{ data: weight, label: "Weight (kg)" },
{ data: height, label: "Height (cm)" }],
{
series:
{
lines:
{
show: true,
lineWidth: 2,
fill: false,
fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.1 }] }
},

points: { show: true },

shadowSize: 7
},

grid:
{
hoverable: true,
clickable: false,
tickColor: "#ddd",
borderWidth: 1,
minBorderMargin: 10
},

colors: ["red", "blue"],

xaxis:
{
ticks: xLabels,
tickDecimals: 0
},

yaxis:
{
ticks: 11,
tickDecimals: 0
}
});
}

Answer

Try:

var x = xLabels[item.datapoint[0] - 1][1];

Your ticks (xLabels) is an array of 2 element arrays. You need just the second element, the label itself.