How to add a background color to a specific row in Google Charts

Question

I would like to add a background color to a specific row(s) in my Google Timeline Chart. I know there's a global setting to set the background of the entire chart, but how would I do this for a specific row. Here's an example of what I mean:

I would like the "Willow Room" row (and only that row) to have a background as follows:

Here is a jsfiddle example of the above (without the red background that I'm trying to get): https://jsfiddle.net/0f86vLrg/3/ .

 google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); 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: 'Platform' }); dataTable.addColumn({ type: 'string', id: 'Status' }); dataTable.addColumn({ type: 'string', role: 'style' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); // set the background of a missing item dataTable.addRows([ [ 'Magnolia Room', '', null, new Date(0,0,0,12,0,0), new Date(0,0,0,13,30,0) ], [ 'Magnolia Room', '', null, new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0) ], [ 'Willow Room', '', 'error', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'X Room', '', 'opacity: 0', new Date(0,0,0,0,0,0), new Date(0,0,1,0,0,0)]]); var options = { timeline: { colorByRowLabel: true }, backgroundColor: '#ffd' }; chart.draw(dataTable, { hAxis: { minValue: new Date(0,0,0,0,0,0), maxValue: new Date(0,0,0,24,0,0), } }); } 

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="timeline" style="height: 180px;"></div> 

How would I add in a background color for a specific row based on the "style" setting of that row (or if there's a better way to give it a class or something.) For example in the above code the style is called "error" for the "Willow Room" item.

Answer 1

there are no options for styling a specific bar on the timeline chart.
and the data format does not support the 'style' role, only the 'tooltip' role.

but we can still use the data table column to specify the error rows.
and we'll need to change their color manually, on the chart's 'ready' event.

the thing that makes this difficult, the chart will combine data table rows onto a single bar,
depending on the row label or even possibly the date range.
so the number of bars in the chart will not always match the number of bars in the data table.
however, they will be drawn in the same order as found in the data table.

as such, we must first find the corresponding data table row for the label.
then check to see if the label's row has an error.
then find the bar with the same index as the label and change the color.

see following working snippet...

 google.charts.load('current', { packages:['timeline'] }).then(function () { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Platform' }); dataTable.addColumn({ type: 'string', id: 'Status' }); dataTable.addColumn({ type: 'string', role: 'style' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ ['Magnolia Room', '', null, new Date(0,0,0,12,0,0), new Date(0,0,0,13,30,0)], ['Magnolia Room', '', null, new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0)], ['Willow Room', '', 'error', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0)], ['X Room', '', null, new Date(0,0,0,0,0,0), new Date(0,0,1,0,0,0)] ]); var options = { timeline: {colorByRowLabel: true}, backgroundColor: '#ffd', height: 180 }; // change bar color for errors google.visualization.events.addListener(chart, 'ready', function() { var rows; var barIndex; var labelIndex = 0; var labels = container.getElementsByTagName('text'); Array.prototype.forEach.call(labels, function(label) { // process bar labels if (label.getAttribute('text-anchor') === 'end') { // find data rows for label rows = dataTable.getFilteredRows([{ column: 0, test: function (value) { var labelFound; var labelText; // chart will cutoff label if not enough width if (label.textContent.indexOf('…') > -1) { labelText = label.textContent.replace('…', ''); labelFound = (value.indexOf(labelText) > -1); } else { labelText = label.textContent; labelFound = (value === labelText); } return labelFound; } }]); if (rows.length > 0) { // process label rows rows.forEach(function (rowIndex) { // check if row has error if (dataTable.getValue(rowIndex, 2) === 'error') { // change color of label label.setAttribute('fill', '#c62828'); // change color of bar barIndex = 0; var bars = container.getElementsByTagName('rect'); Array.prototype.forEach.call(bars, function(bar) { if ((bar.getAttribute('x') === '0') && (bar.getAttribute('stroke-width') === '0')) { if (barIndex === labelIndex) { bar.setAttribute('fill', '#ffcdd2'); } barIndex++; } }); } }); } labelIndex++; } }); }); chart.draw(dataTable, { hAxis: { minValue: new Date(0,0,0,0,0,0), maxValue: new Date(0,0,0,24,0,0) } }); }); 

 #timeline svg g text { font-weight: normal !important; } 

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