How to add new data to an existing graph with plot.ly

Question

I want to add new data to an existing graph. Meaning that I want to merge the existing rendered data points with new ones to render the old and the new data points together. I'm trying to use Plotly.newPlot to render new data like this:

const TESTER = document.getDocumentById('tester');
const dataPoints = {
    x: [1, 2, 3], 
    y: [1, 2, 3], 
    text: ['1 text', '2 text', '3 text '], 
    size: [1, 2, 3], 
    color: [1, 2, 3]
};
const layout = {
    margin: {
        t: 0
    },
    hovermode: 'closest'
};
const dataToRender = {
    x: [dataPoints.x],
    y: [dataPoints.y],
    text: [dataPoints.text],
    mode: 'markers',
    marker: {
        size: dataPoints.size,
        color: dataPoints.color,
        sizemode: 'area',
        showscale: true,
        colorscale: 'Portland',
        colorbar: {
            xanchor: 'right',
            len: 0.5,
            title: 'km'
        }
    }
};

Plotly.newPlot(TESTER, dataToRender, layout);

But I always end up receiving a plotly-latest.min.js:32 Uncaught TypeError: Cannot read property 'style' of undefined. What am I doing wrong?

Thanks in advance

Looks like this is now possible with Plotly.extendTraces? plot.ly/javascript/streaming — user993683
– user993683, Commented Aug 21, 2017 at 0:35

Maximilian Peters · Accepted Answer · 2016-07-29 18:58:03Z

3

The plotly format is sometimes a bit tricky. You need to change the data structure as follows:

const dataToRender = [{
    x: dataPoints.x,
    y: dataPoints.y,
    text: dataPoints.text,
    mode: 'markers',
    marker: {
        size: dataPoints.size,
        color: dataPoints.color,
        sizemode: 'area',
        showscale: true,
        colorscale: 'Portland',
        colorbar: {
            xanchor: 'right',
            len: 0.5,
            title: 'km'
        }
    }
}];

i.e. all data goes in an array which contains the data itself and the metainformation, layout, etc.

Add square brackets around your dataToRender
Add curly brackets around {x ...marker}
Remove the square brackets before dataPoints.x, y and text

Now let's get to the fun of adding data. We first make a variable out of your const dataPoints to store the initial data set (I modified the size a little bit). In the function tester() we randomly add one point and update/redraw the graph.

<script>
    var dataPoints = {
        x: [1, 2, 3], 
        y: [1, 2, 3], 
        text: ['1 text', '2 text', '3 text '], 
        size: [50, 250, 500], 
        color: [1, 2, 3]
    }

    var t = setInterval(tester, 1000);

    function tester() {
        const TESTER = document.getElementById('tester');

        dataPoints.x.push(Math.random() * 3);
        dataPoints.y.push(Math.random() * 3);
        dataPoints.size.push(Math.random() * 500);
        dataPoints.color.push(1 + Math.random() * 2);

        const layout = {
            margin: {
                t: 0
            },
            hovermode: 'closest'
        };
        const dataToRender = [{
            x: dataPoints.x,
            y: dataPoints.y,
            text: dataPoints.text,
            mode: 'markers',
            marker: {
                color: dataPoints.color,
                size: dataPoints.size,
                sizemode: 'area',
                showscale: true,
                colorscale: 'Portland',
                colorbar: {
                    xanchor: 'right',
                    len: 0.5,
                    title: 'km'
                }
            }
            }];

        Plotly.newPlot(TESTER, dataToRender, layout);
    }
</script>

Here is the working JSfiddle

edited Jul 29, 2016 at 18:58

answered Jul 29, 2016 at 13:57

Maximilian Peters

31.8k12 gold badges95 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

thorstorm Over a year ago

I tried what you told me and it did not merge the previous data points with the new ones, just shows the new ones. Also, It drew the new data points in lines, something like this, not data points, as I had them.

thorstorm Over a year ago

I skipped to point out that size: dataPoints.size and color: dataPoints.color are not shown aswell.

Maximilian Peters Over a year ago

Thanks for the comment! I updated my answer accordingly, hopefully that's what you need.

thorstorm Over a year ago

Try this JSfiddle to see increasing time consuming as number of data points increase. "I make a lot of graphs" (Lisa Simpson) LOL

Maximilian Peters Over a year ago

I really like your time plot, very informative! As far as I know the JS version of plotly doesn't really support streaming. I faced the same problem but didn't find a better solution than the one I posted.

|

Collectives™ on Stack Overflow

How to add new data to an existing graph with plot.ly

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related