JsROOT standalone multiple graphics with labeled axis and legend

I’m trying to display multiple graphics with labeled axis and legend on web page without creating json/root file on server. Is it possible to add legend and axis labels to TMultiGraph object created using JSROOT.CreateTMultiGraph(), or is there any other way to do what I need?

Thank’s in advance!


There are two solutions of your problem.

First, you can create canvas with multigraph, custom labels and legends in plain ROOT and store it in the ROOT file (binary or JSON). After such object is loaded into JavaScript, you just replace some TGraph data and display them.

Second, you create all necessary objects directly in JavaScript.
This will include special histogram instance with custom axis labels (like in normal ROOT).
And creation of TLegend object with several entries.

Depending from your task, one or another solution is preferable.
If you can decide, which way is better for you, I can provide appropriate example.



This is solution for second case, when all objects created in JavaScript:



Thank you Sergey, second solution is great for me! :slight_smile:


I’m trying to do something similar and the script worked for me as well.

However in my case, I would like to add to the Multigraph a TGraphErrors together with some TGraphs , however I was trying to add it like JSROOT.CreateTGraphErrors but I’ve found that there is no method to create a TGraphErrors in JSRootCore.js.

Could you please let me know how to define it with all objects created as JavaScripts objects ?

Another question is how to change the the /color/position of the axis title, for example change the title to the center position?

Thanks in advance.


Hi Jorge,

Yes, there is no such method.
There are many variants of TGraph-based classes with errors and it is difficult to support all of them.
You can create TGraphErrors class with following methods:

   var gr = JSROOT,CreateTGraph(5, [1,2,3,4,5], [5,3,7,2,9]);
   gr._typename = "TGraphErrors";
   gr.fEX = [0.2, 0.2, 0.2, 0.2, 0.2];
   gr.fEY = [1, 1, 1, 1, 1];  

[quote]Another question is how to change the the /color/position of the axis title, for example change the title to the center position?

If you want to change axes properties, you need to modify bits of correspondent axis:

   // change title settings
   h1.fXaxis.fTitleColor = 3;
   h1.fXaxis.fTitleSize = 0.05;
   // change labels settings
   h1.fXaxis.fLabelColor = 2; 
   h1.fXaxis.fLabelSize = 0.03; 
   h1.fXaxis.fLabelOffset = 0.02; 

Here h1 is histogram, used for axis drawing.


Thank you very much Sergey.