I have some devices that i'm trying to build live charts from the data they're collecting. Currently i'm trying to read and display their wifi signal strength but i'm having trouble tying things together. How would I build the Xaxis off of the published at data, and chart the wifi signal?
Example of parsedData variable
{coreid: "1f0039000547363339343638", data: "-21", published_at: "2018-11-02T17:36:15.794Z", ttl: 60}
home.vue
<template>
<div>
<line-chart :chart-data="chartData" />
</div>
</template>
<script>
import LineChart from '@/components/lineChart'
let wifiSignal = []
export default {
components: {
LineChart
},
data() {
return {
wifiSignal: null,
datacollection: null,
probes: [],
probe: [],
chartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October',
'November', 'December'
],
datasets: [{
label: 'Wifi Signal',
backgroundColor: '#f87979',
data: this.wifiSignal
}]
}
}
},
created() {
this.streamData()
},
mounted() {
// grab probe data
axios.get('http://10.10.10.1:8080/v1/devices')
.then((res) => {
(this.probes = res.data)
// console.log(res.data)
}).catch((error) => {
console.log(error.res);
});
},
methods: {
streamData() {
// LIVE PUSH EVENTS
if (typeof (EventSource) !== "undefined") {
var eventSource = new EventSource(
"http://10.10.10.1:8080/v1/Events");
eventSource.addEventListener('open', function (e) {
console.log("Opened connection to event stream!");
}, false);
eventSource.addEventListener('error', function (e) {
console.log("Errored!");
}, false);
eventSource.addEventListener('WiFi Signal', function (e) {
var parsedData = JSON.parse(e.data);
let cat = parseInt(parsedData.data)
console.log(cat)
wifiSignal.push(cat);
}, false);
}
}
},
};
</script>
linechart.js
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}