@{
    ViewBag.Title = "Overview";
    Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}
@section header
{
    <style type="text/css">
        #wijpiechart
        {
            width: 756px;
            height: 475px;
        }
    </style>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijpiechart").wijpiechart({
                radius: 140,
                legend: { visible: true },
                hint: {
                    content: function () {
                        return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
                    }
                },
                header: {
                    text: "Steam - Mac Hardware"
                },
                seriesList: [{
                    label: "MacBook Pro",
                    legendEntry: true,
                    data: 46.78,
                    offset: 15
                }, {
                    label: "iMac",
                    legendEntry: true,
                    data: 23.18,
                    offset: 0
                }, {
                    label: "MacBook",
                    legendEntry: true,
                    data: 20.25,
                    offset: 0
                }, {
                    label: "Mac Pro",
                    legendEntry: true,
                    data: 5.41,
                    offset: 0
                }, {
                    label: "Mac mini",
                    legendEntry: true,
                    data: 3.44,
                    offset: 0
                }],
                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>
}
<h2>
    Overview</h2>
<div class="main demo">
    <!-- Begin demo markup -->
    <div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all">
    </div>
    <!-- End demo markup -->
    <div class="demo-options">
        <!-- Begin options markup -->
        <!-- End options markup -->
    </div>
</div>
@section description
        {
    <p>
        The wijpiechart widget allows you to create customized pie charts. The samples in
        this section highlight some of the unique features of the widget, and they will
        help you get started with the wijpiechart widget.</p>
    <p>
        The source in this sample will show you how to add a header to the chart; how to
        add label text to the legend; how to populate the chart with data; and how to style
        the pie pieces.</p>
}
