google.visualisation.DataTable() merging rows

Question

I have this data in a Google DataTable:

I need to merge rows that have the same date. So the result would be:

Is there a build in method in the DataTable to achieve this or can somebody give me a hint how to do this without the need of typical iterating through the table and comparing on each row.

HERE IS jsfiddle link what I am trying now.

jsfiddle.net/Kwangsub_Ahn/ohh8397h/7/

HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>

JAVASCRIPT
google.load("visualization", "1.1", {
    packages: ["table"]
});
google.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('string', 'Project');
    data.addColumn('string', 'System');
    data.addColumn('number', 'No');
    data.addRows([
        ['7/31/2014', 'project1', 'system1', 5],
        ['5/2/2014', 'project2', 'system2', 2],
        ['5/2/2014', 'project1', 'system1', 5],
        ['1/31/2014', 'project3', 'system4', 1]
    ]);

    var view = new google.visualization.DataView(data);

    var id = document.getElementById('table_div');
    var table = new google.visualization.Table(id);

    table.draw(view, {
        allowHtml: true,
        width: '100%',
        height: '100%',
        page: 'enable',
        pageSize: 10
    });
}

Vested

Answer 1

there aren't any standard options,

but you can manually modify the table chart,

once the 'ready' event fires,

see following working snippet...

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

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('string', 'Project');
    data.addColumn('string', 'System');
    data.addColumn('number', 'No');

    data.addRows([ ['7/31/2014', 'project1', 'system1', 5], ['5/2/2014', 'project2', 'system2', 2], ['5/2/2014', 'project1', 'system1', 5], ['5/2/2014', 'project4', 'system4', 4], ['5/2/2014', 'project3', 'system4', 5], ['1/31/2014', 'project3', 'system4', 1], ['1/31/2014', 'project4', 'system4', 2] ]);

    var view = new google.visualization.DataView(data);

    var id = document.getElementById('table_div');
    var table = new google.visualization.Table(id);

    google.visualization.events.addOneTimeListener(table, 'ready', function () {
      var rowLabel = null;
      var rowIndex;
      var rowSpan;
      var rows = id.getElementsByTagName('tr');
      Array.prototype.forEach.call(rows, function (row, index) {
        if (rowLabel !== row.cells[0].innerHTML) {
          rowLabel = row.cells[0].innerHTML;
          rowIndex = index;
          if (rowSpan > 1) {
            rows[index - rowSpan].cells[0].rowSpan = rowSpan;
          }
          rowSpan = 1;
        } else {
          row.removeChild(row.cells[0]);
          if (index === (rows.length - 1)) {
            rows[index - rowSpan].cells[0].rowSpan = ++rowSpan;
          } else {
            rowSpan++;
          }
        }
      });

    });

    table.draw(view, {
        allowHtml: true,
        width: '100%',
        height: '100%',
        page: 'enable',
        pageSize: 10
    });
}

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

note: don't think there is an easier way without iterating each row

Plashy

When I provide data like data.addRows([ ['7/31/2014', 'project1', 'system1', 5], ['5/2/2014', 'project2', 'system2', 2], ['5/2/2014', 'project1', 'system1', 5], ['5/2/2014', 'project4', 'system4', 4], ['5/2/2014', 'project3', 'system4', 5], ['1/31/2014', 'project3', 'system4', 1], ['1/31/2014', 'project4', 'system4', 2] ]); It returns 2 rows of 5/2/2014 date, but it should be 1 row. where rowspan would be 4 for this. @Plashy – Alamein