Google Visualization - Word wrap within a Timeline

Question

I am pretty certain that I know the answer to my first question here will be, 'No, that's not possible.' But I'll ask anyway, in case I've missed something in my research.

I am using the Google Timeline visualization to present a calendar of project activity. The issue I have is that in some cases, the text of the bar label is truncated with "...", and in other cases, the text is removed outside the bar due to spacing.

  google.charts.load('current', {'packages':['timeline']});  // load the chart type

  // function to receive the chart data and build it
  function buildChart(JSONData) {
    var retObj = JSON.parse(JSONData);
    var rawChartData = retObj.chartData;
    var chartLength = retObj.chartLength;

    // display message if no data is returned ...
    if(rawChartData == null || rawChartData.length == 0) {
      $('#chartDiv').html("There is no data for the selection");
    } else {  // ... or build the chart

      var container = document.getElementById('chartDiv');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable();

      // replace the start/end timestamps with actual dates
      const dateIndices = [4,5];
      const chartData = rawChartData.map(function (row) {
        return row.map(function (col, index) {
          return (dateIndices.indexOf(index) === -1) ? col : new Date(col);
        });
      });

      dataTable.addColumn({ type: 'string', id: 'Project' });
      dataTable.addColumn({ type: 'string', id: 'Bar Label' });  // THIS IS THE FIELD I AM ASKING ABOUT
      dataTable.addColumn({ type: 'string', role: 'tooltip', p: {'html':true}});
      dataTable.addColumn({ type: 'string', id: 'style', role: 'style'});  //color
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
      dataTable.addColumn({ type: 'number', id: 'sortValue' });
      dataTable.addColumn({ type: 'string', id: 'Program' });
      dataTable.addColumn({ type: 'string', id: 'Active/Future' });

      dataTable.addRows(chartData);

      //create a DataView with only the columns needed for the visualization
      var view = new google.visualization.DataView(dataTable);
      view.setColumns([0, 1, 2, 3, 4, 5]);  // exclude column 6-8 (sort, program, type)

      var options = {
        height: Math.max(500, (chartLength*45)+60),
        //width:"800",
        backgroundColor: 'white',
      };

      chart.draw(view, options);
    }
  }

Here is the chart that is produced.

Is there a way to get the bar labels to use word wrap, so that the bar gets taller, and can include all of the text being sent?

As I said, I am pretty certain the answer to that will be 'No.' I know that the Timeline chart has fewer config options than some of the other Material charts, so I'm pretty sure there's nothing I can do with that.

That assumed, does someone have a suggestion for a different Timeline chart tool that I could implement within a google apps script environment, that would allow me to word wrap bar labels to show more text? Note that I am not a developer by any stretch of the imagination; I only pretend to be one within our PMO. So any alternate solution would have to be pretty idiot friendly. I can probably make something happen with jquery if that's the best route to go, but there are so many charting tool options out there, I wanted to ask for recommendations.

EDIT: I have added the relevant code for the Google Visualization, and indicated that column 1 holds the bar label text that I would like to word wrap. I have also added a link to the documentation on Google's Timeline chart.

question from:https://stackoverflow.com/questions/66054836/google-visualization-word-wrap-within-a-timeline

Answer 1

Waitting for answers