Javascript window.onload function not loading for multiple charts with Chart.js

Question

I'm using Chart.js to display some charts. When I use the onload function for the pie chart it loads correctly on the page, when I add a second variable to onload for bar-chart, nothing will display.

My javascript code looks like this

    var config = {
    type: 'pie',
    data: {
        datasets: [
            {
        data : [10, 30, 40, 50],
        backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C",
                "#949FB1",
                "#65b13b",

            ],
        }],
        labels: ["4G", "5G", "Mano"],
    },
        options: {
        responsive: true
    }
};

var barChartData = {
    type: 'bar',
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
            {
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,1)",
                data: [65, 59, 90, 81, 56, 55, 40]
            },
            {
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 96, 27, 100]
            }
        ]
    options: {
        responsive: true

    },

};

window.onload = function() {
    var ctx = document.getElementById("pie-chart").getContext("2d");
    window.myPie = new Chart(ctx, config);
};
    var bctx = document.getElementById("bar-chart").getContext("2d");
    window.myBar = new Chart(bctx, barChartData);
};

My html code looks like this:

<canvas id="bar-chart" class="chart-holder" height="250" width="538"></canvas>
<canvas id="pie-chart" class="chart-holder" height="250" width="538"></canvas>

I've looked at other solutions but they are all very complicated and I feel like it's only something simple.

You need to get rid of that stray }; between those two parts of the function. — Pointy
– Pointy, Commented Jun 29, 2018 at 13:52

Ankit Agarwal · Accepted Answer · 2018-06-29 13:53:26Z

1

The bar-chart code is outside the window.onload function. Put that inside the window.onload function:

window.onload = function() {
    var ctx = document.getElementById("pie-chart").getContext("2d");
    window.myPie = new Chart(ctx, config);

    var bctx = document.getElementById("bar-chart").getContext("2d");
    window.myBar = new Chart(bctx, barChartData);
};

answered Jun 29, 2018 at 13:53

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript window.onload function not loading for multiple charts with Chart.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related