How to draw an Ellipse with JSRoot?

Hi, i am new using JSROOT, and i would like to reproduce this example with javascript (for example):
However i am not able to find the simple javascript source code that produced it?
(Ctrl U gives a long code without the word ellipse).
It should be simple, i am sorry.

This output is produced by a ROOT macro displaying the graphics using JSROOT.
In the Javascript code the ellipse might be rendered as a polygon (that’s why the word ellipse might not show). @linev can give more details I guess.

Hi Frédéric,

Function is here:

It used to draw TEllipse and some similar classes (like TCrown).
In the same source file you will find other examples of relative simple drawings - like TLine or TBox


@fredo.faure I find this thread interesting enough to move it to the generic ROOT section. Objections?

No objections of course.

thank you for your answers. But I am not yet able to draw an ellipse. I think that i have not understood the basic use of jsroot.
Here is my tentative javascript:

How can i correct it minimally to draw a simple ellipse please?
Thanks for your patience.

Hi Frédéric,

First of all - you need to have ellipse object stored in JSON or ROOT file.
Copy such file on any web server. And then write HTML page like this:

This is example how histogram is read, exactly same code will work for TEllipse.
There are also examples for JSON files.

If you want to implement your own painter - few more steps are required.

  1. Create your own JavaScript file with appropriate draw functions (like JSRootPainter.more.js)
  2. Register your draw functions to the JSROOT - using JSROOT.addDrawFunc() function (see examples in JSRootPainter.js)

But this is very advanced (not documented) usage of JSROOT - you should try first with supported ROOT classes to see how everything works together. There are many-many supported classes - see:

Only if you miss something important - one should start with implementing of specialized painters.
And you will definitely need more help from us.


Hi Sergey,
Thanks very much for your answer and for the development of JSROOT that is very useful.
If i understand correctly, this is not possible for the moment to write easily in javascript, the equivalent version of (an example here in C++):

TEllipse e(0.2,0.3,0.1); // (center (x,y) and radius r

and similarly for other 2dim objects described here:
Best regards,

Hi Frédéric,

Most of listed classes already supported. Do you missing some important for you?

Next ROOT release (and current “master” branch) will include support of web-based TCanvas output.
Just run macro with --web option:

root --web macro.C

While here C++ code is used, much more classes will be supported - like TTree painting or TPie

It is possible and relatively easy. Main problem - this is not documented while API is not finalized. If you write painter code now, you may need to change it half a year later. If you want to implement JavaScript painter for some existing ROOT class - best way is implementing code inside JSROOT.


This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.