图表以显示具有相同ID和日期的两行

Question

I was trying to achieve below two scenarios: 1) In the chart when ID and dates are same but description is different, in such scenarios i want to show them in separate lines.
2) When there is no enough space to display the row label i want to display in other row.In my demo for the description "may text second data here" we can see the timeline but the label is not shown because there is no sufficient place to show the label.

Reference : Google Timeline chart to display 2 rows of same names

I tried following from above link but could not succeed. I cannot use groupByRowLabel: false as i want to show multiple timelines on the same row.

js code:

    $scope.display = function() {
     Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
    if (label.textContent.indexOf('|') > -1) {
    label.textContent = label.textContent.split('|')[1];
     alert(label.textContent);
  }
});
   }       
    $scope.myChart = chart1;

});

Answer 1

in scenario...
1) there simply isn't enough room to show two labels for the exact same date on the same row,
one will always overwrite the other

2) only way to know if a label doesn't display due to size,
is to inspect the chart elements on the chart's 'ready' event
for each row label, there should be a <text> element in the chart
if not, that row label is missing,
at which point you would change the data and draw again

something like this...

var changesMade = false;
chart1.data.rows.forEach(function (row, index) {
  var labelFound = false;
  Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
    if (row.c[1].v === label.textContent) {
      labelFound = true;
    }
  });
  if (!labelFound) {
    row.c[0].v = row.c[0].v + ' ' + index;  // change row label to make it appear
    changesMade = true;
  }
});
if (changesMade) {
  // draw chart with changed data
}