jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
137 lines (128 loc) • 6.06 kB
HTML
<html ng-app="demoApp" lang="en">
<head>
<title id='Description'>AngularJS Chart Partial Pie Example</title>
<meta name="description" content="This is an example of AngularJS Chart. Chart Partial Pie Series." />
<link rel="stylesheet" type="text/css" href="../../../jqwidgets/styles/jqx.base.css" />
<script type="text/javascript" src="../../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script><script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
var dataStatCounter =
[
{ Browser: 'Chrome', Share: 45.6 },
{ Browser: 'IE', Share: 24.6 },
{ Browser: 'Firefox', Share: 20.4 },
{ Browser: 'Safari', Share: 5.1 },
{ Browser: 'Opera', Share: 1.3 },
{ Browser: 'Other', Share: 3.0 }
];
var dataW3CCounter =
[
{ Browser: 'Chrome', Share: 34.1 },
{ Browser: 'IE', Share: 20.3 },
{ Browser: 'Firefox', Share: 18.3 },
{ Browser: 'Safari', Share: 17.8 },
{ Browser: 'Opera', Share: 2.7 },
{ Browser: 'Other', Share: 6.8 }
];
var dataWikimedia =
[
{ Browser: 'Chrome', Share: 42.7 },
{ Browser: 'IE', Share: 18.0 },
{ Browser: 'Firefox', Share: 15.3 },
{ Browser: 'Safari', Share: 6.1 },
{ Browser: 'Opera', Share: 2.4 },
{ Browser: 'Other', Share: 15.6 }
];
var dataNetApplications =
[
{ Browser: 'Chrome', Share: 16.4 },
{ Browser: 'IE', Share: 55.2 },
{ Browser: 'Firefox', Share: 18.0 },
{ Browser: 'Safari', Share: 5.8 },
{ Browser: 'Opera', Share: 1.3 },
{ Browser: 'Other', Share: 3.4 }
];
var charts = [
{ title: 'Stat counter', label: 'Stat', dataSource: dataStatCounter },
{ title: 'W3C counter', label: 'W3C', dataSource: dataW3CCounter },
{ title: 'Wikimedia', label: 'Wikimedia', dataSource: dataWikimedia },
{ title: 'Net Applications', label: 'NetApp', dataSource: dataNetApplications }
];
for (var i = 0; i < charts.length; i++) {
var chartSettings = {
source: charts[i].dataSource,
title: '',
description: charts[i].title,
enableAnimations: false,
showLegend: true,
showBorderLine: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
colorScheme: 'scheme03',
seriesGroups: [
{
type: 'pie',
showLegend: true,
enableSeriesToggle: true,
series:
[
{
dataField: 'Share',
displayText: 'Browser',
showLabels: true,
labelRadius: 160,
labelLinesEnabled: true,
labelLinesAngles: true,
labelsAutoRotate: false,
initialAngle: 0,
radius: 125,
minAngle: 0,
maxAngle: 180,
centerOffset: 0,
offsetY: 170,
formatFunction: function (value, itemIdx, serieIndex, groupIndex) {
if (isNaN(value))
return value;
return value + '%';
}
}
]
}
]
};
$scope["chartSettings" + i] = chartSettings;
} // for
});
</script>
</head>
<body ng-controller="demoController">
<table>
<tr>
<td>
<jqx-chart jqx-settings="chartSettings0" style="width: 400px; height: 250px;">
</jqx-chart>
</td>
<td>
<jqx-chart jqx-settings="chartSettings1" style="width: 400px; height: 250px;">
</jqx-chart>
</td>
</tr>
<tr>
<td>
<jqx-chart jqx-settings="chartSettings2" style="width: 400px; height: 250px;">
</jqx-chart>
</td>
<td>
<jqx-chart jqx-settings="chartSettings3" style="width: 400px; height: 250px;">
</jqx-chart>
</td>
</tr>
</table>
</body>
</html>