Incorporating a Link to a RowLabel on a Google Chart Timeline

Question

Incorporating a Link to a RowLabel on a Google Chart Timeline

I have been working diligently on constructing a timeline for our team's Project Roadmap.

Everything is set up quite nicely: I've successfully embedded the Timeline into our Google Site and it seems to be functioning well with all the components added thus far.

My next objective is to incorporate a link on the RowLabel that will redirect me to another page within the Google Site. While I've come across some solutions for adding a listener and linking to a specific row item, my focus lies in attaching the link directly to the RowLabel itself, rather than the BarLabel.

For reference, here's an example of the current timeline implemented on the Google Site: https://sites.google.com/view/timeline-testing/home

What I aim to achieve is depicted in this Timeline Concept image: Timeline Concept

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('roadmap');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Category' });
    dataTable.addColumn({ type: 'string', id: 'Project' });
    dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true} });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    
    dataTable.addRows([

      [ 'Category 1', 'Project 1', 
      '<p style="padding:5px"><b>Overall Project:</b> Program X <br><b>Description:</b> Test 
      description for Project 1 <hr> <b> Start:</b> 2020/4/1 <br> <b> End:</b> 2020/8/15</p>', 
      '#2B8000', new Date(2020, 3, 13), new Date(2020, 6, 13)],
      
      [ 'Category 1', 'Project 2',  
      '<p style="padding:5px"><b>Overall Project:</b> Program X <br><b>Description:</b> Test 
      description for Project 2 <hr> <b>Start:</b> 2020/4/1 <br> <b>End:</b> 2020/8/15</p>', 
      '#2B8000', new Date(2020, 4, 22), new Date(2020, 6, 24)],

      // Additional rows...

    ]);

     // More code for customization options and functionalities
   }
</script>

// Some additional styling rules

// div containing roadmap visualization 
<div id="roadmap" style="height: 100%;"></div>

I am currently trying to configure the selector to detect when a RowLabel is clicked. There's uncertainty regarding where to store the link information within the DataTable. Should it be stored as another Data Column? The attempts at adding an extra Data Column like this have resulted in errors: dataTable.addColumn({ type: 'string', id: 'link' });

// Further elaboration on data structure...

Any guidance or assistance on this matter would be greatly appreciated!

Thank you,

UPDATE

Here is the status of the code: Styling of the rowLabel works fine, but the click event does not trigger on the Google Site Embed. To view the test on Google Site, visit this link: https://sites.google.com/view/timeline-testing/home

// Latest code snippet showcasing enhancements and modifications // Implementation of needed functionality and event handling

javascript html css charts google-visualization

Answer 1

Answer №1

Perhaps, in this scenario, the 'select' event may not be the most suitable solution.

Alternatively, we could attach event listeners to the row labels during the 'ready' event.

In the options, we assign a distinct color to the row labels.

timeline: {
  rowLabelStyle: {
    color: '#3399cc'
  }
}

We can utilize this unique color to apply additional CSS styles.

#roadmap text[fill="#3399cc"] {
  cursor: pointer;
  text-decoration: underline;
}

Subsequently, use this distinctive color to identify the chart elements and add the click event listener.

function readyHandler() {
  var labels = container.getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function(label) {
    if (label.getAttribute('fill') === options.timeline.rowLabelStyle.color) {
      label.addEventListener('click', clickHandler);
    }
  });
}

To save the link in the data table,
we can employ object notation for the initial column.
We provide the value (v:) and the link as a property (p:).

{v: 'Category 1', p: {link: 'https://www.google.com'}}

Then, utilize the getProperty method to retrieve the link from the data table within our click handler.

Initially, ascertain the content of the clicked label,
and utilize the data table method getFilteredRows to pinpoint the clicked row label.

function clickHandler(sender) {
  var rowLabel = sender.target.textContent;
  var dataRows = dataTable.getFilteredRows([{
    column: 0,
    value: rowLabel
  }]);
  if (dataRows.length > 0) {
    var link = dataTable.getProperty(dataRows[0], 0, 'link');
    window.open(link, '_blank');
  }
}

