0👍
All of your code looks correct. It looks like your final step is to set the data from your API into your graph:
created() {
axios
.get("/project/api/user")
.then((res) => {
this.data = res.data.datasets[0].data
}
same in your changevalue()
method:
changevalue() {
axios
.get("/project/api/user", {
params: {
startDate: this.startDate,
endDate: this.endDate
}
})
.then((res) => {
this.data = res.data.datasets[0].data
})
}
0👍
I have done this problem..I want to share with you.Can help you newbies like me :
data() {
return {
startDate: '',
endDate: '',
loaded: false,
data: {
labels: null,
datasets: null,
},
options: {
title: {
display: true,
text: 'Report user'
},
}
},
created() {
this.loaded = false;
axios
.get("/project/api/user")
.then((res) => {
console.log(res.data); //Result {"datasets":[{"label":"User active","data":[10,0,0,0,0,0,0,0],"fill":false,"borderColor":"#9ec6cb"}],"labels":["2021-09-07","2021-09-08","2021-09-09","2021-09-10","2021-09-11","2021-09-12","2021-09-13","2021-09-14"]};
//handle code
var result = JSON.parse(res.data);
this.data.labels = result.labels;
this.data.datasets = result.datasets;
this.loaded = true;
})
},
methods: {
changevalue() {
this.loaded = false;
axios
.get("/project/api/user", {
params: {
startDate: this.startDate,
endDate: this.endDate
}
})
.then((res) => {
var result = JSON.parse(res.data);
this.data.labels = result.labels;
this.data.datasets = result.datasets;
this.loaded = true
})
}
}
<chartjs-component-line-chart
v-if="loaded"
:data="data"
:options="options"
:plugins="plugins"
/>
Document : enter link description here
Source:stackexchange.com