My goal is to refresh my chart with new data from an API call every 5 seconds. However, the chart is updating excessively, rendering each point hundreds of times. After checking the logs, I discovered that there seems to be an infinite loop causing this issue, and I'm unsure how to fix it. Below is the current code snippet:
Please note: The 'graphData' prop is an Array passed from the parent component containing the data retrieved from the API.
ChildComponent.vue
<template>
<div class="graphCard">
<Linechart :chartData="dataCollection" :options="options" />
</div>
</template>
<script>
import Linechart from '@/utils/Linechart.js'
export default {
components: {
Linechart
},
props: ['graphData'],
data() {
return {
collection: []
}
},
computed: {
dataCollection() {
this.collection.push(this.graphData[0])
return {
datasets: [
{
label: 'chart',
backgroundColor: 'indigo',
borderColor: 'indigo',
fill:false,
showLine: true,
data: this.collection
}]
}
},
options() {
return {
id: 'Cumulative',
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
time: {
displayFormats: {
millisecond: 'mm:ss:SS',
quarter: 'MMM YYYY'
}
}
}],
yAxes: [{
ticks: {
//beginAtZero: true
}
}]
}
}
}
LineChart.js
import { Scatter, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Scatter,
mixins: [reactiveProp],
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartData, this.options)
}
}
I also attempted an alternative approach by setting up 'dataCollection' and 'options' as 'data' instead of 'computed,' along with a watcher on the 'graphData' prop. However, the chart failed to update and threw an error "Uncaught TypeError: Cannot read property 'skip' of undefined."