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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<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>
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<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>
<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>

9 thoughts on “Chart.js Sample: Two Doughnut Charts”

  1. Great plugin! 🙂
    Do you have an idea how to change the (a) value with a binding to a range slider (caldera forms as example)?

  2. Hi,
    Does this work the same for zingCharts? I’m trying to load two wordclouds on the same page, but it doesn’t work.
    I’ve tried using this method, but i’m struggling implementing it in the wordcloud-script.

    1. Hi,
      I created a new sample with two wordclouds using zingchart, to demonstrate how it works.
      The blazing-charts plugin loads all the libraries in the footer, to makes the loading of the page faster. So until the page is fully loaded, no variable defined by those libraries are available.
      So make sure things like:
      zingchart.MODULESDIR = “//cdn.zingchart.com/modules/”;
      are defined inside “window.onloaded” or “jQuery(document).ready”
      if you open developer console of the browser, it should tell you what went wrong.

  3. Hi, first of all, thanks for the amazing plugin. I’m wondering about how one could go about animating the charts as the user scrolls down the page, on pages with multiple charts too.

  4. Dear Massoud,

    I love the plugin.
    I have used it to make a donut chart with chart.js.
    Sadly enough I am not able to change the legend of the donut chart.
    I thought that this could be part of the chart.bundle.js script but even after including options=”bundle” in the shortcode it does not seem to work.

    I believe that my changes in the code are correct (options => legend => labels => position, fontFamily, fontColor), so I am wondering if legend is excluded from the library somehow. Can you help me out?

    Cheers,

    Luc

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.