Documentation
Area series can be used to clearly emphasize change in values. In this example, you can switch between the area, stacked area and full-stacked area series types. Stacked area series help visualize multiple series and compare the manner in which each series contributes to the total aggregate value for specific arguments. Full-stacked area series help compare the percentage value of multiple area series for each argument.
www.geohive.com
window.onload = function() {
var currentType = ko.observable(types[0]),
format = ko.observable("millions");
currentType.subscribe(function(newType){
var newFormat =
(newType == "fullStackedArea" ? "percent" : "millions");
format(newFormat);
});
var viewModel = {
chartOptions: {
palette: "Harmony Light",
dataSource: dataSource,
commonSeriesSettings: {
type: currentType,
argumentField: "country"
},
series: [
{ valueField: "y1564", name: "15-64 years" },
{ valueField: "y014", name: "0-14 years" },
{ valueField: "y65", name: "65 years and older" }
],
margin: {
bottom: 20
},
title: "Population: Age Structure (2000)",
argumentAxis: {
valueMarginsEnabled: false
},
valueAxis: {
label: {
format: format
}
},
"export": {
enabled: true
},
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center"
}
},
typesOptions: {
dataSource: types,
value: currentType,
}
};
ko.applyBindings(viewModel, document.getElementById("chart-demo"));
};
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="js/jquery-3.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.spa.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/17.1.7/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type ="text/css" href ="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="chart-demo">
<div id="chart" data-bind="dxChart: chartOptions"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Series Type</span>
<div data-bind="dxSelectBox: typesOptions"></div>
</div>
</div>
</div>
</div>
</body>
</html>
.options {
padding: 20px;
background-color: #f5f5f5;
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
var dataSource = [{
country: "China",
y014: 320866959,
y1564: 853191410,
y65: 87774113
}, {
country: "India",
y014: 340419115,
y1564: 626520945,
y65: 47063757
}, {
country: "United States",
y014: 58554755,
y1564: 182172625,
y65: 34835293
}, {
country: "Indonesia",
y014: 68715705,
y1564: 146014815,
y65: 10053690
}, {
country: "Brazil",
y014: 50278034,
y1564: 113391494,
y65: 9190842
}, {
country: "Russia",
y014: 26465156,
y1564: 101123777,
y65: 18412243
}];
var types = ["area", "stackedarea", "fullstackedarea"];