google Line chart with double label on X axis

Question

I'm working on google line chart and I want to double label on x axis(date wise processes ), I'm able to draw chart without dates with below code but not able to populate dates,



Google Charts Tutorial

I want to draw this chart

please help on this....

WhiteHat · Accepted Answer

although the requested layout is not available via standard configuration options,
it is possible to achieve, if you're ok with modifying the svg manually

when the chart's 'ready' event fires, add the category labels and group lines

see following working snippet, which is just an example to show the possibility

several assumptions are made based on the size and placement of the chart...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', '');
  data.addColumn('string', '');
  data.addColumn('number', 'Success');
  data.addColumn('number', 'Error');
  data.addColumn('number', 'Warning');
  data.addRows([
    [new Date('12/01/2016'), 'RE-LINK|',  266, 2136, 472],
    [new Date('12/01/2016'), 'UPDATE-IB',  0, 1722, 2728],
    [new Date('12/01/2016'), 'UPDATE-SA',  0, 43580, 87713],
    [new Date('12/01/2016'), 'CREATE-IB/SA', 0, 18920, 103690],
    [new Date('12/01/2016'), 'TERMINATE-IB',  0, 2, 0],
    [new Date('12/01/2016'), 'TERMINATE-COVERAGE',  3682, 5917, 0],
    [new Date('12/01/2016'), 'ADD-CVG / CHG-SITE',  1101, 2433, 7887],
    [new Date('12/01/2016'), 'day1--CREATE-IB',  36647,  0,1064]
  ]);
   data.addRows([
    [new Date('12/02/2016'), 'RE-LINK',  11649, 221,    1127],
    [new Date('12/02/2016'), 'UPDATE-IB',  0,   4844,   79886],
    [new Date('12/02/2016'), 'UPDATE-SA',  0, 2961, 7377],
    [new Date('12/02/2016'), 'CREATE-IB/SA', 0, 3993,   13268],
    [new Date('12/02/2016'), 'TERMINATE-IB',  4105, 0, 0],
    [new Date('12/02/2016'), 'TERMINATE-COVERAGE',  1844, 10834, 0],
    [new Date('12/02/2016'), 'ADD-CVG / CHG-SITE',  218, 717,    10498]
  ]);
   data.addRows([
    [new Date('12/03/2016'), 'RE-LINK',  3484,  3,  28],
    [new Date('12/03/2016'), 'UPDATE-IB',  0, 139207,   238037],
    [new Date('12/03/2016'), 'UPDATE-SA',  0, 3, 3],
    [new Date('12/03/2016'), 'CREATE-IB/SA', 0, 4598,   12680],
    [new Date('12/03/2016'), 'TERMINATE-COVERAGE',  480,  1210,   90],
    [new Date('12/03/2016'), 'ADD-CVG / CHG-SITE',  1,   72, 2372]
  ]);
  data.addRows([
    [new Date('12/04/2016'), 'RE-LINK',  7142,  465,    1427],
    [new Date('12/04/2016'), 'UPDATE-IB',  0, 105719,   216275],
    [new Date('12/04/2016'), 'UPDATE-SA',  0, 14761,    31698],
    [new Date('12/04/2016'), 'CREATE-IB/SA', 0, 5071,   14184],
    [new Date('12/04/2016'), 'TERMINATE-IB',  18, 10, 0],
    [new Date('12/04/2016'), 'TERMINATE-COVERAGE',  5265, 1280,   98],
    [new Date('12/04/2016'), 'ADD-CVG / CHG-SITE',  1173,    12474,  15545]
  ]);

  var view = new google.visualization.DataView(data);
  view.hideColumns([0]);

  var options = {
    chartArea: {
      height: 300,
      left: 60,
      top: 60
    },
    colors: ['#00ff00', '#ff0000','#ffe102'],
    hAxis: {
      title: '',
      textStyle: {
        color: '#01579b',
        fontSize: 10,
        fontName: 'Arial',
        bold: true,
        italic: true
      },
      titleTextStyle: {
        color: '#01579b',
        fontSize: 12,
        fontName: 'Arial',
        bold: false,
        italic: true
      },
      slantedTextAngle: 90
    },
    height: 600,
    legend: {
      position: 'top'
    },
    title: 'Applications status biz process wise(4 Days)',
    vAxis: {
      title: '',
      textStyle: {
        color: '#1a237e',
        fontSize: 12,
        bold: true
      },
      titleTextStyle: {
        color: '#1a237e',
        fontSize: 12,
        bold: true
      }
    },
    width: 1600
  };

  var formatDate = new google.visualization.DateFormat({
    pattern: 'dd-MMM-yy'
  });

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var rowIndex = -1;
    var dateValue = null;
    var svgParent = container.getElementsByTagName('svg')[0];
    var labels = [];
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
      var groupLabel;
      // find hAxis labels
      if (text.hasAttribute('transform')) {
        rowIndex++;
        if (dateValue !== formatDate.formatValue(data.getValue(rowIndex, 0))) {
          dateValue = formatDate.formatValue(data.getValue(rowIndex, 0));
          groupLabel = text.cloneNode(true);
          groupLabel.removeAttribute('transform');
          groupLabel.removeAttribute('font-style');
          groupLabel.setAttribute('fill', '#333333');
          groupLabel.setAttribute('y', parseFloat(text.getAttribute('y')) + 132);
          groupLabel.textContent = dateValue;
          text.parentNode.appendChild(groupLabel);
          if (labels.length > 0) {
            setLabelX(labels[labels.length - 1], text, 0);
          }
          labels.push(groupLabel);
          addGroupLine(groupLabel, -24, -144);
        }
        if (rowIndex === (data.getNumberOfRows() - 1)) {
          if (labels.length > 0) {
            setLabelX(labels[labels.length - 1], text, 16);
          }
          addGroupLine(text, 18, -12);
        }
      }
    });

    // center group label
    function setLabelX(prevLabel, curLabel, xOffset) {
      prevLabel.setAttribute('x',
        parseFloat(prevLabel.getAttribute('x')) + xOffset +
        ((parseFloat(curLabel.getAttribute('x')) - parseFloat(prevLabel.getAttribute('x'))) / 2)
      );
    }

    // add group line
    function addGroupLine(text, xOffset, yOffset) {
      var parent = container.getElementsByTagName('g')[0];
      var groupLine = container.getElementsByTagName('rect')[0].cloneNode(true);
      groupLine.setAttribute('x', parseFloat(text.getAttribute('x')) + xOffset);
      groupLine.setAttribute('y', parseFloat(text.getAttribute('y')) + yOffset);
      groupLine.setAttribute('width', '0.8');
      groupLine.setAttribute('height', '188');
      groupLine.setAttribute('stroke', '#333333');
      groupLine.setAttribute('stroke-width', '1');
      groupLine.setAttribute('fill', '#333333');
      groupLine.setAttribute('fill-opacity', '1');
      parent.appendChild(groupLine);
    }
  });

  chart.draw(view, options);
}

google Line chart with double label on X axis

Answers (1)

Related Questions