CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Jonathan Chiou
Jonathan Chiou

Reputation: 359

Google Charts Timeline: Issue with coloring & bar labels

I have a timeline chart. When I have only 3 columns (row label, start date, end date) in my timeline and color it, everything works perfectly. However, I added a another column (bar label) to my timeline, and now the coloring is all messed up. Does anyone know how to fix this issue? If it isn't, would this issue be considered a bug.

Sample code snippet on jsfiddle demonstrating the issue: https://jsfiddle.net/9egybsro/

Looking at my hard-coded color array:

var color = ['#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#868686',
            '#FF9900',
            '#FF9900'
          ]

All bars except the 3rd to last bar should be colored orange. The 3rd to last bar should be colored grey. As shown when the run button is hit, all the bars are colored orange.

Upvotes: 1

Views: 1031

Answers (2)

WhiteHat
WhiteHat

Reputation: 61212

by default, the colors follow the bar labels

set timeline.colorByRowLabel to use the row labels / position of colors array

timeline: {
  colorByRowLabel: true
}

otherwise, use a distinct bar label... 

var barLabel = [];
for (var i = 0; i < startDate.length; ++i) {
  barLabel.push("potato" + i);
}

see following working snippet...

google.charts.load('current', {
  'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var container = document.getElementById("timeline");
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'account_name'
  });
  dataTable.addColumn({
    type: 'string',
    id: 'bar_label'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });

  var name = ['Russ Hanneman',
    'Gavin Belson',
    'Jack Barker',
    'Peter Gregory',
    'Jian Yang',
    'Richard Hendrix',
    'Dinesh Chugtai',
    'Bertram Gilfoyle',
    'Erlich Bachman',
    'Monica Hall',
    'Nelson Bighetti',
    'Aaron Anderson',
    'Donald \'OJ\' Dunn'
  ]

  var startDate = [new Date(2016, 0, 2),
    new Date(2015, 5, 1),
    new Date(2015, 11, 31),
    new Date(2014, 0, 1),
    new Date(2016, 6, 16),
    new Date(2016, 9, 12),
    new Date(2017, 5, 20),
    new Date(2019, 0, 1),
    new Date(2015, 0, 1),
    new Date(2016, 9, 21),
    new Date(2015, 8, 1),
    new Date(2017, 6, 4),
    new Date(2015, 6, 17)
  ]

  var endDate = [new Date(2025, 6, 25),
    new Date(2016, 11, 17),
    new Date(2016, 2, 4),
    new Date(2018, 6, 16),
    new Date(2017, 11, 25),
    new Date(2020, 2, 3),
    new Date(2019, 6, 13),
    new Date(2019, 9, 16),
    new Date(2018, 9, 23),
    new Date(2019, 7, 12),
    new Date(2019, 2, 17),
    new Date(2022, 3, 1),
    new Date(2021, 0, 21)
  ]

  var barLabel = [];
  for (var i = 0; i < startDate.length; ++i) {
    barLabel.push("potato");
  }

  var color = ['#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#868686',
    '#FF9900',
    '#FF9900'
  ]

  heightVal = 50 * name.length;
  if (heightVal > 500) {
    heightVal = 500;
  }

  document.getElementById("timeline").style = "height: " + heightVal.toString() + "px;";

  var accounts = [];

  for (i = 0; i < endDate.length; i++) {
    accounts.push([name[i], barLabel[i], startDate[i], endDate[i]]);
  }

  var options = {
    colors: color,
    timeline: {
      colorByRowLabel: true
    }
  };

  dataTable.addRows(accounts);

  chart.draw(dataTable, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<p id="demo"></p>
<div id="timeline" style="height: 240px;"></div>

Upvotes: 3

Jonathan Chiou
Jonathan Chiou

Reputation: 359

Solved it. colorByRowLabel needs to be set to true. I believe that the value of the bar label will be used as a metric for coloring if it's set to false rather than the index of that row relative to the array of colors.

Upvotes: 1

Related Questions