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

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) :

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:

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

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

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

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.

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 ?

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

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

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

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).

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

Can you show html that has ‘graphic’ div?

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:

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

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