JavaScript ROOT (JSROOT) provides interactive graphics in the web browsers for most of the ROOT classes like histograms (TH1/TH2/TH3), graphs (TGraph), functions (TF1) and many others. Reading of binary and JSON ROOT files is supported.

The flexible and powerful JSROOT API used in different web-based applications to implement interactive display of user data - CERNBox, iPython notebooks, THttpServer UI and many others.

The JSROOT code, documentation, and many examples can be found on the JSROOT website, with many examples. Its source code repository is in GitHub and there is also a reference guide.

Users’s Guide

The [JSROOT user’s guide] (https://github.com/root-project/jsroot/blob/master/docs/JSROOT.md) describes its installation, how to draw objects in JSROOT, gives a list of supported classes with many examples, and more advanced techniques like superimposing objects and displaying TTree data using the TTree::Draw syntax There is also a chapter about the Geometry viewer and more.

Interactive Graphics

Here is a couple of interactive examples you can also find in the main JSROOT website

Figure: Roofit canvas with different plot styles

Figure: 3D ROOT geometry


In the JSROOT user’s guide, there is also a short introduction on using JSROOT with OpenUI5 to create interactive Web based GUI. OpenUI5 is a web toolkit for developers to ease and speed up the development of full-blown HTML5 web applications. You can find its impressive list of controls here

The association of JSROOT and OpenUI5 allowed us to create the new web based RCanvas and RBrowser classes.

Figure: The new, web based RCanvas.

Figure: The RCanvas with its graphics editor.

Figure: The new, web based RBrowser.