Why refreshing data using horizontalBar report of Chart.js?

Question

I use horizontalBar report of Chart.js( Version: 2.7.2 ) in my application and I have a problem that refreshing data with jquery with new parameters (so different data are shown) and hovering mouse over report I see old report chart.

Googling I found this branch Destroy chart.js bar graph to redraw other graph in same <canvas> and tried 3 ways to fix this error like:

                var barOptions= {
                    legend: { display: false },
                    title: {
                        display: true,
                        text: 'Quizzes rating'
                    }
                };


/*
                // Fixing way # 1 BLOCK START
                $("#div_canvasQuizzesRating").remove();     // If to uncomment this block I got error : Uncaught TypeError: Cannot read property 'getContext' of null
                $("#div_canvasQuizzesRating").append('<div class="col-md-10 col-md-offset-1">\n' +
                    '                    <div class="panel panel-default">\n' +
                    '                        <div class="panel-body">\n' +
                    '                            <p class=" text-muted small">\n' +
                    '                                Any quiz can be rated from 1 till 5.\n' +
                    '                            </p>\n' +
                    '                            <canvas id="canvasQuizzesRating" width="800" height="450"></canvas>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                </div>');

                // Fixing way # 1 BLOCK END
*/

                var grapharea = document.getElementById("canvasQuizzesRating").getContext("2d");


/*
                // Fixing way # 2 BLOCK START  // If to uncomment this block I DO NOT got error, but hovering mouse I have prior chart data visible
                var chartObject = new Chart(grapharea, { type: 'canvasQuizzesRating', data: valuesArray, options: barOptions });
                chartObject.destroy();
                // Fixing way # 2 BLOCK END
*/

                // $("canvas#chartreport").remove();

                var chartObject= new Chart(grapharea, {
                    type: 'horizontalBar',     // https://www.chartjs.org/docs/latest/charts/bar.html
                    data: {
                        labels: labelsArray,
                        datasets: [
                            {
                                label: "Average rating mark",
                                backgroundColor: this_chartBackgroundColors,
                                // backgroundColor: ["#005500", "#3e95cd", "#8e5ea2", "#ff063c", "#3cba9f", "#e8c3b9", "#ffff00", "#0000ff", "#fb6bff", "#55ffff", "#c6c7ff", "#aaff7f", "#a5aaff", "#fffda6", "#707070", "#c45850", "#dfdf00" ],
                                data: valuesArray
                            }
                        ]
                    },

                    options: barOptions

                });

                // // Fixing way # 3 BLOCK START // If to uncomment this block I DO NOT got error, but hovering mouse I have prior chart data visible
                // chartObject.update();
                // // Fixing way # 3 BLOCK END

The code above has 3 blocks when I tried to fix this error: Fixing way # 1(2,3) BLOCK START But I failed with all of them.

You can look at it by link http://votes.nilov-sergey-demo-apps.tk/admin/report_quizzes_rating (there would be login page with creditials provided). Opening this page results without filters would be shown. Then please select 1 category( like "History" ) and click "Report" and hove mouse over the report - you will see the problem.

How to fix this problem ?

Thanks!

score 1 · Accepted Answer · answered Oct 22 '18 at 07:57

Give global scope to the variable and assign your div to the variable. like below

window.chartObject= new Chart(grapharea, {
                    type: 'horizontalBar',     // https://www.chartjs.org/docs/latest/charts/bar.html
                    data: {
                        labels: labelsArray,
                        datasets: [
                            {
                                label: "Average rating mark",
                                backgroundColor: this_chartBackgroundColors,
                                // backgroundColor: ["#005500", "#3e95cd", "#8e5ea2", "#ff063c", "#3cba9f", "#e8c3b9", "#ffff00", "#0000ff", "#fb6bff", "#55ffff", "#c6c7ff", "#aaff7f", "#a5aaff", "#fffda6", "#707070", "#c45850", "#dfdf00" ],
                                data: valuesArray
                            }
                        ]
                    },

                    options: barOptions

                });

Append below lines above global scope: This will check whether the chart is created or not. If yes it will destroy and redraw the chart

    //clear chart
    if (window.chartObject!= undefined)
        window.chartObject.destroy();

So final code will be :

     if (window.chartObject!= undefined)
                window.chartObject.destroy();


window.chartObject= new Chart(grapharea, {
                    type: 'horizontalBar',     // https://www.chartjs.org/docs/latest/charts/bar.html
                    data: {
                        labels: labelsArray,
                        datasets: [
                            {
                                label: "Average rating mark",
                                backgroundColor: this_chartBackgroundColors,
                                // backgroundColor: ["#005500", "#3e95cd", "#8e5ea2", "#ff063c", "#3cba9f", "#e8c3b9", "#ffff00", "#0000ff", "#fb6bff", "#55ffff", "#c6c7ff", "#aaff7f", "#a5aaff", "#fffda6", "#707070", "#c45850", "#dfdf00" ],
                                data: valuesArray
                            }
                        ]
                    },

                    options: barOptions

                });

Why refreshing data using horizontalBar report of Chart.js?

1 Answers1