CODEWITHSUNDEEP
javascriptjquerydatatablegoogle-visualization
Rob Boerman
Rob Boerman

Reputation: 87

Google chart, append dataTable rows to other dataTable

i have 2 google.visualization.DataTable(data)

i want to append the rows of 1 of the dataTables to the other dataTable.

How do i do that?

example table 1:

1 | test1 | 20

2 | test2 | 30

example table 2:

3 | test3 | 60

4 | test4 | 40

i want to merge the 2 to:

1 | test1 | 20

2 | test2 | 30

3 | test3 | 60

4 | test4 | 40

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

var json1 = {
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]}
      ]
}

var json2 = {
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}
function drawChart() {

  var oldData = new google.visualization.DataTable(json1);
  var appendData = new google.visualization.DataTable(json2);
  
  /// somehow append rows of appendData to olddata here
  
  var newData = new google.visualization.DataTable(json1); // needs to be changed to he combined data
  var chart = new google.visualization.Table(document.getElementById('chart_div'));
  chart.draw(oldData);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Views: 1089

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

the same script from the other question appears to produce the desired result

see following working snippet... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y1', 'y2'],
    [1, 'test1', 20],
    [2, 'test2', 30],
  ]);

  var data1 = google.visualization.arrayToDataTable([
    ['x', 'y1', 'y2'],
    [3, 'test3', 60],
    [4, 'test4', 40],
  ]);

  var keys = [];
  for (var i = 0; i < data.getNumberOfColumns(); i++) {
    keys.push([i, i]);
  }

  var joinData = new google.visualization.data.join(
    data,
    data1,
    'full',
    keys,
    [],
    []
  );

  var chart = new google.visualization.Table(document.getElementById('chart_div'));
  chart.draw(joinData);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions