Namespace: JSROOT

JSROOT

Core methods of JavaScript ROOT

Classes

BasePainter

Base painter class in JSROOT

HierarchyPainter

Painter of hierarchical structures

ObjectPainter

Painter class for ROOT objects

TAttFillHandler

Handle for fill attributes

TFile

Interface to read objects from ROOT files

TSelector

Class to read data from TTree

TTree

JSROOT methods for ROOT TTree class

WebWindowHandle

Client communication handle for RWebWindow.

Namespaces

GEO

Collection of TGeo-related methods, loaded with JSROOT.require('geo').then(geo => ...)

gStyle

Insiance of TStyle object like in ROOT

Math

Collection of Math-related methods

Painter

Collection of Painter-related methods and classes

settings

Central JSROOT settings, independent from JSROOT.gStyle

Members

staticJSROOT.batch_mode

Indicates if JSROOT runs in batch mode

staticJSROOT.nodejs

Indicates if JSROOT runs inside Node.js

staticJSROOT.source_dir

Location of JSROOT scripts

Automatically detected and used to load other JSROOT scripts when required

staticJSROOT.version

JSROOT version id and date

Produced by concatenation of JSROOT.version_id and JSROOT.version_date Like "6.3.0 19/11/2021"

staticJSROOT.version_date

JSROOT version date

Release date in format day/month/year like "19/11/2021"

staticJSROOT.version_id

JSROOT version id

For the JSROOT release the string in format "major.minor.patch" like "6.3.0" For the ROOT release string is "ROOT major.minor.patch" like "ROOT 6.26.00"

Methods

staticJSROOT.cleanup(dom)

Safely remove all JSROOT drawings from specified element

Name Type Description
dom string | object

id or DOM element

Example
JSROOT.cleanup("drawing");
JSROOT.cleanup(document.querySelector("#drawing"));

staticJSROOT.connectWebWindow(arg){Promise}

Method used to initialize connection to web window.

Name Type Description
arg object

arguments

Name Type Default Description
prereq string optional

prerequicities, which should be loaded first

openui5src string optional

source of openui5, either URL like "https://openui5.hana.ondemand.com" or "jsroot" which provides its own reduced openui5 package

openui5libs string optional

list of openui5 libraries loaded, default is "sap.m, sap.ui.layout, sap.ui.unified"

socket_kind string optional

kind of connection longpoll|websocket, detected automatically from URL

credits number 10 optional

number of packets which can be send to server without acknowledge

receiver object

instance of receiver for websocket events, allows to initiate connection immediately

first_recv string

required prefix in the first message from TWebWindow, remain part of message will be returned in handle.first_msg

prereq2 string optional

second part of prerequcities, which is loaded parallel to connecting with WebWindow

href string optional

URL to RWebWindow, using window.location.href by default

Returns:
Type Description
Promise ready-to-use WebWindowHandle instance

staticJSROOT.create(typename)

Create some ROOT classes

Supported classes: "TObject", "TNamed", "TList", "TAxis", "TLine", "TText", "TLatex", "TPad", "TCanvas"

Name Type Description
typename string

ROOT class name

Example
let obj = JSROOT.create("TNamed");
obj.fName = "name";
obj.fTitle = "title";

staticJSROOT.createHistogram(typename, nbinsx, nbinsy, nbinsz){Object}

Create histogram object of specified type

Name Type Description
typename string

histogram typename like 'TH1I' or 'TH2F'

nbinsx number

number of bins on X-axis

nbinsy number optional

number of bins on Y-axis (for 2D/3D histograms)

nbinsz number optional

number of bins on Z-axis (for 3D histograms)

Returns:
Type Description
Object created histogram object
Example
let h1 = JSROOT.createHistogram("TH1I", 20);
h1.fName = "Hist1";
h1.fTitle = "Histogram title";
h1.fXaxis.fTitle = "xaxis";
h1.fYaxis.fTitle = "yaxis";
h1.fXaxis.fLabelSize = 0.02;

staticJSROOT.createTGraph(npoints, xpts, ypts)

Creates TGraph object

Name Type Description
npoints number

number of points in TGraph

xpts array optional

array with X coordinates

ypts array optional

array with Y coordinates

staticJSROOT.createTHStack()

Creates THStack object

As arguments one could specify any number of histograms objects

Example
let nbinsx = 20;
let h1 = JSROOT.createHistogram("TH1F", nbinsx);
let h2 = JSROOT.createHistogram("TH1F", nbinsx);
let h3 = JSROOT.createHistogram("TH1F", nbinsx);
let stack = JSROOT.createTHStack(h1, h2, h3);

staticJSROOT.createTMultiGraph()

Creates TMultiGraph object

As arguments one could specify any number of TGraph objects

Example
let gr1 = JSROOT.createTGraph(100);
let gr2 = JSROOT.createTGraph(100);
let gr3 = JSROOT.createTGraph(100);
let mgr = JSROOT.createTMultiGraph(gr1, gr2, gr3);

staticJSROOT.createTPolyLine(npoints, use_int32)

Creates TPolyLine object

Name Type Description
npoints number

number of points

use_int32 boolean optional

use Int32Array type for points, default is Float32Array

staticJSROOT.decodeUrl(url){Object}

decodes URL options after '?' mark

Following options supported ?opt1&opt2=3

Name Type Description
url string optional

URL string with options, document.URL will be used when not specified

Returns:
Type Description
Object with .has(opt) and .get(opt,dflt) methods
Example
let d = JSROOT.decodeUrl("any?opt1&op2=3");
console.log(`Has opt1 ${d.has("opt1")}`);     // true
console.log(`Get opt1 ${d.get("opt1")}`);     // ""
console.log(`Get opt2 ${d.get("opt2")}`);     // "3"
console.log(`Get opt3 ${d.get("opt3","-")}`); // "-"

staticJSROOT.draw(dom, obj, opt){Promise}

Draw object in specified HTML element with given draw options.

An extensive list of support draw options can be found on JSROOT examples page

Name Type Description
dom string | object

id of div element to draw or directly DOMElement

obj object

object to draw, object type should be registered before in JSROOT

opt string

draw options separated by space, comma or semicolon

Returns:
Type Description
Promise with painter object
Example
JSROOT.openFile("https://root.cern/js/files/hsimple.root")
      .then(file => file.readObject("hpxpy;1"))
      .then(obj => JSROOT.draw("drawing", obj, "colz;logx;gridx;gridy"));

staticJSROOT.drawingJSON(dom){string}

Save object, drawn in specified element, as JSON.

Normally it is TCanvas object with list of primitives

Name Type Description
dom string | object

id of top div element or directly DOMElement

Returns:
Type Description
string produced JSON string

staticJSROOT.httpRequest(url, kind, post_data){Promise}

Submit asynchronoues http request

Following requests kind can be specified:

  • "bin" - abstract binary data, result as string
  • "buf" - abstract binary data, result as ArrayBuffer (default)
  • "text" - returns req.responseText
  • "object" - returns JSROOT.parse(req.responseText)
  • "multi" - returns correctly parsed multi.json request
  • "xml" - returns req.responseXML
  • "head" - returns request itself, uses "HEAD" request method
  • "post" - creates post request, submits req.send(post_data)
  • "postbuf" - creates post request, expectes binary data as response
Name Type Description
url string

URL for the request

kind string

kind of requested data

post_data string optional

data submitted with post kind of request

Returns:
Type Description
Promise Promise for requested data, result type depends from the kind
Example
JSROOT.httpRequest("https://root.cern/js/files/thstack.json.gz", "object")
      .then(obj => console.log(`Get object of type ${obj._typename}`))
      .catch(err => console.error(err.message));

staticJSROOT.loadScript(url){Promise}

Load script or CSS file into the browser

Normal JSROOT functionality should be loaded via JSROOT.require method

Name Type Description
url String

script or css file URL (or array, in this case they all loaded secuentially)

Returns:
Type Description
Promise

staticJSROOT.makeSVG(args){Promise}

Create SVG image for provided object.

Function especially useful in Node.js environment to generate images for supported ROOT classes

Name Type Description
args object

contains different settings

Name Type Default Description
object object

object for the drawing

option string optional

draw options

width number 1200 optional

image width

height number 800 optional

image height

Returns:
Type Description
Promise with svg code

staticJSROOT.openFile(arg){object}

Open ROOT file for reading

Generic method to open ROOT file for reading Following kind of arguments can be provided:

  • string with file URL (see example). In node.js environment local file like "file://hsimple.root" can be specified
  • File instance which let read local files from browser
  • ArrayBuffer instance with complete file content
Name Type Description
arg string | object

argument for file open like url, see details

