CODEWITHSUNDEEP
javascripthighcharts
Bruno
Bruno

Reputation: 1055

Loop 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: enter image description here

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?

Upvotes: 0

Views: 194

Answers (1)

magdalena
magdalena

Reputation: 3695

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/

Upvotes: 1

Related Questions