Chart.js pie chart not rendering after update-CodePudding

in my current project I want to display charts in a dashboard with the data for the selected month. You can go forward or backward one month with a button. This all works great, but if I now want to update the charts with the data for the month, they are also loaded, but the chart is not rendered and there is no error message.

What is wrong?

Ajax result example: [{"session_intervall":5,"session_longrun":10,"session_speedwork":2,"session_stabilisation":0,"session_competition":0,"session_cycling":5,"session_swimming":0}]

$.ajax({
        url: "../diary/includes/training/diary-training-monthly-session-stats.php?month="   month   "&year="   year,
        type: "GET",
        success: function(monthly_stats) {

            var session_intervall = [];
            var session_longrun = [];
            var session_speedwork = [];
            var session_stabilisation = [];
            var session_competition = [];
            var session_cycling = [];
            var session_swimming = [];

            for(var i in monthly_stats) {
                session_intervall.push(monthly_stats[i].session_intervall),
                session_longrun.push(monthly_stats[i].session_longrun),
                session_speedwork.push(monthly_stats[i].session_speedwork),
                session_stabilisation.push(monthly_stats[i].session_stabilisation),
                session_competition.push(monthly_stats[i].session_competition),
                session_cycling.push(monthly_stats[i].session_cycling),
                session_swimming.push(monthly_stats[i].session_swimming)
            }

            session_intervall = parseInt(session_intervall);
            session_longrun = parseInt(session_longrun);
            session_speedwork = parseInt(session_speedwork);
            session_stabilisation = parseInt(session_stabilisation);
            session_competition = parseInt(session_competition);
            session_cycling = parseInt(session_cycling);
            session_swimming = parseInt(session_swimming);

            var userMonthlySessionStatsData = [session_intervall, session_longrun, session_speedwork, session_stabilisation, session_competition, session_cycling, session_swimming];

            var options = {
                legend: {
                    display: false
                },
                plugins: {
                    labels: {
                        render: 'value',
                        fontSize: 14,
                        fontStyle: 'bold',
                        fontColor: '#fff',
                        textShadow: true,
                        shadowColor: 'rgba(0,0,0,0.75)'
                    }
                }
            };
        
            var ctx = $("#monthy_session_stats"); 

            var userDiaryMonthSessionStatsChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    datasets: [{
                        data: {},
                        backgroundColor: ['#e8e838', '#43bbd1', '#ff9f40', '#49d1b8', '#4286c9', '#38c7a1', '#ff497d']
                    }],
        
                    labels: ['Intervall', 'Longrun', 'Speedwork', 'Stabilisation', 'Competition', 'Cycling', 'Swimming']
                },
                options: options
            });

            userDiaryMonthSessionStatsChart.data.datasets.data = userMonthlySessionStatsData;
            userDiaryMonthSessionStatsChart.update();
        }
    })

CodePudding user response：

The chart constructor takes a 2d context as its first parameter, you're passing a jQuery object. Assuming #monthy_session_stats is your chart,

var ctx = $("#monthy_session_stats")[0].getContext('2d');

CodePudding user response：

After a lot of testing and researching, I found the solution. First, the chart must be initialised and then the data must be fed in, this in two functions. So I have divided my function into two. In the first one the empty chart is created and in the other one the data for the chart is read out / updated.

emptyChart();
var chart = emptyChart();
userDiaryMonthSessionStatsData(user_id, filtermonth, filteryear, chart);

function emptyChart() {
    
    var options = {
        legend: {
            display: false
        },
        plugins: {
            labels: {
                render: 'value',
                fontSize: 14,
                fontStyle: 'bold',
                fontColor: '#fff',
                textShadow: true,
                shadowColor: 'rgba(0,0,0,0.75)'
            }
        }
    };

    var ctx = $("#monthy_session_stats"); 

    var userDiaryMonthSessionStats = new Chart(ctx, {
        type: 'pie',
        data: {
            datasets: [{
                backgroundColor: ['#e8e838', '#43bbd1', '#ff9f40', '#49d1b8', '#4286c9', '#38c7a1', '#ff497d']
            }],

            labels: [
                'Intervall',
                'Longrun',
                'Speedwork',
                'Stabilisation',
                'Competition',
                'Cycling',
                'Swimming'
            ]
        },
        options: options
    });

    return userDiaryMonthSessionStats;
}

function chartData(user_id, month, year, chart) {

    $.ajax({
        url: "../diary/includes/training/diary-training-monthly-session-stats.php?user_id="   user_id   "&month="   month   "&year="   year,
        type: "GET",
        success: function(monthly_stats) {

            var session_intervall = [];
            var session_longrun = [];
            var session_speedwork = [];
            var session_stabilisation = [];
            var session_competition = [];
            var session_cycling = [];
            var session_swimming = [];

            for(var i in monthly_stats) {
                session_intervall.push(monthly_stats[i].session_intervall),
                session_longrun.push(monthly_stats[i].session_longrun),
                session_speedwork.push(monthly_stats[i].session_speedwork),
                session_stabilisation.push(monthly_stats[i].session_stabilisation),
                session_competition.push(monthly_stats[i].session_competition),
                session_cycling.push(monthly_stats[i].session_cycling),
                session_swimming.push(monthly_stats[i].session_swimming)
            }

            session_intervall = parseInt(session_intervall);
            session_longrun = parseInt(session_longrun);
            session_speedwork = parseInt(session_speedwork);
            session_stabilisation = parseInt(session_stabilisation);
            session_competition = parseInt(session_competition);
            session_cycling = parseInt(session_cycling);
            session_swimming = parseInt(session_swimming);

            var userMonthlySessionStatsData = [session_intervall, session_longrun, session_speedwork, session_stabilisation, session_competition, session_cycling, session_swimming];

            chart.data.datasets[0].data.pop();
            chart.data.datasets[0].data = userMonthlySessionStatsData;
            chart.update();
        }
    })
}