How To Add Content To JQuery Flot Chart Data Array ToolTip

Question

I have a JQuery Flot Line Chart. I have not used JQuery Flot Charts before, and have little experience with JQuery Flot Charts. I have looked around, and cannot find answer to this elsewhere.

The data array for the JQuery Flot line chart is as follows:

var twitter = [[1, 27], [2, 34], [3, 51]]

When user hovers over each data point in line chart, user is presented with a ToolTip. The ToolTip currently displays the following:

ToolTip Example, Data Point One > Twitter: | X:1 | y:27.00

I can see that this is controlled in the Var Options here:

var options = {
                        grid : {
                            hoverable : true
                        },
                        colors : ["#568A89", "#3276B1"],
                        tooltip : true,
                        tooltipOpts : {
                            **//content : "Value <b>$x</b> Value <span>$y</span>",**

Now, each of my data arrays are displaying a different point of data. For example:

Data Array One: Displaying Number of User Profile Views Data Array Two: Displaying Number of User Points Data Array Three: Displaying Number of Friends

Now, when user hovers of each of these data points, user needs to be able to see what each data point relates to.

For example:

When user hovers over > Data Array One: [1, 27]

ToolTip needs to display > 27 Profile Views

When user hovers over > Data Array Two: [2, 34]

ToolTip needs to display > 34 User Points

How can i customize what the ToolTip displays ?

How can i have different ToolTip Content for each individual data array ?

Thank you for your help and support with this question.

Answer 1

It's not clear how you are obtaining the display for each tooltip but in this example it is static. Something like this should work. Fiddle here- Example

var tickVals = [[1,"Profile Views"],[2,"User Points"],[3,"Number of Friends"]]

var dataLines = [
{
 label: "Twitter",
 data: [[1, 27], [2, 34], [3, 51]],

}
];



$.plot($("#placeholder"), dataLines, {

grid: {
      hoverable: true,
      mouseActiveRadius: 10

},


lines: {show: true},

points: {

    show: true,
    radius: 4
},

});


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



    var previousPoint = null;
    $("#placeholder").on("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]-1,
                        y = item.datapoint[1];

                showTooltip(item.pageX, item.pageY,
                                tickVals[x][1] + "- " + y);

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

     });