0
179
VistasLoop in xAxis from highcharts according to returned data
I have the following data returned from php:
# Mes, Total, Categoria
2022-05, 1, Bullying (Mobbing, Bossing, Pessoal, Gossip)
2022-05, 1, Preocupação relativas à saúde e segurança
2022-05, 1, Suspeita de Roubo, Corrupção ou Desfalque
2022-04, 1, Suspeita de Roubo, Corrupção ou Desfalque
2022-05, 1, Feedback positivo ou elogio
Then with this data I want to create a graph that at this moment is already returning most of the data correctly:
To return the series I'm using the following loop:
var series = [];
for (var i = 0; i < data.length; i++) {
Mes = data[i][0];
Total = data[i][1];
Categoria = data[i][2];
series.push({
name: Categoria,
data: [Total],
stack: Mes,
dataLabels: {
enabled: true,
}
});
}
And this way it returns correctly as shown above in the image. The problem is the xAxis categories, which I am not able to return the two dates that exist in the month column.
I'm trying this way, but it's not working:
var xAxis = [];
for (var i = 0; i < data.length; i++) {
Mes = data[i][0];
Total = data[i][1];
Categoria = data[i][2];
xAxis.push({
categories: [Mes],
labels: {
skew3d: true,
style: {
fontSize: '16px'
}
}
});
}
Can you help?
1 Respuestas
Responde la pregunta0
The stack option doesn't refer to the category index as you expect in your example.
You use stack: 'A' and stack: B' and have one y value for each series. It means that two stacked columns are grouped for one category.
Take a look at the API Reference and its demo: https://api.highcharts.com/highcharts/series.column.stack
To achieve a stacked column for each category you need to parse Mes to the number (timestamp) and pass it as an x value.
var series = [];
for (var i = 0; i < data.length; i++) {
Mes = new Date(data[i][0]).getTime() + 60 * 60 * 1000,
Total = data[i][1];
Categoria = data[i][2];
series.push({
name: Categoria,
data: [{x: Mes, y: Total}],
dataLabels: {
enabled: true,
}
});
}
Then set your xAxis.type to datetime and change label format.
xAxis: {
type: 'datetime',
labels: {
format: '{value:%Y-%m}'
},
},
Example demo: https://jsfiddle.net/BlackLabel/vuLdezxw/