CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Alex
Alex

Reputation: 810

Google Table Merge columns

I have a page that displays data in the form of a Table. I use Google Charts and here is the code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["table"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
         ['Task', 'Hours per Day', 'Test', 'Hours per Day', 'Test'],
          ['Work',     11, 12, 11, 12],
          ['Eat',      2, 13, 2, 13],
          ['Commute',  2, 15, 2, 34],
          ['Watch TV', 2, 17, 7, 24],
          ['Sleep',    7, 18, 2, 13]
        ]);

       var chart = new google.visualization.Table(document.getElementById('tablechart'));
       chart.draw(data);
      }
    </script>
<div id="tablechart" style="width: 700px; height: 400px; position: relative;"></div>

And here's a working JS FIDDLE: https://jsfiddle.net/alex4uthis/kt21bf0k/

I would like to get the following format: enter image description here

(I would like to merge Jan and Feb same as in the image)
Please advise...

Upvotes: 3

Views: 2827

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

You can use the 'ready' event to change the chart manually once finished drawing.

There are no options available in the google chart to add additional header rows.
Which makes this answer somewhat of a hack.

Regardless, the chart itself is a normal TABLE element

This is a simple example and I make assumptions based on the data provided to the chart.
Other factors may need to be considered as well.
For instance, when a scrollbar is present and the header row remains fixed, there will be a second header row to deal with. Last I checked anyway...

This approach should work fine given a simple table chart.
I have used this approach to add total rows at the bottom, etc...

I use cloneNode to make sure the new row has the same style as the rest of the chart.

google.load('visualization', '1', {packages:['table'], callback: drawChart});

function drawChart() {
  var divTableChart;

  divTableChart = document.getElementById('tablechart');

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day', 'Task', 'Hours per Day'],
    ['Work',     11, 'Work', 12],
    ['Eat',      2, 'Work', 13],
    ['Commute',  2, 'Work', 34],
    ['Watch TV', 2, 'Work', 24],
    ['Sleep',    7, 'Work', 13]
  ]);

  var chart = new google.visualization.Table(divTableChart);

  google.visualization.events.addListener(chart, 'ready', function () {
    var headerRow;
    var newRow;

    // get header row and clone to keep google chart style
    headerRow = divTableChart.getElementsByTagName('THEAD')[0].rows[0];
    newRow = headerRow.cloneNode(true);

    // modify new row to combine cells and add labels
    newRow.deleteCell(newRow.cells.length - 1);
    newRow.deleteCell(newRow.cells.length - 1);
    newRow.cells[0].colSpan = 2;
    newRow.cells[0].innerHTML = 'Jan';
    newRow.cells[1].colSpan = 2;
    newRow.cells[1].innerHTML = 'Feb';

    // insert new / cloned row
    divTableChart.getElementsByTagName('THEAD')[0].insertBefore(newRow, headerRow);
  });

  chart.draw(data);
}
<script src="https://www.google.com/jsapi"></script>
<div id="tablechart"></div>

Upvotes: 4

Related Questions