[Help needed] Div is destroyed while doing Plot.update or Plot.react

plotly.js
1

Hi !

I’m currently facing a little problem with Plot.react Plot.update.
The problem is, I want to update my plot (which is a scatterGL plot, by the way) with more or less points (depending on a check box checked by the user). But Plot.react and Plot.update both destroy the div where the plot is in, and this has, as a result, put all the other buttons below the plot on it.

Here is what I’m talking about (I can’t show the whole plot, but you get the idea) :

image
image1413×268 47.8 KB

When I’m using this : Plot.purge followed by Plot.newPlot, this works like a charm.

Here is the code I’ve implemented :

    graphic = document.getElementById('graphic');

    //if the graph is already display, we'll re-draw on the same graphic. It'll eat less resources
    if (IS_CREATED) {
        Plotly.purge(graphic); //THIS IS A BAD FIX.
        Plotly.newPlot(graphic, [{
            x: X,
            y: Y,
            mode: 'markers',
            marker: {
                size: 3,
                color: color_value,
                colorscale: color_scale
            },
            type: 'scattergl',
            hoverinfo: 'none' //to hide labels on points
        }], layout, {responsive: true});
        return;
    }

How is it possible to use Plot.react/update without destroying the div ?

Thanks a lot ! :slight_smile:

2

Is it ok if I “up” this a little ? I still need help :slight_smile:

3

Hmm, react and update should not destroy the graph div.

Could you share a code snippet showing how you’re calling them?

4

Hi !

Thank you a lot for your answer. Here is when I try with a react :

    graphic = document.getElementById('graphic');

    //if the graph is already display, we'll re-draw on the same graphic. It'll eat less resources
    if (IS_CREATED) {
        Plotly.react(graphic, [{
            x: X,
            y: Y,
            mode: 'markers',
            marker: {
                size: 3,
                color: color_value,
                colorscale: color_scale
            },
            type: 'scattergl',
            hoverinfo: 'none' //to hide labels on points
        }], layout, {responsive: true});
        return;
    }
    else {
        Plotly.newPlot( graphic, [{
            x: X,
            y: Y,
            mode: 'markers',
            marker: {
                size: 3,
                color: color_value,
                colorscale: color_scale
            },
            type: 'scattergl',
            hoverinfo: 'none' //to hide labels on points
        }], layout, {responsive: true});
        IS_CREATED = true;
    }
}

The problem seem to be here, in the HTML :

<div class="svg-container" style="position: relative; width: 100%; height: 100%">

This div is called by Plot, and its inside the <div id="graphic"> called.

When height is set to 450px, there is no problem. But when it’s set to 100%, the div disappear, causing the image I’ve post before.

I don’t think I have the control on this particular div (svg-container), to fix the height to 450px. Do you have an idea how to proceed ?

Many thanks !!
Marion

PS : You’ve probably noticed… I’m quite new to plotly, and web developement in general.

5

Ok, this morning I’ve tried this :

    if (IS_CREATED) {
        Plotly.purge(graphic);
        Plotly.react(graphic, [{
            x: X,
            y: Y,
            mode: 'markers',
            marker: {
                size: 3,
                color: color_value,
                colorscale: color_scale
            },
            type: 'scattergl',
            hoverinfo: 'none' //to hide labels on points
        }], layout, {responsive: true});
        return;
    }

And it works. I guess the answer was to add a “Plotly.purge” before calling Plotly.react. But, is this a good way to update a plot ?

6

I up this a little, for my last question :slight_smile:

7

Does it have to be class=“svg-container” ?

8

Hi @Zolotoy,

Well, I don’t know. This is not my div (this div appears when plot.ly is called), and I don’t think I have any control over it. I don’t know how to suppress it or resize-it either

9

By the way, I’ve noticed quite an important gap space between the plot and the div svg-container.
Setting height and width on layout doesn’t change anything (the white gap space is still there).

whitespace
whitespace1377×216 17 KB

Did somebody know how to do to set the plot taking the whole space inside this div ?

(Do I need to post another topic more accurate for this question, maybe ?)

Thank you,
Marion

10

Can you show html that has ‘graphic’ div?

11

The HTML code :

               <div class="tile is-child">
                    <!-- Graphic display -->
                    <div class="container is-centered is-widescreen">
                        <div class="notification">
                            <div id="graphic">
                                <!-- Data will be displayed here -->
                            </div>
                        </div>
                    </div>
                </div>

As you can see, I haven’t precise any sizes inside my ‘graphic’ div :confused:

12

Little up, I still looking for an answer to my question :slight_smile:

13

Up again, I still want to know if I’m doing right or wrong :slight_smile:

14

Hi,

I’m still working on this project, and I still haven’t figured out what was wrong.

If anybody knows what could cause this behaviour, any help woud be appreciated !

Thank you :slight_smile: