window.onload = function() {
var currentType = ko.observable(types[0]);
var viewModel = {
chartOptions: {
palette: "Harmony Light",
title: "Corporations with Highest Market Value",
dataSource: dataSource,
commonSeriesSettings: {
type: currentType,
argumentField: "company"
},
argumentAxis: {
valueMarginsEnabled: false
},
margin: {
bottom: 20
},
series: [
{ valueField: "y2005", name: "2005" },
{ valueField: "y2004", name: "2004" }
],
"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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.6/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: rgba(191, 191, 191, 0.15);
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 = [{
company: "ExxonMobil",
y2005: 362.53,
y2004: 277.02
}, {
company: "GeneralElectric",
y2005: 348.45,
y2004: 328.54
}, {
company: "Microsoft",
y2005: 279.02,
y2004: 297.02
}, {
company: "Citigroup",
y2005: 230.93,
y2004: 255.3
}, {
company: "Royal Dutch Shell plc",
y2005: 203.52,
y2004: 173.54
}, {
company: "Procted & Gamble",
y2005: 197.12,
y2004: 131.89
}];
var types = ["splinearea", "stackedsplinearea", "fullstackedsplinearea"];