Auto refresh plot with JSRoot

ROOT
1

Hi, Let’s say I want to do a 100% custom UI in HTM+CSS+JS with JSROOT, and load data from a server. I would like to auto refresh the display every second in the case data has changed, with some basic polling:

This works:

<html>
<body>
<div id="container" style="width:600px; height:400px; border:1px solid gray;"></div>
<script type='module'>
import { httpRequest, draw } from 'https://root.cern/js/latest/modules/main.mjs';
const drawNow = () => {
    document.getElementById("container").innerHTML = "";    
    httpRequest("http://localhost:8080/graph1/Graph/root.json", "object").then((obj) => { return draw("container", obj, "colz"); });
}
const refresh = () => { // basic polling
    drawNow();    
    setTimeout(refresh, 1000);
}
refresh();
</script>
</body>
</html>

but document.getElementById("container").innerHTML = "" causes a white screen flickering. On the other hand, if I don’t “clear” like this, the new data points are overwritten on the same plot axis, which is not ok either. How to do this properly?
(i.e. clear the data points (but not redraw the axis), and redraw only the new points)

Thanks!

2

Hi,

Did you try redraw method of JSROOT?
It designed exactly for this and you not need to use innerHTML = "".

Also you can simply use URL:

http://localhost:8080/graph1/Graph/draw.htm?monitoring=1000

To constantly update object drawing.
Some info you can find in jsroot docu

Regards,
Sergey

1 Like
3

Thanks, redraw works indeed.

you can simply use URL:
http://localhost:8080/graph1/Graph/draw.htm?monitoring=1000
To constantly update object drawing.

Yes but I need to have the auto-refreshing plot in a specific div container in one part of a self-made custom HTML/CSS/JS interface, so this solution is not adapted, is that right? (except with an iframe but it seems I don’t really need an iframe for now)

4

If httpRequest and redraw works for you - then it is most straightforward solution for you.

draw.htm can be used in iframe - if necessary.
And one also can check how draw.htm implemented.

1 Like
5

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