Tooltips on values of multigraph

Submitted by mharizanov on Fri, 20/04/2012 - 18:47

I just added some code to show tooltips with the values when you hover over a multigraph value, here is a screenshot:

To do this edit multigraph.php and add the checkbox code whereveer you want it

<p><input id="enableTooltip" type="checkbox" checked >Enable tooltips</p>

and the javascript at the end of javascript code, just before the </javascript> closing tag:

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);

}

var previousPoint = null;

$("#placeholder").bind("plothover", function (event, pos, item) {

$("#x").text(pos.x.toFixed(2));

$("#y").text(pos.y.toFixed(2));

if ($("#enableTooltip:checked").length > 0) {

if (item) {

if (previousPoint != item.dataIndex) {

previousPoint = item.dataIndex;

$("#tooltip").remove();

var x = item.datapoint[0].toFixed(2),

y = item.datapoint[1].toFixed(2);

// create a new javascript Date object based on the timestamp

var date = new Date(parseInt(x));

// hours part from the timestamp

var hours = date.getHours();

// minutes part from the timestamp

var minutes = date.getMinutes();

// seconds part from the timestamp

var seconds = date.getSeconds();

// will display time in 10:30:23 format

var formattedTime = hours + ':' + minutes + ':' + seconds;

showTooltip(item.pageX, item.pageY,

item.series.label + " at " + formattedTime + " = " + y);

}

else {

$("#tooltip").remove();

previousPoint = null;

}

});

Re: Tooltips on values of multigraph

Submitted by Lloyd on Fri, 20/04/2012 - 21:42.

Thanks for that - it was just what I was looking for.

Lloyd

Re: Tooltips on values of multigraph

Submitted by Lloyd on Fri, 20/04/2012 - 22:01.

And interesting that the tooltip gives the correct time, whilst the axis is an hour behind.

I've also made as slight change to the code to format the time better:

// create a new javascript Date object based on the timestamp

var date = new Date(parseInt(x));

// hours part from the timestamp

var hours = ("0" + date.getHours()).slice (-2);

// minutes part from the timestamp

var minutes = ("0" + date.getMinutes()).slice (-2);

// seconds part from the timestamp

var seconds = ("0" + date.getSeconds()).slice (-2);

Lloyd

Re: Tooltips on values of multigraph

Submitted by Sergegsx on Fri, 20/04/2012 - 23:14.

ive got the same issue, my x axis are 2 hours off whilst the tooltip shows the correct hour. any idea why this could be?

I am using unix timestamp saved in a database of my own.

Thank you very much

Re: Tooltips on values of multigraph

Submitted by Larsjo on Sun, 22/04/2012 - 09:19.

Great addon, thanks

Re: Tooltips on values of multigraph

Submitted by mharizanov on Sun, 22/04/2012 - 20:51.

Mine is also off, quite irritating.

I did a temporary sort of fix,

I changed this part, added the text in yellow

//-------------------------------------------------------------------------------

// Plot Graph

//-------------------------------------------------------------------------------

function plotGraph()

{

var plot = $.plot($("#placeholder"), plotdata, {

grid: { show: true, hoverable: true, clickable: true },

//yaxis: { min: 0},

//y2axis: { min: 0},

xaxis: { mode: "time",

min: ((start)),

max: ((end)),

tickFormatter: function (val, axis) {

// create a new javascript Date object based on the timestamp

var date = new Date(parseInt(val));

// hours part from the timestamp

var hours = ("0" + date.getHours()).slice (-2);

// minutes part from the timestamp

var minutes = ("0" + date.getMinutes()).slice (-2);

// seconds part from the timestamp

var seconds = ("0" + date.getSeconds()).slice (-2);

var formattedTime = date.getDate() + '/' + (date.getMonth()+1) + ' '+hours + ':' + minutes;

return formattedTime ;

}

selection: { mode: "xy" },

legend: {

position: "nw",

}

});

return plot;

}

Re: Tooltips on values of multigraph

Submitted by kisskovi on Wed, 19/12/2012 - 09:15.

Hi,

just inserted the code, but no tooltips at all.
Is this working with emoncms v3?

Kisskovi

Re: Tooltips on values of multigraph

Submitted by mharizanov on Wed, 19/12/2012 - 10:47.

v3 changed a bit, use this line

$("#graph").bind("plothover", function (event, pos, item) {

instead of

$("#placeholder").bind("plothover", function (event, pos, item) {

and it will work (tested)

Re: Tooltips on values of multigraph

Submitted by fluppie007 on Wed, 19/12/2012 - 11:25.

Does this also work with the new modular version?

Re: Tooltips on values of multigraph

Submitted by mharizanov on Wed, 19/12/2012 - 13:13.

Haven't tested, but this is FLOT functionality, so should work, and if not - minimal effort would be required to get it going

Re: Tooltips on values of multigraph

Submitted by kisskovi on Wed, 19/12/2012 - 13:41.

it solved my problem,

thanks!

:-)

OpenEnergyMonitor