timeline row label homonymy

24 views
Skip to first unread message

David Shorthouse

unread,
Sep 15, 2021, 3:50:30 PMSep 15
to Google Visualization API
Hi all,

I've been making timelines but have a homonymy issue in my data for the row labels that I'd like to differentiate. I was hoping that I could use object notation to feed unique "v" values & then format them with "f" as a work-around, but that appears not to work.

Example homonymy issue:

[ { c: [ { v: "Smith" } ... ] }, { c: [ { v: "Smith" } ... ] } ]

Attempted work-around:

[ { c: [ { v: "Q1", f: "Smith" } ... ] }, { c: [ { v: "Q2", f: "Smith" } ... ] } ]

What I was hoping would happen here is that the values for "v" would be used as the groupByRowLabel, which I additionally require, whereas the "f" formatter would be used as display for the row labels. That way, identical labels would show on render but I'd have separate rows because the grouping happens on the value, not the format. However, the "Q1" and "Q2" above are used as undesirable row labels and the "f" is ignored entirely. Evidently, 'string'-type row labels cannot be formatted. 

Would it make any difference if my row values were type number like this?

[ { c: [ { v: 1, f: "Smith" } ... ] }, { c: [ { v: 2, f: "Smith" } ... ] } ]

Thanks,

David

David Shorthouse

unread,
Sep 15, 2021, 4:03:26 PMSep 15
to Google Visualization API
Hmm...I answered my own question.

[ { c: [ { v: 1, f: "Smith" } ... ] }, { c: [ { v: 2, f: "Smith" } ... ] } ]

Results in an error:

Invalid data table format: column #0 must be of type 'string'.

Can anyone offer a suggestion? Is it possible to change the row label after the groupByRowLabel has been invoked such that if I did have "Q1", "Q2", etc. used as row labels, swap them out for other values just prior to rendering?

Thanks,

David

David Shorthouse

unread,
Sep 16, 2021, 12:48:46 PMSep 16
to Google Visualization API
I tried another solution that swaps the svg text on a 'ready' listener:

          var labels = {};
          var rowInds = dataTable.getSortedRows([{ column: 0 }]);
          for (var i = 0; i < rowInds.length; i++) {
            var v = dataTable.getValue(rowInds[i], 0);
            labels[v] = dataTable.getFormattedValue(rowInds[i], 0);
          }

          google.visualization.events.addListener(chart, 'ready', function() {
            var tags = container.getElementsByTagName('text');
            $.each(tags, function() {
              if (labels.hasOwnProperty(this.textContent)) {
                this.textContent = labels[this.textContent];
              }
            });
          });

However, the arbitrary ellipses added on long timeline labels that have been grieved many, many times break the above entirely and so am no further ahead.

Ho hum,

David
Reply all
Reply to author
Forward
0 new messages