JS ROOT changing Y axis range of TCanvas object when being displayed in browser

Hi All,

So I have a TCanvas that is being written to a root file that is then being displayed in a web browser via some html script using JS root. I have been looking at plots like this for a while and everything looks good and works nicely (usually). My bit of html/js is below.

   <!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>JSROOT Browser</title>
      <script  type="text/javascript" src="https://root.cern/js/latest/scripts/JSRootCore.js?jq2d&onload=createGUI"></script>
      <script type="text/javascript">
         function createGUI() {
           var h = new JSROOT.HierarchyPainter("example", "myTreeDiv");
           // configure "simple" in provided <dev> element
           // one also can specify "grid2x2" or "flex" or "tabs"
           h.SetDisplay("simple", "myMainDiv");
           // open file and display element
           h.OpenRootFile("JSroot.root", function() {
              h.display("SROL4l_h_nels;1","hist");
           });
        }
     </script>
  </head>
  <body>
    <div style="top: 0; bottom:0; left: 0; right: 0; position: absolute;">
    <div id="myTreeDiv" style="width: 460px; height: 100%; float:left"></div>
    <div id="myMainDiv" style="width: calc(100% - 460px); height: calc(100%); float:right"></div>
    </div>
  </body>
  </html>

The issue I am having is that despite the Y axis being correct If I were to open up the TCanvas in a TBrowser (or just write it to a pdf) as you normally would, for some reason this JS root display method changes the axis range. I have uploaded some pictures showing the plot with the correct axis and then what JS root displays in a web browser. From what I can tell it is changing the Y axis to the range appropriate to the first histogram being drawn on the canvas (i.e. the background stack) if that is helpful. Also the axis range isn’t recoverable (as far as I can tell) in the web browser UI (i.e. ‘zooming out’ on the Y axis).

I have also tried this other way of “drawing” in JS root

JSROOT.OpenFile("JSroot.root", function(file) {         
    file.ReadObject("SROL4l_h_nels;1", function(obj) {
        JSROOT.draw("drawing1", obj, "hist");
    });
});

But I have had the same results.

I already use SetMaximum() in the plotting script for all of these histograms.


The top image is what you would see when saving the canvas to a pdf or opening it up in a TBrowser. The bottom image is what you would see when viewing in a web browser using the html script given.

Any help is greatly appreciated!

Best,
Lucas


_ROOT Version: 6.14/04

Hi Lucas,

Can you provide your ROOT file that I can reproduce problem?
And general remark. JSROOT is absolutely independent implementation of ROOT graphics in web browser.
It cannot be 100% equivalent to original ROOT - but we are trying our best.

Regards,
Sergey

Hi Sergey,

Can you provide your ROOT file that I can reproduce problem?

Surely! It is attached
JSroot.root (63.2 KB)

And general remark. JSROOT is absolutely independent implementation of ROOT graphics in web browser. It cannot be 100% equivalent to original ROOT - but we are trying our best.

Oh of course. But it is a very nice tool to have and I appreciate all the work you guys are doing with it!

Best,
Lucas

Hi Lucas,

Yes, I can reproduce problem.
Fix is very simple: https://github.com/root-project/jsroot/commit/0e2b9266
Some days/weeks later it will appear in next bug-fix release 5.6.1

Regards,
Sergey

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