Wijmo UI for the Web
Markup and Scripting
Wijmo User Guide > Widgets > Chart Widgets > PieChart > Markup and Scripting

The HTML markup for a wijpiechart widget looks like this.

Markup
Copy Code
<div id="wijpiechart"></div>

You can initialize the widget with the following jQuery 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: "Popularity of American Sports"
        },
        seriesList: [{
            label: "Pro Football",
            data: 34,
            offset: 15
        }, {
            label: "Baseball",
            data: 16
        }, {
            label: "College Football",
            data: 11
        }, {
            label: "Auto Racing",
            data: 8
        }, {
            label: "Men's Pro Basketball",
            data: 7
        }, {
            label: "Hockey",
            data: 5
        }, {
            label: "Men's College Basketball",
            data: 3
        }]
    });
});
</script>

The markup and script featured here results in the following live widget.

See Also

Reference

Concepts