How to superimpose objects in JsROOT canvas?

[Serguei_Kolos1]

Hello

Sorry if I missed something obvious. The README file contains an example that shows how to draw multiple objects from the same ROOT file in the same canvas, but I can’t figure out how to do the same for two objects which are taken from different sources, e.g.:

      import { draw, httpRequest } from 'https://root.cern/js/latest/modules/main.mjs';
      let obj1 = await httpRequest(URL1, 'object');
      let obj2 = await httpRequest(URL2, 'object');

      // draw('drawing', obj, 'hist'); 
      // the line above can draw one object, but how can I draw both obj1 and ob2 in the same 'drawing' div?

Cheers

[linev]

Hi,

In principle, here one uses same logic as in ROOT.
When calling obj->Draw() it just append to the current canvas.

Here if obj1 and obj2 are histograms, one can do:

await draw('drawing', obj1, 'hist');
await draw('drawing', obj2, 'hist same');

If second object is primitive like TLatex, “same” is not required.

Regards,
Sergey

[Serguei_Kolos1]

Hi Sergey

Thank you for the quick reply. In fact that was the first thing that I tried out. The first histogram object was successfully drawn, but after I called draw() function second time with ‘hist same’ option I got completely empty blanc canvas. If I pressed the right mouse button anywhere in this canvas I got a drop-down TCanvas menu so the canvas is there but it contains nothing.

UPD: I don’t know if this is related but I got the following error in JS console when drawing second histogram:

Error funcs.grx is not a function  at TypeError: funcs.grx is not a function
    at TH1Painter.drawNormal (TH1Painter.mjs:653:33)
    at TH1Painter.draw1DBins (TH1Painter.mjs:831:19)
    at TH1Painter.mjs:1223:33
    at async ~/:17:7

Cheers,
Serguei

[linev]

Hi Serguei,

I add demo showing usage of “same” draw option. Here is it:

https://jsroot.gsi.de/dev/demo/draw_same.htm

In your case something wrong with the histogram.
Can you provide JSON code for both histograms?

Regards,
Sergey

[Serguei_Kolos1]

Hi Sergey

Thank you for looking into this. I’m very glad that the feature works and I’ll appreciate if you could tell me what’s wrong with my histograms, which I attached to this message as a tarball (this Web page doesn’t allow me to attach json files (.

h.tgz (4.7 KB)

Cheers,
Serguei

[linev]

In your JSON files not a histograms but canvases are stored.
It is not possible to superimpose canvas objects in this way.

Either you request from the server histograms (preferable way) or try to extract histogram
from list of canvas primitives as:

const canv1 = await httpRequest('h1.json', 'object');
const canv2 = await httpRequest('h2.json', 'object');
const hist2 = canv2.fPrimitives.arr[1]; // first object is TFrame
await draw('drawing', canv1, '');
await draw('drawing', hist2, 'hist same');

[Serguei_Kolos1]

Many thanks, this works like a charm.
May I ask you one more question. I want to display in a Web page a few histograms, which are being constantly updated, so I’m planing to redraw them periodically. If the user of the Web page changes some visualisation parameters, e.g. set the log scale to one of the axes, changed position of the stat box, increased font size, etc., is there a way to preserve all these changes when drawing a new version of the same histogram?

[linev]

One can use redraw() function provided by JSROOT.
But you should work with histograms - not with canvases.

In case of single histogram it is very simple. One can periodically call:

const hist1 = await httpRequest(JSON1, 'object');
redraw('drawing', hist1);

In such case all interactive changes (like zooming or draw options) will be preserved.
Here is simple demo

If you want to superimpose several histograms and update them - create THStack object and draw/redraw it. This is most easy way.

If you continue work with TCanvas, you may loose most of interactive changes by calling redraw

[Serguei_Kolos1]

Great! Thank you for a very comprehensive explanation. I’ll give it a try.

Cheers,
Serguei