Refer to the following functioning snippet...

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var container = document.getElementById('roadmap');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'Category'});
  dataTable.addColumn({type: 'string', id: 'Project'});
  dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
  dataTable.addColumn({type: 'string', id: 'style', role: 'style'});
  dataTable.addColumn({type: 'date', id: 'Start'});
  dataTable.addColumn({type: 'date', id: 'End'});

  dataTable.addRows([
    [{v: 'Category 1', p: {link: 'https://www.google.com'}}, 'Project 1', 'test', '#2B8000', new Date(2020, 3, 13), new Date(2020, 6, 13)],
    [{v: 'Category 1', p: {link: 'https://www.google.com'}}, 'Project 2', 'test', '#2B8000', new Date(2020, 4, 22), new Date(2020, 6, 24)],
    // Other rows...
  ]);

  var options = {
    height: (dataTable.getNumberOfRows() * 42) + 42,
    tooltip: {isHtml: true},
    legend: 'none',
    timeline: {
      rowLabelStyle: {
        color: '#3399cc'
      }
    }
  };

  function readyHandler() {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('fill') === options.timeline.rowLabelStyle.color) {
        label.addEventListener('click', clickHandler);
        label.setAttribute('style', 'cursor: pointer; text-decoration: underline;');
      }
    });
  }

  // Function declaration of clickHandler...

  google.visualization.events.addListener(chart, 'ready', readyHandler);
  chart.draw(dataTable, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="roadmap"></div>

Note: The chart will convert all colors in the options to lowercase.
(#3399cc) <-- Ensure using a lowercase option for the color,
otherwise, the ready handler may fail to locate the text elements...

Answer 2

Perhaps, in this scenario, the 'select' event may not be the most suitable solution.

Alternatively, we could attach event listeners to the row labels during the 'ready' event.

In the options, we assign a distinct color to the row labels.

timeline: {
  rowLabelStyle: {
    color: '#3399cc'
  }
}

We can utilize this unique color to apply additional CSS styles.

#roadmap text[fill="#3399cc"] {
  cursor: pointer;
  text-decoration: underline;
}

Subsequently, use this distinctive color to identify the chart elements and add the click event listener.

function readyHandler() {
  var labels = container.getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function(label) {
    if (label.getAttribute('fill') === options.timeline.rowLabelStyle.color) {
      label.addEventListener('click', clickHandler);
    }
  });
}

To save the link in the data table,
we can employ object notation for the initial column.
We provide the value (v:) and the link as a property (p:).

{v: 'Category 1', p: {link: 'https://www.google.com'}}

Then, utilize the getProperty method to retrieve the link from the data table within our click handler.

Initially, ascertain the content of the clicked label,
and utilize the data table method getFilteredRows to pinpoint the clicked row label.

function clickHandler(sender) {
  var rowLabel = sender.target.textContent;
  var dataRows = dataTable.getFilteredRows([{
    column: 0,
    value: rowLabel
  }]);
  if (dataRows.length > 0) {
    var link = dataTable.getProperty(dataRows[0], 0, 'link');
    window.open(link, '_blank');
  }
}

Refer to the following functioning snippet...

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var container = document.getElementById('roadmap');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'Category'});
  dataTable.addColumn({type: 'string', id: 'Project'});
  dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
  dataTable.addColumn({type: 'string', id: 'style', role: 'style'});
  dataTable.addColumn({type: 'date', id: 'Start'});
  dataTable.addColumn({type: 'date', id: 'End'});

  dataTable.addRows([
    [{v: 'Category 1', p: {link: 'https://www.google.com'}}, 'Project 1', 'test', '#2B8000', new Date(2020, 3, 13), new Date(2020, 6, 13)],
    [{v: 'Category 1', p: {link: 'https://www.google.com'}}, 'Project 2', 'test', '#2B8000', new Date(2020, 4, 22), new Date(2020, 6, 24)],
    // Other rows...
  ]);

  var options = {
    height: (dataTable.getNumberOfRows() * 42) + 42,
    tooltip: {isHtml: true},
    legend: 'none',
    timeline: {
      rowLabelStyle: {
        color: '#3399cc'
      }
    }
  };

  function readyHandler() {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('fill') === options.timeline.rowLabelStyle.color) {
        label.addEventListener('click', clickHandler);
        label.setAttribute('style', 'cursor: pointer; text-decoration: underline;');
      }
    });
  }

  // Function declaration of clickHandler...

  google.visualization.events.addListener(chart, 'ready', readyHandler);
  chart.draw(dataTable, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="roadmap"></div>

Note: The chart will convert all colors in the options to lowercase.
(#3399cc) <-- Ensure using a lowercase option for the color,
otherwise, the ready handler may fail to locate the text elements...

Incorporating a Link to a RowLabel on a Google Chart Timeline

Answer №1

Similar questions

Axios and fetch returned distinct status codes when querying the same external endpoint

Introduction to Ajax communication using node.js

Overlapping Flexbox elements causing stacking issues

The width of the tables is unpredictable and cannot be constrained

Using JavaScript to insert a value through AJAX

Guide for extracting the first matching group with regex in node.js

How to sort Firebase real-time database by the child node with the highest number of

Toggle draggable grid in jQuery

Is it possible in HTML to create an "intelligent" overflow effect where text is truncated and replaced with an ellipsis "..." followed by a link to view the full content?

What steps can I take to avoid Vue.js overriding jQuery bindings within components?

Link commitments and ornament an entity

The bytea data retrieved from Postgres does not match the original data I inserted

Activate the date-picker view when the custom button is clicked

Guide on using jQuery to automatically scroll to the HTML container related to a clicked letter

Looking for guidance and bug assistance in HTML and JS, possibly involving PHP and MySQL. Can anyone offer advice?

How to Ensure the Final Column in an Angular Bootstrap Row Occupies the Remaining Available Space

Troubleshooting Bootstrap 4 Button Alignment on the Right

JQuery Tic Tac Toe Duel: Face Off Against Your Friend in a Thr

What is the best way to retrieve information from a database using JSON with PHP, JQUERY, and

Ways to modify a link tag based on a specific browser width