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

Question

I would like to create groups of colors for the bars. The example below is raw. I would like to add a column with a category type, and based on that category I will color th

Answer 1

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' });
}

Answer 2

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/

Answer 3

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]]);
}

Answer 4

//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.

Answer 5

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'};

Answer 6

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});