How to create a Ntuple/Ttrees structure directly in JSROOT

je_flc · January 12, 2022, 10:47am

Is it possible to create a Ntuple/Ttrees structure directly in JSROOT and display it in the ROOT web browser?

I see how to create scater plots, and histograms in javascript, but not how to create ROOT objects hierarchy, is it possible to acheive this ?

Thanks in advance

JF

linev · January 12, 2022, 11:58am

Hi,

JSROOT provides possibility to read data from existing TTree object from ROOT file.
One can read selected branches and perform complex TTree::Draw operations.

It is not possible to create new TTree object and write it into the file.
One should use ROOT C++ code for such purposes.
ROOT provides THttpServer class which allows to use TTree object directly - via so called “player”.
See snapshot of such functionality here:

Regards,
Sergey

je_flc · January 12, 2022, 1:26pm

Thanks for your clear answer,

I thought you will anser this…

I need JSROOT for some feature of ROOT in my web application, data is already in the DOM.

Can I use prototype of javascript JSROOT objects to manipulate/populate them myself ?

linev · January 12, 2022, 2:02pm

Can I use prototype of javascript JSROOT objects to manipulate/populate them myself

You can create histograms or graphs object directly in JavaScript. There are several such examples here:

Like: th2 or multigraph

And some information can be found in reference:

https://root.cern/js/latest/jsdoc/JSROOT.html#.createHistogram
https://root.cern/js/latest/jsdoc/JSROOT.html#.createTGraph

je_flc · January 12, 2022, 2:02pm

Hi again,
I already tested
root.cern/js/latest/jsdoc/JSROOT.html#.createHistogram
and
root.cern/js/latest/jsdoc/JSROOT.html#.createTGraph
but how to create 3D scatter plots or other 3D objects?

Cheers
JF

linev · January 12, 2022, 2:07pm

You want to use TH3 or TGraph2D objects?
Example of supported draw options you can find here:

je_flc · January 12, 2022, 2:08pm

Thanks, I am looking at this now!

je_flc · January 12, 2022, 2:11pm

But I cant find the code to populate those TH3 scatter from javascript,

it is exactly what I am after …

thanks to help me on this!

JF

linev · January 12, 2022, 2:17pm

I will add example with TH3.

je_flc · January 12, 2022, 2:37pm

that will be great if you can give me the code to populate a 3D scatter plots with 3 series of floats.

thanks in advance

JF

linev · January 12, 2022, 3:20pm

Here is demo:

And this is source code:

github.com

root-project/jsroot/blob/master/demo/th3.htm

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Create, draw and update TH3 object</title>
   <script src="../scripts/JSRoot.core.js" type="text/javascript"></script>
</head>
<body>
   <div id="object_draw" style="width: 1200px; height: 800px"></div>

   <script type='text/javascript'>
      let cnt = 0;
      let histo = JSROOT.createHistogram("TH3I", 20, 20, 20);
      histo.fXaxis.fXmin = -10;
      histo.fXaxis.fXmax = 10;
      histo.fYaxis.fXmin = -10;
      histo.fYaxis.fXmax = 10;
      histo.fZaxis.fXmin = -10;
      histo.fZaxis.fXmax = 10;
      histo.fName = "generated";

This file has been truncated. show original

je_flc · January 12, 2022, 4:21pm

perfect.

thanks a LOT!

Cheers
JF