Canvas is not showing chart on the page

Question

I have different charts in system to visualize feedback data using Canvas and ChartJs.All other visualizations of feedbacks like student , faculty etc are visible but graduate feedback data is not being visualized.

Below is the code not that is not visualizing the charts

   <h3 style="text-align: center; background-color: lightgrey;">Graduate Student Feedback Visualization</h3>

        <canvas id="graduate-chart1" class="mx-auto" style="width:100%;max-width:600px"></canvas>
        <br> 
        <canvas id="graduate-chart2" class="mx-auto" style="width:100%;max-width:600px"></canvas>
        <br>
        <canvas id="graduate-chart3" class="mx-auto" style="width:100%;max-width:600px"></canvas>
        <br>
        <canvas id="graduate-chart4" class="mx-auto" style="width:100%;max-width:600px"></canvas>
        <br>
        <canvas id="graduate-chart5" class="mx-auto" style="width:100%;max-width:600px"></canvas>
        //upto 16
        <canvas id="graduate-chart16" class="mx-auto" style="width:100%;max-width:600px"></canvas>

Here is the script

<script>

        var xValues = ["very satisfied", "satisfied", "neutral", "dissatisifed", "very dissatified"];
        var yValues = {{ Graduate_Feedback_data }};
        var barColors = [
            "#b91d47",
            "#00aba9",
            "#2b5797",
            "#e8c3b9",
            "#1e7145"
        ];

        graduate_questionnaire = ["The work in the program is too heavy and induces a lot of pressure.",
                                "The program is effective in enhancing team- working abilities.",
                                 /// some more questions here
                                "Discipline",
                                "The link between theory and practice"]
        graduate_chart_ids = ["graduate-chart1", "graduate-chart2", "graduate-chart3", "graduate-chart4", "graduate-chart5", "graduate-chart6", "graduate-chart7", "graduate-chart8", "graduate-chart9","graduate-chart10", "graduate-chart11", "graduate-chart12", "graduate-chart13","graduate-chart14","graduate-chart15",'graduate-chart16']
        for (let i = 0; i < graduate_chart_ids.length; i++) {
            new Chart(graduate_chart_ids[i], {
                type: "pie",
                data: {
                    labels: xValues,
                    datasets: [{
                        backgroundColor: barColors,
                        data: yValues[i]
                    }]
                },
                options: {
                    title: {
                        display: true,
                        text: graduate_questionnaire[i]
                    }
                }

            }

            )
        }
    </script>

all are not visualizing , i have done visualization of other questionnaires which are working but graduate qquestionnaire charts are not working. — Amiable.Azam, Jun 14 '22 at 13:49
Your question says that all of them are viseble but only 1 is not visualizing :) — LeeLenalee, Jun 14 '22 at 13:49
Failed to create chart:can't acquire context from the given item... — Amiable.Azam, Jun 14 '22 at 14:13

score 0 · Answer 1 · answered Jun 15 '22 at 08:32

Your script is running before the dom is fully build. This means that the canvas elements don't exist yet so chart.js tries to get the context of something that is not available.

To resolve this you need to make sure the script runs after your dom is fully loaded. There are multiple ways to do this as described here in this so answer.

From linked answer:
These solutions will work:

As mentioned in comments use defer:

<script src="deferMe.js" defer></script>

or

<body onload="script();">

or

document.onload = function ...

or even

window.onload = function ...

Canvas is not showing chart on the page

1 Answers1