Chart.js Sample: Two Doughnut Charts

After updating the Blazing Charts plugin with the latest version of Chart.js, 2.2.2, I had to update these snippets. This is because everything is changed with that charting library.
If you are going to use the new version of Chart.js, be prepared to rewrite your scripts.

To draw two or more charts in one page, we have to consider a few points:

• Javascript window.onload can be used only once. So if you want to run the scripts inside this function, you can collect all the scripts in one “chart snippet” and run it inside that function. Then introduce the chart divs for those charts in other chart snippets, and place it whenever the chart should goes.
• Or you can use jQuery(document).ready(function() {…}); for each snippet
• All the chart snippets will be included in one page. So if you repeat the same variable name in another snippet, it will override the last value you assigned to it. I recommend to use unique variable names in each snippet.
• DIV id that you introduce to each script to draw a chart on, should be unique.

and another doughnut chart:

Here is the code used to draw the first chart:

<div id="canvas-holder-2" style="width:30%; direction:ltr; margin-left:auto; margin-right:auto; display:table;">
   <canvas id="chart-area" width="250" height="250"/>
</div>
<script>
var doughnutData = {
    labels: [
        "DM orange",
        "DM rosa",
        "DM lilla",
        "DM gron",
        "DM turkis"
    ],
    datasets: [
        {
            data: [43667, 453, 80924, 896, 88],
            backgroundColor: [
                "#ec8316",
                "#AF23A5",
                "#66008C",
                "#568E14",
                "#00829B"
            ],
            hoverBackgroundColor: [
                "#ff8300",
                "#9d3292",
                "#522e91",
                "#5d9632",
                "#0083a8"
            ]
        }]
};

jQuery(document).ready(function() {
    var ctx = document.getElementById("chart-area").getContext("2d");

    window.myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: doughnutData,
        options: {
            responsive: true,
            elements: {
                arc: {
                    borderColor: "#000000"
                }
            },
            cutoutPercentage: 50
        },
        animation:{
            animateScale: true
        }
    });
});
</script>

and the next chart:

<div id="canvas-holder-1" style="width:30%; direction:ltr; margin-left:auto; margin-right:auto; display:table;">
   <canvas id="chart-area2" width="250" height="250"/>
</div>
<script>
var doughnutData1 = {
    labels: [
        "orange",
        "rosa",
        "lilla",
        "gron",
        "turkis"
    ],
    datasets: [
        {
            data: [10913, 2693, 4104, 26832, 21443],
            backgroundColor: [
                "#ec8316",
                "#AF23A5",
                "#66008C",
                "#568E14",
                "#00829B"
            ],
            hoverBackgroundColor: [
                "#ff8300",
                "#9d3292",
                "#522e91",
                "#5d9632",
                "#0083a8"
            ]
        }]
};

jQuery(document).ready(function() {
var ctx1 = document.getElementById("chart-area2").getContext("2d");

    window.myDoughnutChart2 = new Chart(ctx1, {
        type: 'doughnut',
        data: doughnutData1,
        options: {
            responsive: true,
            elements: {
                arc: {
                    borderColor: "#333"
                }
            },
            cutoutPercentage: 50
        },
        animation:{
            animateScale: true
        }
    });
});
</script>