Home » Forums » Archived: Software

Tooltips on values of multigraph

Submitted by mharizanov on Fri, 20/04/2012 - 17: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;            
            }
        }
    });
 
 
 
‹ Best strategy for handling rain fall recording on emoncms datagateway stops sending data to emoncms.org in 24h ›
»
Lloyd's picture

Re: Tooltips on values of multigraph

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

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

Lloyd

»
Lloyd's picture

Re: Tooltips on values of multigraph

Submitted by Lloyd on Fri, 20/04/2012 - 21: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
»
Sergegsx's picture

Re: Tooltips on values of multigraph

Submitted by Sergegsx on Fri, 20/04/2012 - 22: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

»
Larsjo's picture

Re: Tooltips on values of multigraph

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

Great addon, thanks

»
mharizanov's picture

Re: Tooltips on values of multigraph

Submitted by mharizanov on Sun, 22/04/2012 - 19: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;
   }
 
»
kisskovi's picture

Re: Tooltips on values of multigraph

Submitted by kisskovi (not verified) on Wed, 19/12/2012 - 08:15.

Hi,

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

Kisskovi

»
mharizanov's picture

Re: Tooltips on values of multigraph

Submitted by mharizanov on Wed, 19/12/2012 - 09: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)

»
fluppie007's picture

Re: Tooltips on values of multigraph

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

Does this also work with the new modular version?

»
mharizanov's picture

Re: Tooltips on values of multigraph

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

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

»
kisskovi's picture

Re: Tooltips on values of multigraph

Submitted by kisskovi (not verified) on Wed, 19/12/2012 - 12:41.

it solved my problem,

thanks!

:-)

»
Hayder's picture

Re: Tooltips on values of multigraph

Submitted by Hayder on Wed, 13/11/2013 - 10:36.

Hi

I try to do this code but i get no thing

I use emoncms V5

»
TrystanLea's picture

Re: Tooltips on values of multigraph

Submitted by TrystanLea on Wed, 13/11/2013 - 14:43.

Just tried it in v5, one line needs to be changed:

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

to

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

 

 

»
TrystanLea's picture

Re: Tooltips on values of multigraph

Submitted by TrystanLea on Wed, 13/11/2013 - 14:56.

Il get this committed into the next release, definitely a nice feature.

»
Hayder's picture

Re: Tooltips on values of multigraph

Submitted by Hayder on Wed, 13/11/2013 - 16:26.

it solved my problem. 

Thank you very much dear  

 

»
Paul Reed's picture

Re: Tooltips on values of multigraph

Submitted by Paul Reed on Wed, 13/11/2013 - 23:52.

Nice one Martin, a good addition to emoncms.

 

Paul

»
Hayder's picture

Re: Tooltips on values of multigraph

Submitted by Hayder on Thu, 14/11/2013 - 12:23.

Hello again

How can I change a location buttons. it they appear on the graph and covered a part of it

I would like to be in the upper graph

 

As shown in your images display 
 
Thanks 
»

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.