CODEWITHSUNDEEP
javascriptjqueryjoindatatablegoogle-visualization
Rob Boerman
Rob Boerman

Reputation: 87

merge 2 google chart dataTables to 1

i have 2 google chart dataTables that i want to merge to 1 google chart dataTable.

example table 1:

1 | test1 | 20

2 | test2 | 30

example table 2:

1 | test1 | 20

3 | test3 | 60

i want to merge the 2 to:

1 | test1 | 20

2 | test2 | 30

3 | test3 | 60

what is the best way to do that? my code now does not combine them but just adds the rows and colums. docs: https://developers.google.com/chart/interactive/docs/reference#join

oldjson = '
{
  "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}]}
      ]
}';

newjson = '
{
  "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":"Zucchini","f":null},{"v":1,"f":null}]}
      ]
}';


var oldData = new google.visualization.DataTable(oldjson);
var newdata = new google.visualization.DataTable(newjson);
console.log("old data", oldData);
console.log("new data", newdata);

// i want to merge the 2 datas here
var mergedData = google.visualization.data.join(oldData, newdata, 'full', [[0, 0]], [1], [1]);

console.log("merged data", mergedData);

Upvotes: 1

Views: 1568

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

given the example tables provided in the question,

you would want to use a 'full' join, with keys for all columns

leaving the options for dt1Columns and dt2Columns empty

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'],
    [1, 'test1', 20],
    [3, 'test3', 60],
  ]);

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

  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>

EDIT

assuming the data tables always have the same number of columns
(as each other)

and the join type will always be the same

you can build the keys dynamically using a loop

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'],
    [1, 'test1', 20],
    [3, 'test3', 60],
  ]);

  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