var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
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"
}
};
$scope.alum2010 = alumOptions;
$scope.nick2010 = nickOptions;
$scope.cop2010 = copOptions;
$scope.alum2011 = $.extend({}, alumOptions, { valueField: "alum2011" });
$scope.nick2011 = $.extend({}, nickOptions, { valueField: "nickel2011" });
$scope.cop2011 = $.extend({}, copOptions, { valueField: "copper2011" });
$scope.alum2012 = $.extend({}, alumOptions, { valueField: "alum2012" });
$scope.nick2012 = $.extend({}, nickOptions, { valueField: "nickel2012" });
$scope.cop2012 = $.extend({}, copOptions, { valueField: "copper2012" });
$scope.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();
}
};
});
<!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.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/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.5/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" ng-app="DemoApp" ng-controller="DemoController">
<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" dx-sparkline="alum2010"></div></td>
<td><div class="sparkline" dx-sparkline="nick2010"></div></td>
<td><div class="sparkline" dx-sparkline="cop2010"></div></td>
</tr>
<tr>
<th>2011</th>
<td><div class="sparkline" dx-sparkline="alum2011"></div></td>
<td><div class="sparkline" dx-sparkline="nick2011"></div></td>
<td><div class="sparkline" dx-sparkline="cop2011"></div></td>
</tr>
<tr>
<th>2012</th>
<td><div class="sparkline" dx-sparkline="alum2012"></div></td>
<td><div class="sparkline" dx-sparkline="nick2012"></div></td>
<td><div class="sparkline" dx-sparkline="cop2012"></div></td>
</tr>
</table>
<div class="action">
<div id="choose-months" dx-select-box="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;
}