jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
66 lines (64 loc) • 2.6 kB
Plain Text
@{
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>