@{
    ViewBag.Title = "jQWidgets Chart";
}
@section scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'EmployeeID', type: 'number' },
                    { name: 'ManagerID', type: 'number' },
                    { name: 'FirstName', type: 'string' },
                    { name: 'LastName', type: 'string' },
                    { name: 'Name', type: 'string' },
                    { name: 'Country', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'Title', type: 'string' },
                    { name: 'HireDate', type: 'date' },
                    { name: 'BirthDate', type: 'date' }

                ],
                id: 'EmployeeID',
                url: '/Employee/GetEmployees'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                beforeLoadComplete: function (records) {
                    for(var i = 0; i < records.length; i++)
                    {
                        records[i].YearsInCompany = new Date().getFullYear() - records[i].HireDate.getFullYear();
                    }
                    return records;
                }
            });
            var settings = {
                title: "Company Employees",
                description: "Years of work experience",
                showLegend: true,
                legendLayout: { left: 700, top: 170, width: 300, height: 200, flow: 'vertical' },
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                source: dataAdapter,
                xAxis:
                    {
                        dataField: 'Name'
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            series: [
                                    { radius:150, innerRadius: 80, dataField: 'YearsInCompany', displayText: 'FirstName' }
                            ]
                        }
                    ]
            };
            // setup the chart
            $('#chartContainer').jqxChart(settings);
	    });
    </script>
}
<div style="width:850px; height:500px;" id="chartContainer"></div>