Error Encountered When Attempting to Display Histogram Using jsroot

ROOT
, ,
1

Hello everyone,

I’ve been attempting to display a histogram using jsroot recently, but I’ve encountered the following error:

Uncaught TypeError: Cannot read properties of null (reading 'style')
    at En (d3.mjs:2:20700)
    at ce.style (d3.mjs:2:27988)
    at TCanvasPainter.createCanvasSvg (TPadPainter.mjs:572:24)
    at TCanvasPainter.draw (TCanvasPainter.mjs:814:15)
    at ensureTCanvas (TCanvasPainter.mjs:844:37)
    at THistPainter._drawHist (THistPainter.mjs:2337:14)
    at Object.draw [as func] (TH2Painter.mjs:285:27)
    at performDraw (draw.mjs:384:38)
    at draw.mjs:435:30
    at async test3.html:6:4

Here’s my code:

<script type='module'>
   import { openFile, draw } from 'https://root.cern/js/latest/modules/main.mjs';
   let filename = "http://192.168.0.102/jsroot/ridf2tree/run0029.root";
   let file = await openFile(filename);
   let obj = await file.readObject("hmadc_0;1");
   await draw("drawing", obj, "colz");
</script>

I’ve tried this at http://192.168.0.102/jsroot/test3.html, but the error persists.

I would appreciate any solutions or advice you might have. Thank you very much in advance.

2

Hi and welcome on the forum,

Can you provide ROOT file which makes an error?

Regards,
Sergey

3

Thank you for your assistance.

As a new user, I am unable to paste links. Therefore, please add “https : // drive . google . com” to the following link:

/file/d/12DMX74n5adVgDZJTGo9DIzvLVnxmOZ6q/view?usp=drive_link

Best Regards,
Gen

4

File and data inside is OK.

But probably you missing HTML elements with id “drawing”

5

Below is the updated code snippet that should resolve the problem:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw</title>
    <!-- Import JSROOT from CDN -->
    <script type="text/javascript" src="https://root.cern/js/latest/scripts/JSRootCore.js"></script>
</head>
<body>
    <div id="drawing"></div>

    <script type='module'>
        // Import necessary functions from JSROOT
        import { openFile, draw } from 'https://root.cern/js/latest/modules/main.mjs';
        
        // Asynchronous function to open file and draw histogram
        (async () => {
            try {
                // Specify the path to your ROOT file
                let filename = "http://10.3.176.125/jsroot/ridf2tree/run0029.root";
                
                // Open the file
                let file = await openFile(filename);
                
                // Read the histogram object
                let obj = await file.readObject("hmadc_0;1");
                
                // Draw the histogram in the specified HTML element with the "colz" option
                await draw("drawing", obj, "colz");
            } catch (error) {
                console.error("An error occurred:", error);
            }
        })();
    </script>
</body>
</html>

But, still the histograms are not appearing in the browser, even though there seems no error this time

6

You need provide layout parameters for you div.
Like:

      <div id="drawing" style="width:800px; height:600px"></div>
7

Thank you i could see the histogram.

image
image2930×1910 224 KB

1 Like
8

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