jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
93 lines (87 loc) • 4.29 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript Chart Stacked Pyramid Series Example</title>
<meta name="description" content="This is an example of Javascript Chart Stacked Pyramid Series." />
<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/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="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare chart data as an array
var sampleData = [
{ Index: '1', SerieA: -30, SerieB: -10, SerieC: -25 },
{ Index: '2', SerieA: -25, SerieB: -25, SerieC: 10 },
{ Index: '3', SerieA: 30, SerieB: 0, SerieC: 25 },
{ Index: '4', SerieA: 35, SerieB: 25, SerieC: 45 },
{ Index: '5', SerieA: 0, SerieB: 20, SerieC: 25 }
];
// prepare jqxChart settings
var settings = {
title: "Stacked Pyramid chart",
description: " ",
enableAnimations: false,
showLegend: true,
padding: { left: 15, top: 15, right: 15, bottom: 15 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
xAxis:
{
flip: true,
dataField: 'Index',
tickMarks: {
visible: true,
interval: 1
},
gridLines: {
visible: true,
interval: 1
}
},
valueAxis:
{
flip: true,
labels: { horizontalAlignment: 'right' }
},
colorScheme: 'scheme06',
seriesGroups:
[
{
orientation: 'horizontal',
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 0,
columnsTopWidthPercent: 0,
columnsBottomWidthPercent: 100,
series: [
{ dataField: 'SerieA', displayText: 'Serie A' },
{ dataField: 'SerieB', displayText: 'Serie B' },
{ dataField: 'SerieC', displayText: 'Serie C' }
]
}
]
};
// 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 stacked pyramid chart with horizontal orientation. In order to change the orientation you have to use the orientation setting. The labels are formatted with right horizontal alignment.
</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>