CODEWITHSUNDEEP
jqueryjqplot
Wesley Skeen
Wesley Skeen

Reputation: 8285

Change what jqPlots tooltip displays

Is there a way to change the text at each point of a jqPlot graph. So instead of each point displaying its normal value, can it be changed to something else. Each point on my graph represents different data. For example I want to display the amount of students that took tests over the year broken down by month. But instead of the tool tip saying the amount I want it to show the average test result.

Is it possible to change the tooltips text?

Thanks

Upvotes: 0

Views: 171

Answers (2)

GayashanNA
GayashanNA

Reputation: 478

I found the solution for the exact problem you asked. There is infact a method to display a custom tooltip, but it is not well documented anywhere.

Here's how you can do it. First you have to include the highlighter plugin. Then in the plot options set the options for highlighter similar to this.

highlighter: {
    show: true,
    tooltipContentEditor: tooltipContentEditor
}

Here tooltipContentEditor is an external function which can be used to output a custom HTML as the tooltip.

Then you can return the calculated average or another desired value from this function.

function tooltipContentEditor(str, series_index, point_index, plot) {
    len = plot.data[series_index].length;
    total = 0;
    for (i = 0 ; i < len; i++) {
        total += parseFloat(plot.data[series_index][i][1]);
    }
    return "average:"+total/len;
}

You can access all your data using the parameters passed with the function.

Have a look at my jsFiddle here.

Upvotes: 0

GayashanNA
GayashanNA

Reputation: 478

First of all this is not the exact solution for your question, but it can be used as a possible work-around.

I have achieved a similar result on jqplot using the pointLabels plugin.

Here's what you can do,

The pointLabels plugin displays the content of the data array which is used to draw the chart. But there is an option to mention which index of the data array should be used to display the point label.

pointLabels: {
    show: true,
    seriesLabelIndex: 2
}

So what you can do is for each point in your data array you can include whatever the detail you want to be displayed in the chart.

But keep in mind that this does not appear as a tooltip, instead as a point label.

I created a small example for you to understand this.

http://jsfiddle.net/GayashanNA/q9mH8/

I had also created a blog post describing what i did on my project, read it here to get some more information if you think this solution can help you.

http://gayashan-a.blogspot.de/2012/10/tracking-mouse-position-on-your_2.html

Upvotes: 1

Related Questions