$(() => {
$('#chart').dxChart({
dataSource,
commonSeriesSettings: {
argumentField: 'year',
valueField: 'place',
type: 'spline',
point: {
visible: false,
},
},
export: {
enabled: true,
formats: ['PNG', 'PDF', 'JPEG', 'GIF', 'SVG'],
},
customizePoint() {
if (this.value === 1) {
return { image: { url: '../../../../images/Charts/PointImage/icon-medal-gold.png', width: 20, height: 20 }, visible: true };
}
if (this.value === 2) {
return { image: { url: '../../../../images/Charts/PointImage/icon-medal-silver.png', width: 20, height: 20 }, visible: true };
}
if (this.value === 3) {
return { image: { url: '../../../../images/Charts/PointImage/icon-medal-bronse.png', width: 20, height: 20 }, visible: true };
}
return null;
},
series: {
color: '#888888',
},
title: {
text: 'Canadian Men’s National Ice Hockey Team\n at the World Championships',
},
legend: {
visible: false,
},
argumentAxis: {
grid: {
visible: true,
},
label: {
format: {
type: 'decimal',
},
},
allowDecimals: false,
axisDivisionFactor: 60,
},
valueAxis: {
grid: {
visible: false,
},
inverted: true,
label: {
customizeText() {
if (this.valueText === '1') {
return `${this.valueText}st place`;
} if (this.valueText === '2') {
return `${this.valueText}nd place`;
} if (this.valueText === '3') {
return `${this.valueText}rd place`;
}
return `${this.valueText}th place`;
},
},
},
});
});
<!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/22.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.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"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
const dataSource = [{
year: 1977,
place: 4,
}, {
year: 1978,
place: 3,
}, {
year: 1979,
place: 4,
}, {
year: 1981,
place: 4,
}, {
year: 1982,
place: 3,
}, {
year: 1983,
place: 3,
}, {
year: 1985,
place: 2,
}, {
year: 1986,
place: 3,
}, {
year: 1987,
place: 4,
}, {
year: 1989,
place: 2,
}, {
year: 1990,
place: 4,
}, {
year: 1991,
place: 2,
}, {
year: 1992,
place: 8,
}, {
year: 1993,
place: 4,
}, {
year: 1994,
place: 1,
}, {
year: 1995,
place: 3,
}, {
year: 1996,
place: 2,
}, {
year: 1997,
place: 1,
}, {
year: 1998,
place: 6,
}, {
year: 1999,
place: 4,
}, {
year: 2000,
place: 4,
}, {
year: 2001,
place: 5,
}, {
year: 2002,
place: 6,
}, {
year: 2003,
place: 1,
}, {
year: 2004,
place: 1,
}, {
year: 2005,
place: 2,
}, {
year: 2006,
place: 4,
}, {
year: 2007,
place: 1,
}, {
year: 2008,
place: 2,
}, {
year: 2009,
place: 2,
}, {
year: 2010,
place: 7,
}, {
year: 2011,
place: 5,
}, {
year: 2012,
place: 5,
}, {
year: 2013,
place: 5,
}];