Returns:
Type Description
object
Example
JSROOT.openFile("https://root.cern/js/files/hsimple.root")
       .then(f => console.log(`Open file ${f.getFileName()}`));

staticJSROOT.parse(json){object}

Should be used to parse JSON string produced with TBufferJSON class

Replace all references inside object like { "$ref": "1" }

Name Type Description
json object | string

object where references will be replaced

Returns:
Type Description
object parsed object

staticJSROOT.parseMulti(json){Array}

Parse response from multi.json request

Method should be used to parse JSON code, produced by multi.json request of THttpServer

Name Type Description
json string

string to parse

Returns:
Type Description
Array array of parsed elements

staticJSROOT.reconstructObject(class_name, obj_rawdata, sinfo_rawdata){object}

Reconstruct ROOT object from binary buffer

Method can be used to reconstruct ROOT objects from binary buffer which can be requested from running THttpServer, using root.bin request To decode data, one has to request streamer infos data after object data as it shown in example.

Method provided for convenience only to see how binary IO works. It is strongly recommended to use root.json request to get data directly in JSON format

Name Type Description
class_name string

Class name of the object

obj_rawdata binary

data of object root.bin request

sinfo_rawdata binary

data of streamer info root.bin request

Returns:
Type Description
object
  • created JavaScript object
Example
async function read_binary_and_draw() {
   await JSROOT.require("io");
   let obj_data = await JSROOT.httpRequest("http://localhost:8080/Files/job1.root/hpx/root.bin", "buf");
   let si_data = await JSROOT.httpRequest("http://localhost:8080/StreamerInfo/root.bin", "buf");
   let histo = await JSROOT.reconstructObject("TH1F", obj_data, si_data);
   console.log(`Get histogram with title = ${histo.fTitle}`);
}
read_binary_and_draw();

// request same data via root.json request
JSROOT.httpRequest("http://localhost:8080/Files/job1.root/hpx/root.json", "object")
      .then(histo => console.log(`Get histogram with title = ${histo.fTitle}`));

staticJSROOT.redraw(dom, obj, opt){Promise}

Redraw object in specified HTML element with given draw options.

If drawing was not done before, it will be performed with JSROOT.draw. Otherwise drawing content will be updated

Name Type Description
dom string | object

id of div element to draw or directly DOMElement

obj object

object to draw, object type should be registered before in JSROOT

opt string

draw options

Returns:
Type Description
Promise with painter object

staticJSROOT.require(req){Promise}

Central method to load JSROOT functionality

Following components can be specified

  • 'io' TFile functionality
  • 'tree' TTree support
  • 'painter' d3.js plus basic painting functions
  • 'gpad' basic 2d graphic (TCanvas/TPad/TFrame)
  • 'hist' histograms 2d drawing (SVG)
  • 'hist3d' histograms 3d drawing (WebGL)
  • 'more' extra 2d graphic (TGraph, TF1)
  • 'geom' TGeo support
  • 'v7gpad' ROOT v7 RPad/RCanvas/RFrame
  • 'v7hist' ROOT v7 histograms 2d drawing (SVG)
  • 'v7hist3d' ROOT v7 histograms 3d drawing (WebGL)
  • 'v7more' ROOT v7 special classes
  • 'math' some methods from TMath class
  • 'hierarchy' hierarchy browser
  • 'jq2d' jQuery-dependent part of hierarchy
  • 'openui5' OpenUI5 and related functionality
Name Type Description
req Array | string

list of required components (as array or string separated by semicolon)

Returns:
Type Description
Promise with array of requirements (or single element)

staticJSROOT.resize(dom, arg)

Check resize of drawn element

As first argument dom one should use same argument as for the drawing As second argument, one could specify "true" value to force redrawing of the element even after minimal resize Or one just supply object with exact sizes like { width:300, height:200, force:true };

Name Type Description
dom string | object

id or DOM element

arg boolean | object

options on how to resize

Example
JSROOT.resize("drawing", { width: 500, height: 200 } );
JSROOT.resize(document.querySelector("#drawing"), true);

staticJSROOT.toJSON(obj, spacing){string}

Method converts JavaScript object into ROOT-like JSON

Produced JSON can be used in JSROOT.parse() again When performed properly, JSON can be used in TBufferJSON::fromJSON() method to read data back with C++

Name Type Description
obj object

JavaScript object to convert

spacing number optional

optional line spacing in JSON

Returns:
Type Description
string produced JSON code