Using JSRootIO independently of sample UI

I’m working on developing a web UI in AngularJS & Bootstrap for an application whose backend processing is done in C++/ROOT. The C++ code draws histograms, formulas, etc. on TCanvas and saves those to .root files. I had hoped to use JSRootIO to display this TCanvas in the web UI.

I’ve found that the JSRootIO implementation is tightly coupled to the sample UI HTML implementation. For example, the JSRootIO JavaScript specifically looks for particular HTML element IDs to draw the tree & canvas. Without these element IDs present, the drawing silently fails.

I had a problem where if I scripted calls into JSRootIO to read the file and display a known TCanvas, the drawing would silently fail unless I added timeouts to wait for the file to load. However, I found this topic ( Design-time specifying hists to draw with ROOTjs class) that pointed me to creating a userCallback(file) function to use for calling showObject().

What would be ideal is if the JSRootIO JavaScript code had an API that accepted the URL of the file, the keyname & cycle of the item to draw, and the ID of the HTML element to draw the result in. That way I could make a single JavaScript call to get a TCanvas drawn. This solution would also work best if it didn’t rely on other special HTML element IDs like “status” and “report”, but rather just drew the TCanvas in the element given.

The next best option would be to have sample HTML & JavaScript that shows how to load the file independently of the JSRootIO HTML. This would use the userCallback(file) function and describe how then draw the results.


Hi Tim,

Next JavaScript ROOT version 3 should give answer on all your questions.
We are just about to fix last bugs (one was reported by you) and prepare
some documentation with examples. It should be ready by mid of November.

Please read preliminary documentation here:

This was main reason for redesign of JavaScript ROOT code. Now API is much more flexible - it can be used in arbitrary HTML page.

This problem is solved now. Callback function from file opening will be called only when file is really read and ready. The simplest example is:

new JSROOT.TFile("http://server/your_file_name.root", function(file) {
    file.ReadObject("c1;1", function(obj) {
       JSROOT.draw("your_element_id", obj);

Few mode details about JSROOT file API you will find here:

Thanks for the quick response! The update to the JSRootIO API is much appreciated!