Chart.js: Unable to Create Multiple Charts Per Page

Created on 19 Sep 2014 · 3Comments · Source: chartjs/Chart.js

I am attempting to Create Multiple charts per page.
What occurs is the last Chart will render the first one will not.

For Simplicity sake i have used the example files for a bar graph and a Pie chart

here is the code that is used

<!doctype html>
<html>
    <head>
        <title>Bar Chart</title>
        <script src="./Chart.js"></script>
    </head>
    <body>
        <div style="width: 20%">
                <canvas id="canvas" height="450" width="600"></canvas>
                <script>
                    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
                    var barChartData = {
                        labels : ["January","February","March","April","May","June","July"],
                        datasets : [
                            {
                                fillColor : "rgba(297,125,49,1)",
                                strokeColor : "rgba(0,0,0,1)",
                                highlightFill: "rgba(220,220,220,0.75)",
                                highlightStroke: "rgba(0,0,0,1)",
                                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                            },
                            {
                                fillColor : "rgba(217,217,217,1)",
                                strokeColor : "rgba(0,0,0,1)",
                                highlightFill : "rgba(165,165,165,1)",
                                highlightStroke : "rgbargba(0,0,0,1)",
                                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                            }
                        ]
                    }
                    window.onload = function(){
                        var ctx = document.getElementById("canvas").getContext("2d");
                        window.myBar = new Chart(ctx).Bar(barChartData, {
                            responsive : true
                        });
                    }
            </script>
        </div>
        <div style="width: 20%">
            <canvas id="chart-area" width="300" height="300"/>
            <script>
                var pieData = [
                        {
                            value: 300,
                            color:"#ff1800",
                            highlight: "#ffa49a",
                            label: "Red"
                        },
                        {
                            value: 50,
                            color: "#00960b",
                            highlight: "#80d286",
                            label: "Green"
                        },
                        {
                            value: 100,
                            color: "#ed7d31",
                            highlight: "#ecad83",
                            label: "Orange"
                        },
                        {
                            value: 40,
                            color: "#a5a5a5",
                            highlight: "#dcdcdc",
                            label: "Grey"
                        },
                        {
                            value: 120,
                            color: "#000000",
                            highlight: "#6f6e6e",
                            label: "Dark Grey"
                        }

                    ];

                    window.onload = function(){
                        var ctx = document.getElementById("chart-area").getContext("2d");
                        window.myPie = new Chart(ctx).Pie(pieData);
                    };
            </script>
        </div>
    </body>
</html>

Source

Woogles

Most helpful comment

It's due to you have set the onload function twice, so the second one over write the first one. (and of course, the first chart will not show.)
you can simply combine the two 'onload' function.

window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData);

// move the first 'onload' function to here.
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
    responsive : true
});

};

cadmuxe on 20 Sep 2014

👍3

All 3 comments

It's due to you have set the onload function twice, so the second one over write the first one. (and of course, the first chart will not show.)
you can simply combine the two 'onload' function.

window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData);

// move the first 'onload' function to here.
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
    responsive : true
});

};

cadmuxe on 20 Sep 2014

👍3

Awesome
Thank you I am not sure How i missed that

_Eric YacoubProductivity through play. Control through balance. Have a good
day, every
day.----------------------------------------------------------------------------------------_

On Fri, Sep 19, 2014 at 10:45 PM, Koonwah Chen [email protected]
wrote:

It's due to you have set the onload function twice, so the second one over
write the first one. (and of course, the first chart will not show.)
you can simply combine the two 'onload' function.

window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData);

// move the first 'onload' function to here.
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});

};

—
Reply to this email directly or view it on GitHub
https://github.com/nnnick/Chart.js/issues/638#issuecomment-56254796.