JSROOT: Tooltip callback click handler for TGraphs

ROOT
1

I tried to adapt the Tooltip user handler example from JavaScript ROOT API examples for a TGraph, by changing createHistogram to createTGraph and providing the arrays needed. The webpage displays the graph without logging any errors. When I move the mouse over the graph point, the tooltip displays. When I click on a point, the user tooltip handler does not seem to activate, the user_tooltip div shows ‘No info’.

Should the UserClickHandler work for a TGraph? I saw it work perfectly for TH2D.

2

Hi,

It is difficult to help you without seeing source code.
But you can try to use Tooltip lines example as starting point.
It shows how TGraph object can be created and painted.
Plus demo show how content of tooltip box can be modified.

You can add at the end of the file following lines for graph painter:

painter.configureUserTooltipHandler(info => {
    console.log('name', info.name, 'graph bin', info.bin);
});

Regards,
Sergey

3

Hi,
I am trying to use the click handler with the graph. I modified the example a little. If I remove the part that replaces the histogram with a graph, it runs as it should. The click handler does not work with the graph, I’m not sure how to fix this.
Thanks for your help.
Naomi.
```

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Use of tooltip callback in JSROOT</title>
      <link rel="shortcut icon" href="../img/RootIcon.ico"/>
      <script type="importmap">
        { "imports": { "jsroot": "https://root.cern/js/latest/modules/main.mjs" } }
      </script>
   </head>
 
   <body>
      <div id="user_tooltip">Place for info</div> 
      <div id="object_draw" style="position: relative; width: 800px; height: 600px;"></div>
   </body>
 
   <script type='module'>
 
      import { createTGraph, createHistogram, draw, redraw } from 'jsroot';
      let cnt = 0;
     
      function UserHandler(kind, info) {
         if (!info) {
            document.getElementById('user_tooltip').innerText = 'No info';
            return false;
         }
 
         // show info
         document.getElementById('user_tooltip').innerText = `Handler: ${kind} Name: ${info.name} Bin: ${info.bin}`;
         return true; // means event is handled and can be ignored
      }
 
 
      function updateGUI() {
         // if getting histogram from THttpServer as JSON string, one should parse it like:
         // let histo = parse(your_json_string);
 
         // this is just generation of histogram
          let histo = createHistogram('TH2I', 20, 20);
	  let drawoption = 'col';
	  
         for (let iy = 0; iy < 20; iy++)
            for (let ix = 0; ix < 20; ix++) {
               let bin = histo.getBin(ix+1, iy+1), val = 0;
               switch (cnt % 4) {
                  case 1:
                     val = ix + 19 - iy;
                     break;
                  case 2:
                     val = 38 - ix - iy;
                     break;
                  case 3:
                     val = 19 - ix + iy;
                     break;
                  default:
                     val = ix + iy;
                     break;
               }
               histo.setBinContent(bin, val);
            }

	  // -----  try with a TGraph ------
	  
	  const xx = [1,2,3,4,5];
	  const yy = [3,4,2,7,5];
	  histo = createTGraph(5,xx,yy);
	  histo.fMarkerStyle = 8;
	  histo.fMarkerColor=887;
	  histo.fMarkerSize = 0.6;	  
	  drawoption = 'ap';
          // -------------------------------

          histo.fName = 'generated';
          histo.fTitle = `Drawing`;
          redraw('object_draw', histo, drawoption).then(painter => {

             painter.configureUserClickHandler(info => UserHandler('click', info));
             painter.configureUserDblclickHandler(info => UserHandler('dblclick', info));

         });
      }
 
      updateGUI();
 
   </script>
</html>
4

Hi Naomi,

For the TGraph painter configureUserClickHandler is not implemented.
So one only gets double-click and tooltip handlers as users callbacks.

In next JSROOT version I will try to implement one.

Regards,
Sergey

5

I add functionality to JSROOT dev version.
You can try your code with:

   <script type="importmap">
        { "imports": { "jsroot": "https://jsroot.gsi.de/dev/modules/main.mjs" } }
   </script>
6

Excellent! Thank you!
Naomi.

7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.