Wijmo UI for the Web
Create a Doughnut Pie Chart
Wijmo User Guide > Widgets > Chart Widgets > CompositeChart > CompositeChart How To > Create a Doughnut Pie Chart
Show All
Hide All

Building on the Quick Start example, you can create a composite doughnut pie chart. This special type of chart combines two pie charts containing related data. The pie charts share the same center point so they overlap properly.

Note: The data from the larger pie chart measures the use of each browser. The smaller pie chart displays data describing the use of particular versions of the browsers.
  1. In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which and sets several widget options.
    • The X and Y axes are turned off.
    • The tooltip (hint) content is set to show data labels.
    • The header displays title text.
    • Chart types, labels, and data, (as well as radius for the pie chart and marker types for the line chart) are added to the seriesList.
    • Gradient styles are set for seriesStyles and seriesHoverStyles.         

    Drop down and copy script to paste in <head> section

    Script
    Copy Code 
    <script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min",
                "bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
                "knockout": "knockout-3.1.0" //Needed if you use Knockout.
            }
    });
</script>
<script type="text/javascript">
    require(["wijmo.wijcompositechart"], function () {
    $(document).ready(function () {            
        $("#wijcompositechart").wijcompositechart({                
            axis: {                    
                y: {gridMajor: {visible: false}, textVisible: false},
                x: {visible: false, textVisible: false}                
            },                
            animation: {enabled: false },           
            chartLabelStyle: {fill: "#fff"}, 
            hint: {content: function ()
                    {return this.label + ' ' + this.y + '';}
            },            
            header: {text: "Browsers"},            
            seriesList: [
                {                
                type: "pie",               
                legendEntry: true,                
                center: { x: 400, y: 250 },
                radius: 200,
                data: [                    
                    {label: "Chrome", legendEntry: true, data: 38, offset: 0}, 
                    {label: "Firefox", legendEntry: true, data: 36, offset: 0},                     
                    {label: "IE", legendEntry: true, data: 13, offset: 0},                     
                    {label: "Safari", legendEntry: true, data: 8, offset: 0},                     
                    {label: "Other", legendEntry: true, data: 5, offset: 0}
                    ]
                }, 
                {                
                type: "pie",                
                legendEntry: true,                
                center: { x: 400, y: 250 },
                radius: 100,
                data: [                    
                    {label: "15",
                    //Chrome                    

                    legendEntry: false,                    
                    data: 26,                   
                    offset: 0                
                }, {                   
                    label: "14",
                    //Chrome                    

                    legendEntry: false,                    
                    data: 8,                    
                    offset: 0                
                }, {                    
                    label: "",
                    //Chrome                    

                    legendEntry: false,                    
                    data: 4,                    
                    offset: 0                
                }, {                    
                    label: "7",
                    //Firefox                   

                    legendEntry: false,                    
                    data: 20,                    
                    offset: 0                
                }, {                    
                    label: "8",
                    //Firefox                    

                    legendEntry: false,                    
                    data: 10,                    
                    offset: 0                
                }, {                   
                    label: "",
                    //Firefox                   

                    legendEntry: false,                    
                    data: 6,                    
                    offset: 0                
                }, {                    
                    label: "9",
                    //IE                   

                    legendEntry: false,                    
                    data: 6,                    
                    offset: 0                
                }, {                    
                    label: "8",
                    //IE                    

                    legendEntry: false,                    
                    data: 5,                    
                    offset: 0                
                }, {                    
                    label: "",
                    //IE                    

                    legendEntry: false,                    
                    data: 2,                    
                    offset: 0                
                }, {                    
                    label: "5",
                    //Safari                    

                    legendEntry: false,                    
                    data: 5,                    
                    offset: 0                
                }, {                    
                    label: "",
                    //Safari                    

                    legendEntry: false,
                    data: 3,
                    offset: 0
                }, {
                    label: "",
                    legendEntry: false,
                    data: 5,
                    offset: 0
                }]
            }],
            seriesStyles: [
                {fill: "180-#B800CC-#4B00CC", stroke: "#4B00CC", "stroke-width": 1.5, opacity: 1
            }, 
                {fill: "270-#7AADFF-#C37AFF", stroke: "#C37AFF", "stroke-width": 1.5, opacity: 1
            }, 
                {fill: "180-#0099cc-#B0EBFF", stroke: "#2889aa", "stroke-width": 1.5, opacity: 1
            }, 
                {fill: "270-#2200cc-#8C7BE3", stroke: "#3e28aa", "stroke-width": 1.5, opacity: 1
            }, 
                {fill: "180-#6A399E-#9E399B", stroke: "#9E399B", "stroke-width": 1.5, opacity: 1
            }, 
                {fill: "#E2D1FF", stroke: "none", opacity: 0.5
            }, {
                fill: "#D1E2FF", stroke: "none", opacity: 0.5
            }, {
                fill: "#D6D1FF", stroke: "none", opacity: 0.5
            }, {
                fill: "#FFD1D1", stroke: "none", opacity: 0.5
            }, {
                fill: "#D1FFE1", stroke: "none", opacity: 0.5
            }, {
                fill: "#F7FFD1", stroke: "none", opacity: 0.5
            }, {
                fill: "#FFF1D1", stroke: "none", opacity: 0.5
            }, {
                fill: "#FFD1D1", stroke: "none", opacity: 0.5
            }, {
                fill: "#BDF7FF", stroke: "none", opacity: 0.5
            }, {
                fill: "#BDC6FF", stroke: "none", opacity: 0.5
            }, {
                fill: "#FFF0BD", stroke: "none", opacity: 0.5
            }, {
                fill: "#F4BDFF", stroke: "none", opacity: 0.5
            }],
            seriesHoverStyles: [{
                fill: "180-#B800CC-#4B00CC", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
            }, {
                fill: "180-#ff6600-#cb6928", stroke: "#cb6928", "stroke-width": 2, opacity: 1
            }, {
                fill: "180-#0099cc-#2889aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
            }, {
                fill: "180-#2200cc-#3e28aa", stroke: "#3e28aa", "stroke-width": 2, opacity: 1
            }, {
                fill: "180-#cccccc-#dddddd", stroke: "#dddddd", "stroke-width": 2, opacity: 1
            }, {
                fill: "#FFD1E4", stroke: "none", opacity: 0.8
            }, {
                fill: "#D1E2FF", stroke: "none", opacity: 0.8
            }, {
                fill: "#D6D1FF", stroke: "none", opacity: 0.8
            }, {
                fill: "#FFD1D1", stroke: "none", opacity: 0.8
            }, {
                fill: "#D1FFE1", stroke: "none", opacity: 0.8
            }, {
                fill: "#F7FFD1", stroke: "none", opacity: 0.8
            }, {
                fill: "#FFF1D1", stroke: "none", opacity: 0.8
            }, {
                fill: "#FFD1D1", stroke: "none", opacity: 0.8
            }, {
                fill: "#BDF7FF", stroke: "none", opacity: 0.8
            }, {
                fill: "#BDC6FF", stroke: "none", opacity: 0.8
            }, {
                fill: "#FFF0BD", stroke: "none", opacity: 0.8
            }, {
                fill: "#F4BDFF", stroke: "none", opacity: 0.8
            }]
    });
});
});
</script>
  2. No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
  3. Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with a doughnut chart with custom colors.
See Also
CompositeChart How To

Concepts

Chart Types
Style Options

Widgets

Quick Start

Reference

wijcompositechart API
axis Option
chartLabelStyle Option
header Option
hint Option
seriesList Option
seriesStyles Option
seriesHoverStyles Option

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page