jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
123 lines (114 loc) • 5.89 kB
HTML
<html>
<head>
<title id='Description'>JavaScript Chart Donut Series Legend Example</title>
<meta name="description" content="This is an example of JavaScript Chart Donut Series with Legend." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.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="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data_source_mobile =
{
datatype: "csv",
datafields: [
{ name: 'Browser' },
{ name: 'Share' }
],
url: '../../sampledata/mobile_browsers_share_dec2011.txt'
};
var dataAdapter_mobile = new $.jqx.dataAdapter(data_source_mobile, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
var data_source_desktop =
{
datatype: "csv",
datafields: [
{ name: 'Browser' },
{ name: 'Share' }
],
url: '../../sampledata/desktop_browsers_share_dec2011.txt'
};
var dataAdapter_desktop = new $.jqx.dataAdapter(data_source_desktop, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
// prepare jqxChart settings
var settings = {
title: "Mobile & Desktop browsers share",
description: "(source: wikipedia.org)",
enableAnimations: true,
showLegend: true,
showBorderLine: true,
legendLayout: { left: 520, top: 170, width: 300, height: 200, flow: 'vertical' },
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
seriesGroups:
[
{
type: 'donut',
offsetX: 250,
source: dataAdapter_mobile,
xAxis:
{
formatSettings: { prefix: 'Mobile ' }
},
series:
[
{
dataField: 'Share',
displayText: 'Browser',
labelRadius: 120,
initialAngle: 10,
radius: 130,
innerRadius: 90,
centerOffset: 0,
formatSettings: { sufix: '%', decimalPlaces: 1 }
}
]
},
{
type: 'donut',
offsetX: 250,
source: dataAdapter_desktop,
colorScheme: 'scheme02',
xAxis:
{
formatSettings: { prefix: 'Desktop ' }
},
series:
[
{
dataField: 'Share',
displayText: 'Browser',
labelRadius: 120,
initialAngle: 10,
radius: 70,
innerRadius: 30,
centerOffset: 0,
formatSettings: { sufix: '%', decimalPlaces: 1 }
}
]
}
]
};
// setup the chart
$('#chartContainer').jqxChart(settings);
});
</script>
</head>
<body class='default'>
<div id='chartContainer' style="width: 850px; height: 500px;">
</div>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of JavaScript Chart Donut Series with Legend. The type of the seriesGroup is donut. You can see how to format the prefix and the suffix of the data. The data is shown in two donut series by modifying the radius and the inner radius settings.
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>