How to get bar label in Google Timeline chart with Chartkick gem

Question

I'm using chartkick gem to render a Google timeline graph. While this works very nicely out of the box, I read on the Google documentation, that I'm also able to include a bar label:

https://developers.google.com/chart/interactive/docs/gallery/timeline#labeling-the-bars

Is there an option to add that extra column to the datatable with the help of Chartkick?

I basically need this to be invoked before the Timeline is rendered:

dataTable.addColumn({ type: 'string', id: 'Name' });

Thanks

Code sample:

<%= timeline [
  ["Washington", "1789-04-29", "1797-03-03"],
  ["Adams", "1797-03-03", "1801-03-03"],
  ["Jefferson", "1801-03-03", "1809-03-03"]
] %>

Answer 1

This requires a change in the source, chartkick.js:

First, you need to add a line describing the new data column to the beginning of "this.renderTimeline" (i've called it Label):

...
var data = new google.visualization.DataTable();
            data.addColumn({type: "string", id: "Label"});
            data.addColumn({type: "string", id: "Name"});
            data.addColumn({type: "date", id: "Start"});
            data.addColumn({type: "date", id: "End"});
            data.addRows(chart.data);

Second, you need to update the "processTime" function, by adding 1 to the array values (since we've increased the array size by 1):

function processTime(chart)
  {
    var i, data = chart.rawData;
    for (i = 0; i < data.length; i++) {
      data[i][2] = toDate(data[i][2]);  // from data[i][1]
      data[i][3] = toDate(data[i][3]);  // from data[i][2]
    }
    return data;
  }