window.onload = function() {
var source = new DevExpress.data.DataSource({
load: function() {
return $.getJSON("../../../../data/resourceData.json");
},
loadMode: "raw",
filter: ["month", "<=", "12"],
paginate: false
});
var alumOptions = {
dataSource: source,
argumentField: "month",
valueField: "alum2010",
type: "bar",
showMinMax: true,
tooltip: {
format: "currency"
}
},
nickOptions = {
dataSource: source,
argumentField: "month",
valueField: "nickel2010",
type: "bar",
showMinMax: true,
showFirstLast: false,
barPositiveColor: "#6babac",
minColor: "#9ab57e",
maxColor: "#8076bb",
tooltip: {
format: "currency"
}
},
copOptions = {
dataSource: source,
argumentField: "month",
valueField: "copper2010",
type: "bar",
barPositiveColor: "#e55253",
firstLastColor: "#ebdd8f",
tooltip: {
format: "currency"
}
};
var viewModel = {
alum2010: alumOptions,
nick2010: nickOptions,
cop2010: copOptions,
alum2011: $.extend({}, alumOptions, { valueField: "alum2011" }),
nick2011: $.extend({}, nickOptions, { valueField: "nickel2011" }),
cop2011: $.extend({}, copOptions, { valueField: "copper2011" }),
alum2012: $.extend({}, alumOptions, { valueField: "alum2012" }),
nick2012: $.extend({}, nickOptions, { valueField: "nickel2012" }),
cop2012: $.extend({}, copOptions, { valueField: "copper2012" }),
monthOptions: {
dataSource: [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
width: 70,
value: 12,
onValueChanged: function (data) {
var count = data.value;
source.filter(["month", "<=", count]);
source.load();
}
}
};
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>
<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" data-bind="dxSparkline: alum2010"></div></td>
<td><div class="sparkline" data-bind="dxSparkline: nick2010"></div></td>
<td><div class="sparkline" data-bind="dxSparkline: cop2010"></div></td>
</tr>
<tr>
<th>2011</th>
<td><div class="sparkline" data-bind="dxSparkline: alum2011"></div></td>
<td><div class="sparkline" data-bind="dxSparkline: nick2011"></div></td>
<td><div class="sparkline" data-bind="dxSparkline: cop2011"></div></td>
</tr>
<tr>
<th>2012</th>
<td><div class="sparkline" data-bind="dxSparkline: alum2012"></div></td>
<td><div class="sparkline" data-bind="dxSparkline: nick2012"></div></td>
<td><div class="sparkline" data-bind="dxSparkline: cop2012"></div></td>
</tr>
</table>
<div class="action">
<div id="choose-months" data-bind="dxSelectBox: monthOptions"></div>
<div class="label">Choose a number of 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;
}
#choose-months {
float: right;
}
.action {
width: 270px;
margin-top: 20px;
}
.label {
padding-top: 9px;
}
.long-title h3 {
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}