CODEWITHSUNDEEP
javascriptcanvascharts
Dantuzzo
Dantuzzo

Reputation: 271

Javascript ChartJS updating chart and canvas permanently

I made a chart in chartJS and I would like to update it using new data based on what the user chooses from a drop down list, using the same canvas. The problem is when i do the update function, the chart updates with the new data but it keeps coming back to the original chart after a while. How can i solve this? Here's the code, thank you for any help:

/* Original Chart */
var ctx3 = document.getElementById("canvas3").getContext("2d");

var canvas3 = new Chart(ctx3, {
    type: 'line',
    data: {
        labels: stationRentalsLabels,
        datasets: [{
            label: 'Wypożyczenia',
            fillColor: "rgba(220,280,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            backgroundColor: "rgba(153,255,51,0.4)",
            data: stationRentalsData
        }]
    }
});

/* event listener on drop-down list, when triggered, update chart */
select.addEventListener('change', function() {
    updateChart()
});

/* Update Chart */
function updateChart() {
    var stationRentalsHoursTemp = [];
    var stationRentalName = [];

    var determineHour = selectNumber.options[selectNumber.selectedIndex].innerHTML;
    for (var i = 0; i < stationRentalsHours.length; i++) {
        if (determineHour == stationRentalsHours[i]) {
            stationRentalsHoursTemp.push(stationRentalsData[i])
            stationRentalName.push(stationRentalsLabels[i]);
        }
    }

    /* Updated Chart */
    var ctx3 = document.getElementById("canvas3").getContext("2d");
    var canvas3 = new Chart(ctx3, {
        type: 'line',
        data: {
            labels: stationRentalName,
            datasets: [{
                label: 'Wypożyczenia',
                fillColor: "rgba(220,280,220,0.5)",
                strokeColor: "rgba(220,220,220,1)",
                backgroundColor: "rgba(153,255,51,0.4)",
                data: stationRentalsHoursTemp
            }]
        }
    });
}

Upvotes: 1

Views: 2107

Answers (1)

acesmndr
acesmndr

Reputation: 8515

You are creating new chart on update function in the same div as before but in order to do that you need to destroy the previous instance of the chart by calling the destroy function before calling the updateChart function.

canvas3.destroy();

Another approach to solving your problem is by replacing the data not the chart itself when the updateChart function is called by calling the update function(Not initializing a new chart)

function updateChart() {
    var stationRentalsHoursTemp = [];
    var stationRentalName = [];

    var determineHour = selectNumber.options[selectNumber.selectedIndex].innerHTML;
    for (var i = 0; i < stationRentalsHours.length; i++) {
        if (determineHour == stationRentalsHours[i]) {
            stationRentalsHoursTemp.push(stationRentalsData[i])
            stationRentalName.push(stationRentalsLabels[i]);
        }
    }
    // just update the label and dataset not the entire chart
    canvas3.data.labels = stationRentalName;
    canvas3.data.datasets[0].data = stationRentalsHoursTemp;
    canvas3.update();

}

Upvotes: 2

Related Questions