Open mpconte opened 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
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>
The above code does not work for me. I only get a single initial point and no updates.
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.