Struggling with inputting data into a ChartJS line-chart instance. The chart only displays one point with the right data but an incorrect label (named 'label'):
The odd thing is, the extracted arrays appear to be accurate as seen in the console log observers: View arrays here
I need some help figuring this out. I initially suspected it was a syntax issue, but even after reviewing the ChartJS documentation, I'm unable to pinpoint the problem. Below is the code snippet (I realize that I unnecessarily repeated the 'data' and 'filled' arrays for testing purposes only.):
<template>
<div>
<ModelNavbar/>
<line-chart v-if="loaded" :data="chartData"></line-chart>
</div>
</template>
<script>
import Vue from 'vue';
import ModelNavbar from '@/components/ModelNavbar';
export default {
name: 'charts',
props: ["items"],
components: {
ModelNavbar
},
data() {
return {
loaded: false,
chartData: '',
file: null,
spdMes: [],
perPage: 5,
fields: [ {key: 'id', label: 'ID'},
{key: 'spdMesRpm', label: 'Rotary Speed (Rev/s)'}]
}
},
async created()
{
await Vue.axios.get('http://localhost:8002/outputservice/spd/findAll')
.then((response) =>{
this.spdMes = response.data.data.items;
console.warn(this.spdMes);
});
},
async mounted() {
this.loaded = false
Vue.axios.get('http://localhost:8002/outputservice/spd/findAll')
.then((response) =>{
this.dataList = response.data.data.items;
this.chartData = {
labels: this.dataList.map(item => item.id),
datasets: [
{
label: 'Measured Speed',
data: this.dataList.map(item => item.spdMesRpm)
}
]
}
this.loaded = true
console.warn(this.chartData);
});
}
}
</script>