var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
var data = complaintsData.sort(function (a, b) {
return b.count - a.count;
}),
totalCount = data.reduce(function (prevValue, item) {
return prevValue + item.count;
}, 0),
cumulativeCount = 0,
dataSource = data.map(function (item, index) {
cumulativeCount += item.count;
return {
complaint: item.complaint,
count: item.count,
cumulativePercentage: Math.round(cumulativeCount * 100 / totalCount)
};
});
$scope.chartOptions = {
palette: "Harmony Light",
dataSource: dataSource,
title: "Pizza Shop Complaints",
argumentAxis: {
label: {
overlappingBehavior: "stagger"
}
},
tooltip: {
enabled: true,
shared: true,
customizeTooltip: function (info) {
var tmpContainer = document.createElement("div");
tmpContainer.innerHTML = ["<div><div class='tooltip-header'></div>",
"<div class='tooltip-body'><div class='series-name'>",
"<span class='top-series-name'></span>",
": </div><div class='value-text'>",
"<span class='top-series-value'></span>",
"</div><div class='series-name'>",
"<span class='bottom-series-name'></span>",
": </div><div class='value-text'>",
"<span class='bottom-series-value'></span>",
"% </div></div></div>"].join("");
tmpContainer.querySelector(".tooltip-header").textContent = info.argumentText;
tmpContainer.querySelector(".top-series-name").textContent = info.points[0].seriesName;
tmpContainer.querySelector(".top-series-value").textContent = info.points[0].valueText;
tmpContainer.querySelector(".bottom-series-name").textContent = info.points[1].seriesName;
tmpContainer.querySelector(".bottom-series-value").textContent = info.points[1].valueText;
return {
html: tmpContainer.innerHTML
};
}
},
valueAxis: [{
name: "frequency",
position: "left",
tickInterval: 300
}, {
name: "percentage",
position: "right",
showZero: true,
label: {
customizeText: function (info) {
return info.valueText + "%";
}
},
constantLines: [{
value: 80,
color: "#fc3535",
dashStyle: "dash",
width: 2,
label: { visible: false }
}],
tickInterval: 20,
valueMarginsEnabled: false
}],
commonSeriesSettings: {
argumentField: "complaint"
},
series: [{
type: "bar",
valueField: "count",
axis: "frequency",
name: "Complaint frequency",
color: "#fac29a"
}, {
type: "spline",
valueField: "cumulativePercentage",
axis: "percentage",
name: "Cumulative percentage",
color: "#6b71c3"
}],
legend: {
verticalAlignment: "top",
horizontalAlignment: "center"
}
};
});
<!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>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/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" ng-app="DemoApp" ng-controller="DemoController">
<div id="chart-demo">
<div id="chart" dx-chart="chartOptions"></div>
</div>
</div>
</body>
</html>
#chart {
height: 440px;
}
.tooltip-header {
margin-bottom: 5px;
font-size: 16px;
font-weight: 500;
padding-bottom: 5px;
border-bottom: 1px solid #c5c5c5;
}
.tooltip-body {
width: 170px;
}
.tooltip-body .series-name {
font-weight: normal;
opacity: 0.6;
display: inline-block;
line-height: 1.5;
padding-right: 10px;
width: 126px;
}
.tooltip-body .value-text {
display: inline-block;
line-height: 1.5;
width: 30px;
}
var complaintsData = [
{ complaint: "Cold pizza", count: 780 },
{ complaint: "Not enough cheese", count: 120 },
{ complaint: "Underbaked or Overbaked", count: 52 },
{ complaint: "Delayed delivery", count: 1123 },
{ complaint: "Damaged pizza", count: 321 },
{ complaint: "Incorrect billing", count: 89 },
{ complaint: "Wrong size delivered", count: 222 }
];