# Q：上表显示的元数据在盘旋

I have a chart that display 0-100% on the Y axis and quarters on the X-axis. The source data includes:

{
date: '2015 Q1',
numerator: 55,
denominator: 105,
percent:52
}

When plotting, the series data is specified as [52, '2015 Q1'] and displays on the chart correctly. However, when I hover over the data point, I would like to display the raw numerator and denominator as well as the percentage.

Is there any way for me to include additional meta data in the series data?

** Note for this example I am simplifying the quarter logic. It is actually specified in milliseconds as per the flot specs **

{
date: '2015 Q1',
numerator: 55,
denominator: 105,
percent:52
}

**注意这个例子，我简化了四分之一的逻辑。它实际上是以毫秒为单位按上规格*

First, your example data should be ['2015 Q1', 52], x value goes first.

And second, you can use arrays with more then two values for the datapoints, for example ['2015 Q1', 52, 55, 105] and then use the third and forth value in your tooltips (flot will ignore them when drawing the chart itself for line and point charts).

Example code for the tooltip:

function bindHover() {
\$(document).on('plothover', '#chart', function (event, pos, item) {
if (item) {
if (prevPoint != item.dataIndex) {
prevPoint = item.dataIndex;
\$('#tooltip').remove();

var tooltipString = item.series.name + ': ' + item.datapoint[0];
tooltipString += '/' + item.datapoint[1];
tooltipString += '<br/>' + item.series.data[item.dataIndex][2];
tooltipString += '/' + item.series.data[item.dataIndex][3];
showTooltip(item.pageX, item.pageY, tooltipString);
}
}
else {
\$('#tooltip').remove();
prevPoint = null;
}
});
}

function bindHover() {
\$(document).on('plothover', '#chart', function (event, pos, item) {
if (item) {
if (prevPoint != item.dataIndex) {
prevPoint = item.dataIndex;
\$('#tooltip').remove();

var tooltipString = item.series.name + ': ' + item.datapoint[0];
tooltipString += '/' + item.datapoint[1];
tooltipString += '<br/>' + item.series.data[item.dataIndex][2];
tooltipString += '/' + item.series.data[item.dataIndex][3];
showTooltip(item.pageX, item.pageY, tooltipString);
}
}
else {
\$('#tooltip').remove();
prevPoint = null;
}
});
}