Multiple group on AxisX with javascript

Question

I'm trying to create a chart with multiple AxisX with a javascript library (google or chartjs preferable).

I have made an example on excel to illustrate what i'm looking for, here is the example:

I've tried the next fiddle but obviously without success.

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
         ['Month', ['Activo, inactivo'], ['Activo, inactivo'], ['Activo, inactivo'], ['Activo, inactivo']],
         ['Gestor A',  [165,100],      [938,800],         [522,100],             [998, 1000]],
         ['Gestor B',  [135,90],      [1120,1000],        [599,1000],             [1268,700]],
         ['Gestor C',  [157,70],      [1167,800],        [587,400],             [807,900]],
         ['Gestor D',  [139,160],      [1110,1200],        [615,500],             [968,1000]],
         ['Gestor E',  [136,200],      [691,800],         [629,700],             [1026,1200]]
      ]);

    var options = {
      title : 'Monthly Coffee Production by Country',
      vAxis: {title: 'Cups'},
      hAxis: {title: ['Month']},
      seriesType: 'bars',
      series: {5: {type: 'line'}}
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>
   

Answer 1

Exemple with chartjs - https://jsfiddle.net/6c0L1yva/392/

JAVASCRIPT -

var ctx = document.getElementById('c');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Active;January", "Inactive;January", "Active;February", "Inactive;February", "Active;March", "Inactive;March"],
      datasets:  [{
      label: "Gestor A",
      backgroundColor: "blue",
      data: [3, 7, 4, 2, 3, 1]
    }, {
      label: "Gestor B",
      backgroundColor: "red",
      data: [4, 3, 5, 3, 1, 2]
    }, {
      label: "Gestor C",
      backgroundColor: "green",
      data: [7, 2, 6, 8, 2, 1]
    }]

  },
  options:{
    scales:{
      xAxes:[
        {
          id:'xAxis1',
          type:"category",
          ticks:{
            callback:function(label){
              var state = label.split(";")[0];
              var user = label.split(";")[1];
              return state;
            }
          }
        },
        {
          id:'xAxis2',
          type:"category",
          gridLines: {
            drawOnChartArea: false, // only want the grid lines for one axis to show up
          },
          ticks:{
            callback:function(label){
              var state = label.split(";")[0];
              var user = label.split(";")[1];
              if(state === "Inactive"){
                return user;
              }else{
                return "";
              }
            }
          }
        }],
      yAxes:[{
        ticks:{
          beginAtZero:true
        }
      }]
    }
  }
});

Answer 2

google charts does not offer multiple group labels

but you can add them manually on the chart's 'ready' event

see following working snippet,
the position of the x-axis labels are used to draw the group labels and lines

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
   ['Month', 'Gestor A', 'Gestor B', 'Gestor C', 'Gestor D', 'Gestor E'],
   ['Activo', 165, 135, 157, 139, 136],
   ['Inactivo', 100, 90, 70, 160, 200],
   ['Activo', 938, 1120, 1167, 1110, 691],
   ['Inactivo', 800, 1000, 800, 1200, 800],
   ['Activo', 522, 599, 587, 615, 629],
   ['Inactivo', 100, 1000, 400, 500, 700],
   ['Activo', 998, 1268, 807, 968, 1026],
   ['Inactivo', 1000, 700, 900, 1000, 1200]
  ]);

  var options = {
    chartArea: {
      bottom: 64,
      left: 48,
      right: 16,
      top: 64,
      width: '100%',
      height: '100%'
    },
    hAxis: {
      maxAlternation: 1,
      slantedText: false
    },
    height: '100%',
    legend: {
      alignment: 'end',
      position: 'top'
    },
    seriesType: 'bars',
    title : 'Title',
    width: '100%'
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ComboChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var indexGroup = 0;
    var indexRow = 0;
    var months = ['Janeiro', 'Fevereiro', 'Marco', 'Abril'];
    var xCoords = [];

    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
      // process x-axis labels
      var xAxisLabel = data.getFilteredRows([{column: 0, value: text.textContent}]);
      if (xAxisLabel.length > 0) {
        // save label x-coordinate
        xCoords.push(parseFloat(text.getAttribute('x')));

        // add first / last group line
        if (indexRow === 0) {
          addGroupLine(chartBounds.left, chartBounds.top + chartBounds.height);
        }
        if (indexRow === (data.getNumberOfRows() - 1)) {
          addGroupLine(chartBounds.left + chartBounds.width, chartBounds.top + chartBounds.height);
        }

        // add group label / line
        if ((indexRow % 2) !== 0) {
          // calc label coordinates
          var xCoord = xCoords[0] + ((xCoords[1] - xCoords[0]) / 2);
          var yCoord = parseFloat(text.getAttribute('y')) + (parseFloat(text.getAttribute('font-size')) * 1.5);

          // add group label
          var groupLabel = text.cloneNode(true);
          groupLabel.setAttribute('y', yCoord);
          groupLabel.setAttribute('x', xCoord);
          groupLabel.textContent = months[indexGroup];
          text.parentNode.appendChild(groupLabel);

          // add group line
          addGroupLine(chartBounds.left + ((chartBounds.width / 4) * (indexGroup + 1)), chartBounds.top + chartBounds.height);

          indexGroup++;
          xCoords = [];
        }
        indexRow++;
      }
    });

    function addGroupLine(xCoord, yCoord) {
      var parent = container.getElementsByTagName('g')[0];
      var groupLine = container.getElementsByTagName('rect')[0].cloneNode(true);
      groupLine.setAttribute('x', xCoord);
      groupLine.setAttribute('y', yCoord);
      groupLine.setAttribute('width', 0.8);
      groupLine.setAttribute('height', options.chartArea.bottom);
      parent.appendChild(groupLine);
    }
  });

  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>

note: elements drawn manually will not show when using chart method getImageURI,
if you need an image of the chart, you can use html2canvas