Vue 2.x
chart-js: 2.x
vue-chartjs: 3.x
I am currently working on a project where I need to send data from a websocket in my parent component to a child component to create a dynamic line chart that updates in real-time.
In my Parent.vue file:
<template>
<v-container>
<ChartComponent :aqiLineChartData="aqiLineChartData"/>
</v-container>
</template>
<script>
.
data: function () {
return {
aqiLineChartData: {}
};
},
created: function () {
//call the websocket and get the data
this.aqiLineChartData.lastUpdatedTime = moment(Date.now()).format("h:mm a");
this.aqiLineChartData.data = //websocket data (which is a number)
}
</script>
For the ChartComponent.vue:
<template>
<v-container>
<v-card elevation="2">
<v-card-title>Live AQI Comparison</v-card-title>
<line-chart
:chartData="datacollection"
></line-chart>
</v-card>
</v-container>
</template>
<script>
import LineChart from "./LineChart.js";
export default {
name: "AQIChartComponent",
props: ['aqiLineChartData'],
components: {
LineChart
},
data() {
return {
//data structure for the chart
}
};
//more methods here for creating the chart
};
</script>
And in LineChart.js, we have:
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartData, this.options)
},
};
The goal is to figure out how to efficiently pass websocket data to the child component to update the live line chart. Any insights or suggestions are greatly appreciated.
Thank you!