Change color of column stroke in Google Visualization Timeline

Question

I'm attempting to change the stroke color for columns in the Google Visualization Timeline.

I am able to do that but I can't specify that only the vertical stroke lines should be changed not the horizontal lines.

Is there a way to identify just the vertical lines? The svg calls both horizontal lines and vertical "path d".

 google.charts.load('current', { callback: drawChart, packages: ['timeline'] }); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ] ]); var observer = new MutationObserver(setcolumnstroke); google.visualization.events.addListener(chart, 'ready', function () { setcolumnstroke(); observer.observe(container, { childList: true, subtree: true }); }); function setcolumnstroke() { Array.prototype.forEach.call(container.getElementsByTagName('path'), function (path) { path.setAttribute('stroke', '#000000'); }); } chart.draw(dataTable); } 

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

Answer 1

Here's one way: Take the X coordinate from the d attribute (the first digit after M and the first digit after L) if they are the same, it is a vertical line.

Regex Answer

Using regex to match the first numbers after M to the numbers after L: M(\\d+).*L\\1

 google.charts.load('current', { callback: drawChart, packages: ['timeline'] }); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ] ]); var observer = new MutationObserver(setcolumnstroke); google.visualization.events.addListener(chart, 'ready', function () { setcolumnstroke(); observer.observe(container, { childList: true, subtree: true }); }); function setcolumnstroke() { Array.prototype.forEach.call(container.getElementsByTagName('path'), function (path) { // Check for vertical lines if ( path.getAttribute('d').match(/M(\\d+).*L\\1/) ) { path.setAttribute('stroke', '#FF0000'); } else { path.setAttribute('stroke', '#000000'); } }); } chart.draw(dataTable); } 

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

Old Answer:

Using substring method: if (d.substring(1, 4) == d.substring(d.indexOf('L')+1, d.indexOf('L')+4))

 // The X coordinate of the M (move) command
d.substring(1, 4)

// The X coordinate of the L (line) command
d.substring(d.indexOf('L')+1, d.indexOf('L')+4))

Note this would break if it is not formatted exactly as M...L... but perhaps google charts path output is always in that format.

 google.charts.load('current', { callback: drawChart, packages: ['timeline'] }); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ] ]); var observer = new MutationObserver(setcolumnstroke); google.visualization.events.addListener(chart, 'ready', function () { setcolumnstroke(); observer.observe(container, { childList: true, subtree: true }); }); function setcolumnstroke() { Array.prototype.forEach.call(container.getElementsByTagName('path'), function (path) { let d = path.getAttribute('d'); let dl = d.indexOf('L'); if ( d.substring(1, d.indexOf(',')) == d.substring(dl+1, d.indexOf(',', dl)) ) { path.setAttribute('stroke', '#FF0000'); } else { path.setAttribute('stroke', '#000000'); } }); } chart.draw(dataTable); } 

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