Color in Google's Timeline Chart bars based in the a specific value

Question 1

There's nothing in the Timeline visualization that will do this for you, but you can set the colors option to whatever you need to get the bars the right color. You can parse the DataTable to build the colors array, and then use a DataView to hide your category column from the Timeline (since the Timeline wouldn't know what to do with it). Here's an example:

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', 'CategoryA', 'C00004', new Date(2014, 0, 1),  new Date(2014, 0, 15) ],
        [ 'GROUP #2', 'CategoryC', 'C00005', new Date(2014, 2, 8),  new Date(2014, 2, 15) ],
        [ 'GROUP #3', 'CategoryC', '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: '#19c362',
        CategoryC: '#592df7'
    }
    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,
            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, 2, 3, 4]);

    chart.draw(view, options);
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});

See it working here: http://jsfiddle.net/asgallant/7A88H/

Question 2

Use the undocumented 'style' role as seen in my working example: http://jsfiddle.net/af8jq9aa/1/

function drawChart() {
  var container = document.getElementById('example5.4');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'string', role: 'style' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'red/green/blue', 'NAME OF BAR (should be RED) (ff0000)', '#ff0000', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
    [ 'red/green/blue', 'NAME OF BAR (should be GREEN) (00ff00)','#00ff00', new Date(1796, 2, 3),  new Date(1801, 2, 3) ],
    [ 'red/green/blue', 'NAME OF BAR (should be BLUE) (0000ff)','#0000ff',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

  var options = {
  };

  chart.draw(dataTable, options);
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});

Question 3

I have tried something like this and it worked and was able to set different colors to different row labels in the grid.

var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', id: 'ShiftDetails' });
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({ type: 'string', role: 'RowDetails' });
dataTable.addRows([['APHANEE WORARUCHEE','','',new Date(0,0,0,0,0,0),new 
Date(0,0,0,18,0,0),'asdf'],
['CHEW SEOW LEE','','',new Date(0,0,0,0,0,0),new Date(0,0,0,9,0,0),'qwerty'],['TOTAL 
MANPOWER PER HOUR','5','color: red',new Date(0,0,0,0,0,0),new 
Date(0,0,0,1,0,0),'TOTAL'], 
['TOTAL MANPOWER PER HOUR','4','color: red',new Date(0,0,0,1,0,0),new 
Date(0,0,0,2,0,0),'TOTAL']]);

var options = {
timeline: { singleColor: '#8d8', barLabelStyle: { fontName: 'Arial Black', fontSize: 
12 } },backgroundColor: '#ffd'};

Question 4

You have to put the role style on the middle of the array. it must be on the middle for it to work. I have tried pushing it on the end of my array and it did not work.

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', role: 'style' });      <===========
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
}

Question 5

You have to use option:

    timeline: {
        colorByRowLabel: true
    }

From google docs: timeline.colorByRowLabel default value boolean false
If set to true, colors every bar on the row the same. The default is to use one color per bar label.

Question 6

I did like this, its working fine for me.

var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', id: 'JobType' });
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });

for (var j = 0; j < model.JobType.length; j++)
{
    var jbt = model.JobType;
    var ColorValue = null;

    if (jbt == "Job A"){
        ColorValue = "#AF0BEA";
    }
    else if (jbt == "Job B")
    {
        ColorValue = "#19c362";
    }
    else if (jbt == "Job C")
    {
        ColorValue = "#091F8B";
    }
    else if (jbt == "Job D")
    {
        ColorValue = "#592df7";
    }
    else if (jbt == "Job E")
    {
        ColorValue = "#d3401b";
    }

    dataTable.addRows([[name, jbt, ColorValue, startdate, endDate]]);
}

Question 7

//set fixed colors
var colors = [];
var colorMap = {
  'Maschine in Produktion':                       '#7baaf7',
  'Behälterwechsel':                              '#e67c73',
  'Auftragsgemäßes Rüsten von W.Z. und Material': '#f7cb4d',
  'Unterbrechung':                                '#57ba8a',
  'neues Werkzeug einfahren':                     '#c47ed0',
  'Produktqualität(vermessen der Teile)':         '#4dc5d4',
  'frei':                                         '#ff9b7b',
  'Werkzeugschaden':                              '#bbba66',
  'Coilmaterial (nicht geeignet)':                '#8d97d3',
  'neues Werkzeug einfahren':                     '#f5cfff'
}

for (var i = 0; i < data.getNumberOfRows(); i++) {      
  colors.push(colorMap[data.getValue(i, 0)]);
}

var unique = colors.filter(function(itm, i, a) {
  return i == colors.indexOf(itm);
});


var options = {
  height:   800, 
  hAxis:        {format: isDay == 1 ? 'HH:MM:SS' : 'dd.MM.yyyy HH:MM:SS'},
  tooltip:  {isHtml: true},
  legend:   'none',
  avoidOverlappingGridLines: false,
  colors:   unique
};

chart.draw(data, options);

This works perfectly for me. The main Problem with the old code is, that the colors array....is just an array and not a unique Hashmap. You can just use the custom filter function in order to get the unique colors.