Earlier my charts were auto updating but after some changes to how i'm parsing the data they now only render if I change views. After some looking around It seems that I need to call an update function but i'm unsure how to reference it and where to call it?
<template>
<div class="container">
<line-chart v-for="(photon,key) in photons" :key="photon.id" :ytitle="key" :data="photon.psVoltage" ytitle="ps-voltage" height="250px"></line-chart>
</div>
</template>
<script>
let psVoltage = [];
let photons = {};
export default {
data() {
return {
photons,
}
},
mounted() {
this.streamData();
},
methods: {
streamData() {
// LIVE PUSH EVENTS
if (typeof (EventSource) !== "undefined") {
var eventSource = new EventSource(
"http://10.10.30.13:8030/v1/Events/?access_token=687b5aeb26375742de5d36b65f");
eventSource.addEventListener('open', function (e) {
console.log("Opened connection to event stream!");
}, false);
eventSource.addEventListener('error', function (e) {
console.log("Errored!");
}, false);
eventSource.addEventListener('ps-voltage', function (e) {
var parsedData = JSON.parse(e.data);
if (parsedData.coreid in photons) {
photons[parsedData.coreid].psVoltage.push([parsedData.published_at, parsedData.data])
} else {
photons[parsedData.coreid] ={}
photons[parsedData.coreid].psVoltage=[]
}
}, false);
}
}
}
}
</script>
<style scoped>
h2 {
text-align: center;
}
</style>
Your data has to be inside Vue's data and add an update data method
<template>
<div class="container">
<line-chart v-for="(photon,key) in photons" :key="photon.id" :ytitle="key" :data="photon.psVoltage" ytitle="ps-voltage" height="250px"></line-chart>
</div>
</template>
<script>
export default {
data() {
return {
psVoltage: null,
photons: null,
}
},
mounted() {
this.streamData();
},
methods: {
updateData(e) {
var parsedData = JSON.parse(e.data);
if (parsedData.coreid in this.photons) {
this.photons[parsedData.coreid].psVoltage.push([parsedData.published_at, parsedData.data])
} else {
this.photons[parsedData.coreid] ={}
this.photons[parsedData.coreid].psVoltage=[]
}
},
streamData() {
// LIVE PUSH EVENTS
if (typeof (EventSource) !== "undefined") {
var eventSource = new EventSource(
"http://10.10.30.13:8030/v1/Events/?access_token=687b5aeb26375742de5d36b65f");
eventSource.addEventListener('open', function (e) {
console.log("Opened connection to event stream!");
}, false);
eventSource.addEventListener('error', function (e) {
console.log("Errored!");
}, false);
eventSource.addEventListener('ps-voltage',updateData , false);
}
}
}
}
</script>
<style scoped>
h2 {
text-align: center;
}
</style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.