Pull Out Pie Wedges

Building on the Quick Startexample, you can pull out wedges of the pie using the offset attribute of the seriesList option.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which has the offset attribute set to 0 for all but two of the pie wedges.

Script	Copy Code
<script id="script1" type="text/javascript"> $(document).ready(function () { $("#wijpiechart").wijpiechart({ radius: 140, hint: { content: function () { return this.data.label + " : " + Globalize.format(this.value / this.total, "p2"); } }, header: { text: "Steam Mac Hardware Survey" }, seriesList: [{ label: "MacBook Pro", data: 46.78, offset: 0 }, { label: "iMac", data: 23.18, offset: 0 }, { label: "MacBook", data: 20.25, offset: 20 }, { label: "Mac Pro", data: 5.41, offset: 0 }, { label: "Mac Mini", data: 3.44, offset: 80 }], seriesStyles: [{ fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": 1.5 }, { fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": 1.5 }, { fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": 1.5 }, { fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": 1.5 }, { fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": 1.5 }] }); }); </script>

Script

Copy Code

<script id="script1" type="text/javascript">       
    $(document).ready(function () {
    $("#wijpiechart").wijpiechart({
        radius: 140,
        hint: {
            content: function () {
                return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
            }
        },
        header: {
            text: "Steam Mac Hardware Survey"
        },
        seriesList: [{
            label: "MacBook Pro",
            data: 46.78,
            offset: 0
        }, {
            label: "iMac",
            data: 23.18,
            offset: 0
        }, {
            label: "MacBook",
            data: 20.25,
            offset: 20
        }, {
            label: "Mac Pro",
            data: 5.41,
            offset: 0
        }, {
            label: "Mac Mini",
            data: 3.44,
            offset: 80
        }],
        seriesStyles: [{
            fill: "180-rgb(195,255,0)-rgb(175,229,0)", 
            stroke: "rgb(175,229,0)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(142,222,67)-rgb(127,199,60)", 
            stroke: "rgb(127,199,60)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(106,171,167)-rgb(95,153,150)", 
            stroke: "rgb(95,153,150)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(70,106,133)-rgb(62,95,119)", 
            stroke: "rgb(62,95,119)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(166,166,166)-rgb(149,149,149)", 
            stroke: "rgb(149,149,149)", 
            "stroke-width": 1.5
        }]
    });
});
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
Save your HTML file and open it in a browser. The chart appears like the one in the live widget below, with the MacBook pie slice pulled out 20 pixels, and the Mac Mini slice pulled out 80 pixels.

Reference

wijpiechart API