Google charts: apply different color styling types according to label for the timeline chart

Question

I currently have a Timeline chart with a filter already working. I bind these two using a dashboard.

The problem is that I want to have the first swimlane (or label) to have the property colorByRowLabel on true, but the rest to have it on the default false.

I think this is doable with the series attribute in the options with most charts, but I don't see that availability in the timeline chart at this moment.

If someone has done this or has a solution for this please post some example code and I will work the rest out. If I need to put my code on here let me know, but I thought it wouldn't be necessary.

Answer 1

the data format for Timeline doesn't allow for multiple series

the only method for providing custom colors is the colors option

which means you will need to provide all the colors ,
not just for the first label

the colors option takes an array of color strings
['#f44336', '#e91e63', '#9c27b0', ...

each color in the array will be assigned to a row in the data table

the first color string in the array will be assigned to the first row, and so on...

however, before drawing, the chart will sort the data based on start date
so must load the colors in the same order
which can be accomplished by manually sorting the data

see following working snippet,

the same color is used for the first label 'special' ,
the rest are assigned a separate color...

 google.charts.load('current', { callback: function () { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ ['special', '_', new Date(2010, 2, 4), new Date(2011, 2, 4) ], ['1', 'A', new Date(2011, 3, 30), new Date(2012, 2, 4) ], ['2', 'B', new Date(2012, 2, 4), new Date(2013, 3, 30) ], ['special', '-', new Date(2010, 2, 4), new Date(2011, 2, 4) ], ['3', 'C', new Date(2013, 3, 30), new Date(2014, 2, 4) ], ['4', 'D', new Date(2014, 2, 4), new Date(2015, 2, 4) ], ['special', '=', new Date(2010, 2, 4), new Date(2011, 2, 4) ], ['5', 'E', new Date(2015, 3, 30), new Date(2016, 2, 4) ], ['6', 'F', new Date(2016, 2, 4), new Date(2017, 2, 4) ], ['special', '|', new Date(2010, 2, 4), new Date(2011, 2, 4) ], ['7', 'G', new Date(2017, 2, 4), new Date(2018, 2, 4) ], ['8', 'H', new Date(2018, 2, 4), new Date(2019, 2, 4) ], ['9', 'I', new Date(2019, 2, 4), new Date(2020, 2, 4) ] ]); // sort by start date dataTable.sort([{column: 2}]); // build chart colors var colorPallette = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b', '#000000', '#ffffff']; var chartColors = []; var colorIndex = 0; var firstLabel = dataTable.getValue(0, 0); for (var i = 0; i < dataTable.getNumberOfRows(); i++) { if (dataTable.getValue(i, 0) === firstLabel) { chartColors.push(colorPallette[0]); } else { chartColors.push(colorPallette[++colorIndex]); } } chart.draw(dataTable, { colors: chartColors, height: 600 }); }, packages: ['timeline'] }); 

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