Trying to get a nvd3 stackedAreaChart to sort x-axis but I cannot see how.
Chartdata:
The data (x) is already sorted descending.
End result:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.5">
<meta charset="utf-8"> <!-- it's important for d3.js -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" />
<script type="text/javascript">
const concentrateTable = {
"concentrateTable": {
"steps": [
{
"week": 5,
"description": null,
"products": [
{
"productKg": 2.0,
"productId": 452035,
"productFunction": "prestart",
"productDescription": "Product X"
}
]
},
{
"week": 4,
"description": null,
"products": [
{
"productKg": 2.0,
"productId": 452035,
"productFunction": "prestart",
"productDescription": "Product X"
}
]
},
{
"week": 3,
"description": null,
"products": [
{
"productKg": 2.0,
"productId": 452035,
"productFunction": "prestart",
"productDescription": "Product X"
}
]
},
{
"week": 2,
"description": null,
"products": [
{
"productKg": 2.0,
"productId": 452035,
"productFunction": "prestart",
"productDescription": "Product X"
}
]
},
{
"week": 1,
"description": null,
"products": [
{
"productKg": 2.0,
"productId": 452035,
"productFunction": "prestart",
"productDescription": "Product X"
}
]
},
{
"week": 0,
"description": null,
"products": [
{
"productKg": 1.0,
"productId": 452035,
"productFunction": "prestart",
"productDescription": "Product X"
}
]
}
],
"products": [
{
"productId": 452035,
"productFunction": "prestart",
"productDescription": "Product X"
}
]
},
"ration": {
"name": "Rapport test",
"adviceDate": "11-01-2021",
"animalGroup": {
"id": 2949,
"name": "Droogstand",
"numberOfAnimals": 7
}
}
};
function getChart() {
const chartData = getChartData(concentrateTable.concentrateTable);
chartData. .sort((a,b)=>{
if (a.x < b.x){
return -1;
}
});
return {
/* Data will fill all the points */
data: chartData,
/* Options will set the chart characteristics */
options: getChartOptions(chartData)
};
}
function getChartData(data) {
const colors = ['#007c28', '#fc0', '#0078c0', '#e67f1d'];
return data.products.map((product, index) => ({
values: data.steps.map((step) => { return { x: step.week, y: step.products[index].productKg } }),
key: product.productDescription,
color: colors[index],
area: true
}));
}
function getChartOptions(data) {
return {
chart: {
type: 'stackedAreaChart',
height: 334,
width: 350,
margin: {
right: 10,
bottom: 40,
left: 55
},
legend: {
maxKeyLength: 40
},
noData: 'Geen data',
x: d => d.x,
y: d => d.y,
duration: 0,
interactive: false,
showControls: false,
legendPosition: 'top',
xAxis: {
axisLabel: 'Weken',
ticks: 5
},
yAxis: {
axisLabel: 'Brokgift (kg)',
ticks: 5,
axisLabelDistance: -10,
tickFormat: d => d.toFixed(1)
},
xDomain: null,
sortDescending: true
}
};
}
angular.module('concentratePdfApp', ['nvd3'])
.controller('concentratePdfCtrl', function ($scope) {
$scope.data = concentrateTable;
$scope.feedtable = getChart();
$scope.feedtable.data[0].values.sort(function (a, b) {
if (a.x < b.x){
return -1;
}
if (a.x > b.x){
return 1;
}
return 0;
});
$scope.callback = function(scope, element){
// this code will be applied once directive has been created
// scope - is the directive internal scope
// element - directive DOM element
var api = scope.api;
var chart = scope.chart;
var svg = scope.svg;
var data = chart.data;
// ... do smth
};
})
</script>
</head>
<body>
<div class="header-image"></div>
<div ng-app="concentratePdfApp">
<div ng-controller="concentratePdfCtrl">
<div class="column">
<div class="column"><nvd3 options="feedtable.options" data="feedtable.data" on-ready="callback"></nvd3></div>
</div>
</div>
</body>
</html>
Update:
Adding xDomain: [5,0] to options is the answer.
