David-Desmaisons / vue-plotly

📈 vue wrapper for plotly.js
https://david-desmaisons.github.io/vue-plotly/
MIT License
256 stars 74 forks source link

extendTraces functionality? #1

Open mpconte opened 5 years ago

mpconte commented 5 years ago

Hello,

does updating the data property regularly of a plot (e.g. via something like setInterval) automatically update the plot as well? I can't seem to reproduce this if it is.

Thanks.

David-Desmaisons commented 5 years ago

Yes, data props is reactive: Check it online here: https://david-desmaisons.github.io/vue-plotly/ you can udpate the data props and see the graph updating

mpconte commented 5 years ago

I'm unable to reproduce this with the following code via version 6.4.1:

<template>
    <plotly :id='id' :layout="layout" :data="traces" :displayModeBar="false"/>
</template>

<script>
    import { Plotly } from "vue-plotly";

    export default {
        name: "SamplePlot",
        components: {
            Plotly
        },
        data() {
            return {
                traces: [{
                    x: [],
                    y: [],
                    mode: 'lines',
                    type: 'scatter'
                }],

                layout: {
                    title:  "Sample plot",
                }
            }
        },
        methods: {
            addPoint: function(point) {
                this.traces[0].x.push(point['x']);
                this.traces[0].y.push(point['y']);
            },
            resetPlot: function() {
                this.clearData();
            },
            clearData: function() {
                this.traces[0]['x'] = [];
                this.traces[0]['y'] = [];
            },
        },
        created: function() {
            var self = this;
            var tm = setInterval(function () {
                let len = self.traces[0].x.length;
                self.addPoint({'x': len, 'y': Math.random()});
                if (len === 50) clearInterval(tm);
            }, 3000);
        }
    }
</script>

<style scoped>

</style>
Rhovian commented 4 years ago

The above code does not work for me. I only get a single initial point and no updates.