I have some bars on a google timeline chart that are specified as 'CategoryB' that I want colored let's say black/#000 for this example.
For all others I can make them a particular color of my choosing, but I don't want to specify - I'd prefer that they're given the default random colors that google gives them so they're all a bit different.
Is there a way to specify 'color: 'default'' or similar for 'CategoryA'? I've edited some code from this question - you'll see near the bottom are the two colors.
Javascript:
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'Category' });
dataTable.addColumn({ type: 'string', id: 'ID' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'GROUP #1', 'CategoryA', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1), new Date(2014, 3, 15) ],
[ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21), new Date(2014, 2, 19) ],
[ 'GROUP #1', 'CategoryB', 'C00005', new Date(2014, 0, 22), new Date(2014, 2, 18) ],
[ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1), new Date(2014, 0, 15) ],
[ 'GROUP #2', 'CategoryA', 'C00005', new Date(2014, 2, 8), new Date(2014, 2, 15) ],
[ 'GROUP #3', 'CategoryB', 'C00006', new Date(2014, 5, 1), new Date(2014, 5, 15) ],
[ 'GROUP #4', 'CategoryA', 'C00007', new Date(2014, 1, 15), new Date(2014, 1, 25) ]
]);
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
CategoryA: '#e63b6f',
CategoryB: '#000',
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options = {
timeline: {
groupByRowLabel: true,
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%',
colors: colors
};
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4]);
chart.draw(view, options);
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});
Html:
<div id='example4.2'></div>
first, the version of google charts you are loading has been deprecated.
the jsapi load should no longer be used.
according to the release notes, we should use the following gstatic loader from now on...
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement.
in this case, recommend using...
google.charts.load('current', {packages: ['timeline'], callback: drawChart});
next, we can use the style role to add the color directly to the data table.
and we can remove the category column currently used to determine the color.
note: the style role must be the third column to work properly.
for the 'CategoryB' rows, we set the color to black.
for the remaining rows, we use null as the color value.
google will then use the default colors for those rows, as desired.
dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'ID' });
dataTable.addColumn({ type: 'string', role: 'style' }); // <-- style role
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'GROUP #1', 'C00001', null, new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'C00002', null, new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'C00003', null, new Date(2014, 3, 1), new Date(2014, 3, 15) ],
[ 'GROUP #1', 'C00003', '#000000', new Date(2014, 0, 21), new Date(2014, 2, 19) ],
[ 'GROUP #1', 'C00005', '#000000', new Date(2014, 0, 22), new Date(2014, 2, 18) ],
[ 'GROUP #1', 'C00004', null, new Date(2014, 0, 1), new Date(2014, 0, 15) ],
[ 'GROUP #2', 'C00005', null, new Date(2014, 2, 8), new Date(2014, 2, 15) ],
[ 'GROUP #3', 'C00006', '#000000', new Date(2014, 5, 1), new Date(2014, 5, 15) ],
[ 'GROUP #4', 'C00007', null, new Date(2014, 1, 15), new Date(2014, 1, 25) ]
]);
see following working snippet...
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'ID' });
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'GROUP #1', 'C00001', null, new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'C00002', null, new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'C00003', null, new Date(2014, 3, 1), new Date(2014, 3, 15) ],
[ 'GROUP #1', 'C00003', '#000000', new Date(2014, 0, 21), new Date(2014, 2, 19) ],
[ 'GROUP #1', 'C00005', '#000000', new Date(2014, 0, 22), new Date(2014, 2, 18) ],
[ 'GROUP #1', 'C00004', null, new Date(2014, 0, 1), new Date(2014, 0, 15) ],
[ 'GROUP #2', 'C00005', null, new Date(2014, 2, 8), new Date(2014, 2, 15) ],
[ 'GROUP #3', 'C00006', '#000000', new Date(2014, 5, 1), new Date(2014, 5, 15) ],
[ 'GROUP #4', 'C00007', null, new Date(2014, 1, 15), new Date(2014, 1, 25) ]
]);
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options = {
timeline: {
groupByRowLabel: true,
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%'
};
chart.draw(dataTable, options);
}
google.charts.load('current', {packages: ['timeline'], callback: drawChart});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example4.2"></div>