Create a Shared Pie Chart

Building on the Quick Start example, you can create a composite shared pie chart. This type of chart allows a user to display related data using more than one pie chart on the same canvas. These pie charts share the same legend.

Multiple pie charts in this example illustrate the comparative usage of each major browser in the year 2010 and 2014. The data in the pie chart on the left measures browser usage in the year 2010. The pie chart on the right displays data describing browser usage in the year 2014.

In the <head> section of your HTML file, replace the script under the document ready function with the one below. This sets several widget options sets several widget options like the following:

X and Y axes are turned off.
Tooltip (hint) content is set to show data labels.
Header displays title text.
Chart types, labels, and data, (as well as radius for the pie chart) are added to the seriesList.

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 id="scriptInit" type="text/javascript"> require(["wijmo.wijcompositechart"], function () { $(document).ready(function () { var data2010 = [ { label: "Chrome", data: 6.04 }, { label: "Firefox", data: 31.64 }, { label: "IE", data: 55.25 }, { label: "Safari", data: 3.76 }, { label: "Others", data: 3.31 } ]; var data2014 = [ { label: "Chrome", data: 43.67 }, { label: "Firefox", data: 18.90 }, { label: "IE", data: 22.85 }, { label: "Safari", data: 9.73 }, { label: "Others", data: 4.85 } ]; $("#wijcompositechart").wijcompositechart({ axis: { y: { visible: true, text: "Web Browsers", gridMajor: { visible: false }, textVisible: false}, x: { visible: true, textVisible: false, text: 'Year 2010' + " " + '-' + " " + 'Year 2014' } }, hint: { content: function () { return this.label + '\n ' + this.y + ''; } }, header: { text: "Web Browsers Usage" }, seriesList: [{ label: "2010-2014", type: "sharedPie", data: [ { label: "2010", center: { x: 200, y: 250 }, radius: 100, innerRadius: 40, legendEntry: true, datasource: data2010, data: { label: { bind: "label" }, value: { bind: "data" } } }, { label: "2014", center: { x: 450, y: 250 }, radius: 100, innerRadius: 40, legendEntry: true, datasource: data2014, data: { label: { bind: "label" }, value: { bind: "data" } } } ] }, { }], }); }); }); </script>

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 id="scriptInit" type="text/javascript">
    require(["wijmo.wijcompositechart"], function () {

           $(document).ready(function () {

            var data2010 =
                [
                    { label: "Chrome", data: 6.04 },
                    { label: "Firefox", data: 31.64 },
                    { label: "IE", data: 55.25 },
                    { label: "Safari", data: 3.76 },
                    { label: "Others", data: 3.31 }
                ];

            var data2014 =
                [
                    { label: "Chrome", data: 43.67 },
                    { label: "Firefox", data: 18.90 },
                    { label: "IE", data: 22.85 },
                    { label: "Safari", data: 9.73 },
                    { label: "Others", data: 4.85 }
                ];


            $("#wijcompositechart").wijcompositechart({
                
                axis: {
                    y: { visible: true, text: "Web Browsers",  gridMajor: { visible: false }, textVisible: false},
                    x: { visible: true, textVisible: false, text: 'Year 2010' + " " + '-' + " " + 'Year 2014' }
                },

                hint: {
                    content: function () {
                        return this.label + '\n ' + this.y + '';
                    }
                },
                header: {
                    text: "Web Browsers Usage"
                },
                seriesList: [{
                 
                    label: "2010-2014",
                    type: "sharedPie",
                    data: [
                        {
                            
                            label: "2010",
                            center: { x: 200, y: 250 },
                            radius: 100,
                            innerRadius: 40,
                            legendEntry: true,
                            datasource: data2010,
                            data: {
                                label: { bind: "label" },
                                value: { bind: "data" }
                            }
                        },
                        {
                            label: "2014",
                            center: { x: 450, y: 250 },
                            radius: 100,
                            innerRadius: 40,
                            legendEntry: true,
                            datasource: data2014,
                            data: {
                                label: { bind: "label" },
                                value: { bind: "data" }
                            }
                        }
                    ]
                }, {

                }],

            });
        });
    });
    </script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with a shared pie chart.

Concepts

ChartTypes

StyleOptions