Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
$(() => {
const source = new DevExpress.data.DataSource({
load() {
return $.getJSON('../../../../data/resourceData.json');
},
loadMode: 'raw',
filter: ['month', '<=', '12'],
paginate: false,
});
const alumOptions = {
dataSource: source,
argumentField: 'month',
valueField: 'alum2010',
type: 'bar',
showMinMax: true,
tooltip: {
format: 'currency',
},
};
const nickOptions = {
dataSource: source,
argumentField: 'month',
valueField: 'nickel2010',
type: 'bar',
showMinMax: true,
showFirstLast: false,
barPositiveColor: '#6babac',
minColor: '#9ab57e',
maxColor: '#8076bb',
tooltip: {
format: 'currency',
},
};
const copOptions = {
dataSource: source,
argumentField: 'month',
valueField: 'copper2010',
type: 'bar',
barPositiveColor: '#e55253',
firstLastColor: '#ebdd8f',
tooltip: {
format: 'currency',
},
};
$('#choose-months').dxSelectBox({
dataSource: [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
value: 12,
inputAttr: { 'aria-label': 'Month' },
onValueChanged(data) {
const count = data.value;
source.filter(['month', '<=', count]);
source.load();
},
});
$('.alum2010').dxSparkline(alumOptions);
$('.nick2010').dxSparkline(nickOptions);
$('.cop2010').dxSparkline(copOptions);
$('.alum2011').dxSparkline($.extend(alumOptions, { valueField: 'alum2011' }));
$('.nick2011').dxSparkline($.extend(nickOptions, { valueField: 'nickel2011' }));
$('.cop2011').dxSparkline($.extend(copOptions, { valueField: 'copper2011' }));
$('.alum2012').dxSparkline($.extend(alumOptions, { valueField: 'alum2012' }));
$('.nick2012').dxSparkline($.extend(nickOptions, { valueField: 'nickel2012' }));
$('.cop2012').dxSparkline($.extend(copOptions, { valueField: 'copper2012' }));
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<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=5.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/24.2.3/css/dx.light.css" />
<script src="js/dx.all.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 class="long-title"><h3>Monthly Prices of Aluminium, Nickel and Copper</h3></div>
<div id="chart-demo">
<table class="demo-table" border="1">
<tr>
<th></th>
<th>Aluminium (USD/ton)</th>
<th>Nickel (USD/ton)</th>
<th>Copper (USD/ton)</th>
</tr>
<tr>
<th>2010</th>
<td><div class="sparkline alum2010"></div></td>
<td><div class="sparkline nick2010"></div></td>
<td><div class="sparkline cop2010"></div></td>
</tr>
<tr>
<th>2011</th>
<td><div class="sparkline alum2011"></div></td>
<td><div class="sparkline nick2011"></div></td>
<td><div class="sparkline cop2011"></div></td>
</tr>
<tr>
<th>2012</th>
<td><div class="sparkline alum2012"></div></td>
<td><div class="sparkline nick2012"></div></td>
<td><div class="sparkline cop2012"></div></td>
</tr>
</table>
<div class="action">
<div class="label">Choose a number of months:</div>
<div id="choose-months"></div>
</div>
</div>
</div>
</body>
</html>
#chart-demo {
height: 440px;
}
.demo-table {
width: 100%;
border: 1px solid #c2c2c2;
border-collapse: collapse;
}
.demo-table th,
.demo-table td {
font-weight: 400;
width: 200px;
padding: 25px 10px 5px 10px;
border: 1px solid #c2c2c2;
}
.demo-table th {
padding: 25px 15px 20px 15px;
border: 1px solid #c2c2c2;
}
.demo-table tr:nth-child(2) td {
border-top: 1px solid #c2c2c2;
}
.demo-table td:first-of-type {
border-left: 1px solid #c2c2c2;
}
.demo-table .sparkline {
width: 200px;
height: 30px;
}
.action {
width: 300px;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.action .dx-selectbox {
width: 90px;
}
.long-title h3 {
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
margin-top: 0;
}
[
{ "month": 1, "alum2010": 2262, "alum2011": 2454, "alum2012": 2262, "nickel2010": 18974, "nickel2011": 24298, "nickel2012": 18322, "copper2010": 7341, "copper2011": 9585, "copper2012": 7501 },
{ "month": 2, "alum2010": 2087, "alum2011": 2537, "alum2012": 2087, "nickel2010": 18162, "nickel2011": 27929, "nickel2012": 21093, "copper2010": 7016, "copper2011": 10026, "copper2012": 8470 },
{ "month": 3, "alum2010": 2238, "alum2011": 2586, "alum2012": 2238, "nickel2010": 20535, "nickel2011": 28802, "nickel2012": 19701, "copper2010": 7202, "copper2011": 9889, "copper2012": 8591 },
{ "month": 4, "alum2010": 2349, "alum2011": 2689, "alum2012": 2349, "nickel2010": 24562, "nickel2011": 26142, "nickel2012": 17695, "copper2010": 7851, "copper2011": 9460, "copper2012": 8459 },
{ "month": 5, "alum2010": 2071, "alum2011": 2591, "alum2012": 2071, "nickel2010": 26131, "nickel2011": 26753, "nickel2012": 17549, "copper2010": 7481, "copper2011": 9373, "copper2012": 8320 },
{ "month": 6, "alum2010": 1957, "alum2011": 2584, "alum2012": 1957, "nickel2010": 19278, "nickel2011": 23055, "nickel2012": 16436, "copper2010": 6532, "copper2011": 9108, "copper2012": 7465 },
{ "month": 7, "alum2010": 2008, "alum2011": 2554, "alum2012": 2008, "nickel2010": 19475, "nickel2011": 22870, "nickel2012": 16382, "copper2010": 6498, "copper2011": 9295, "copper2012": 7475 },
{ "month": 8, "alum2010": 2119, "alum2011": 2413, "alum2012": 2119, "nickel2010": 20701, "nickel2011": 24388, "nickel2012": 15687, "copper2010": 7191, "copper2011": 9834, "copper2012": 7430 },
{ "month": 9, "alum2010": 2199, "alum2011": 2327, "alum2012": 2199, "nickel2010": 21266, "nickel2011": 21845, "nickel2012": 16085, "copper2010": 7596, "copper2011": 9121, "copper2012": 7614 },
{ "month": 10, "alum2010": 2374, "alum2011": 2210, "alum2012": 2374, "nickel2010": 23358, "nickel2011": 18346, "nickel2012": 18250, "copper2010": 8057, "copper2011": 7125, "copper2012": 8245 },
{ "month": 11, "alum2010": 2354, "alum2011": 2102, "alum2012": 2354, "nickel2010": 23150, "nickel2011": 18822, "nickel2012": 16083, "copper2010": 8373, "copper2011": 7871, "copper2012": 7727 },
{ "month": 12, "alum2010": 2369, "alum2011": 2038, "alum2012": 2369, "nickel2010": 23282, "nickel2011": 17320, "nickel2012": 17104, "copper2010": 8636, "copper2011": 7725, "copper2012": 7880 }
]