I am developing a timeline chart that shows color based on a column , my feilds of date is datetime , I have found a js fiddle similar to my example just little modification i did added time but it works fine for single row not for multiple rows here is my js fiddle link with my data
JS FIDDLE FOR TIME LINE CHART (mine)
Now the example i am trying to copy is that link
i changed the default colur scheme
colors.push(colorMap[dataTable.getValue(i, 2)]);
so take color and push
then the category map
var colorMap = {
Zero: '#ffffff',
One: '#00b050', // green
Two: '#4bc0c0', // Aqua
Three: '#FFC000', // Yellow
Four: '#C2EFE6', // Light Sky blue
Five: '#935392', // Purple
Six: '#e48a89', // Light maroon
Sev: '#339cff' // Blue
}
Can any body modify the fiddle and tell me what i was missing and also i have checked that with only date by removing time So this is not a issue
EDIT
I am posting more code on request but fiddle also contain complete code A-Z
for setting colormap
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 2)]);
}
options for setting colors scheme
var options = {
timeline: {
groupByRowLabel: true,
rowLabelStyle: {
fontName: 'Roboto Condensed',
fontSize: 14,
color: '#333333'
},
barLabelStyle: {
fontName: 'Roboto Condensed',
fontSize: 14
}
},
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, 1, 3, 4]);
chart.draw(view, options);
Datatable column and rows like this
dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'ID' });
dataTable.addColumn({ type: 'string', id: 'Category' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([['Bay', ' ', 'Sev', new Date(2014, 0, 1, 9, 0, 0), new Date(2014, 0, 1, 9, 10, 0)], ['Bay', ' ', 'Sev', new Date(2014, 0, 1, 9, 10, 0), new Date(2014, 0, 1, 9, 20, 0)]]);
Based on third column i want color selection So index is 2