Currently, I am utilizing VueJS 2.0, Laravel 5.3, and Chart.JS.
The page is constructed by initiating AJAX requests with vue.js to retrieve data from Laravel in the form of a JSON object. Some pages require multiple AJAX calls for different sets of data. On one particular page, the chart displays correctly initially. However, upon changing the date, while the page updates accordingly, chart.js retains the data from the previous date, visible when hovering the mouse over the former area.
To provide a clearer understanding, I have provided a gif video link here: . The video demonstrates that data from the selected date (2017-01-08) is displayed correctly, but when moving the mouse towards the center, it shows the old data from the default date (2017-01-09).
The AJAX request function made to Laravel(PHP) is as follows:
fetchEvents: function (date = null) {
this.loading = true;
this.$http.get('data/daily/' + this.selectedDate).then(function (response) {
this.data = response.body;
this.selectedDate = this.data.date;
this.drawChart();
this.loading = false;
}, function (error) {
console.log(error);
});
},
This function subsequently calls darwChart():
drawChart: function () {
// Code for Pie charts mostly remains the same as below
// Comparison with previous dates
var ctx3 = document.getElementById("previousDaysPolar");
var data = [this.data.nxt_summary.total_count,
this.data.total_previous_week.data,
this.data.total_previous_month.data,
this.data.total_previous_year.data];
var previousDays = new Chart(ctx3, {
type: 'polarArea',
data: {
labels: ['Selected Date: ' + this.data.date,
'Previous Week: ' + this.data.total_previous_week.date,
'Previous Month: ' + this.data.total_previous_month.date,
'Previous Year: ' + this.data.total_previous_year.date],
datasets: [{
label: 'Order types',
data: data,
backgroundColor: [
'rgba(96, 110, 103, 0.2)',
'rgba(202, 207, 0, 0.2)',
'rgba(191, 180, 143, 0.2)',
'rgba(242, 239, 233, 0.2)'
],
borderColor: [
'rgba(96, 110, 103, 1)',
'rgba(202, 207, 0, 1)',
'rgba(191, 180, 143, 1)',
'rgba(242, 239, 233, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true
}
});
}
Upon viewing the video, it appears that this function performs as expected by updating the data passed onto the chart. Can you provide any insights as to why the old data persists alongside the new data?