Is there a way to ensure that the graph is only rendered and filled with data after the data has been returned from the backend? Currently, even though the data is returned, the graph appears blank.
Here is my JavaScript code:
methods: {
refresh(){
this.loading = true
this.graf = false
this.$axios.get("/Op/Search")
.then(res => {
this.loading = false;
this.graf = true;
this.op = res.data
this.$refs.chartTypes.updateSeries([{
name: 'TYPES',
data: [this.op.cars, this.op.lines, this.op.cors]
}])
})
}
}
data() {
return {
loading: true,
graf: false,
}
}
And here is my HTML code:
<div class="col-7">
<center v-show="loading" style="margin-top: 90px;"> <loading/> </center>
<div v-show="graf">
CARS
</div>
<div v-show="graf">
<apexchart
ref="chartTypes"
style="background: transparent;margin-left: -8px;"
type="bar"
height="300"
:options="chartype"
:series="seriestypes"
></apexchart>
</div>
</div>
It seems like the data processing speed is faster than the rendering process. How can I make sure that the request is processed first, wait for the rendering component, and then fill in the data?