It appears that the Google Timeline charts have a feature to color individual blocks on the timeline as indicated in the documentation at
However, there seems to be an issue when two bars overlap on the same line, which is evident in this fiddle: http://jsfiddle.net/7A88H/21/
Below is the relevant code snippet:
dataTable.addRows([
[ 'red/green/blue', 'NAME OF BAR (should be RED) (ff0000)', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
[ 'red/green/blue', 'NAME OF BAR (should be GREEN) (00ff00)', new Date(1796, 2, 3), new Date(1801, 2, 3) ],
[ 'red/green/blue', 'NAME OF BAR (should be BLUE) (0000ff)', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]);
var options = {
colors: ['#ff0000', '#00ff00', '#0000ff'],
};
I attempted to modify my data rows by adding a fifth column for the color based on the solution provided in this question: Google Charts API: Add Blank Row to Timeline?
Here is the function I tried using to build my workaround:
(function(){
var el=container.getElementsByTagName("rect");
var width=100000000;
var elToRem=[];
for(var i=0;i<el.length;i++){
var cwidth=parseInt(el[i].getAttribute("width"));
if(cwidth<width){
elToRem=[el[i]];
width=cwidth;
}
else if(cwidth==width){
elToRem.push(el[i]);
}
}
for(var i=0;i<elToRem.length;i++)
elToRem[i].setAttribute("fill","none");
})();
The goal was to identify each rect element and color them accordingly based on their associated colors from the row objects. However, I struggled to retrieve the specific color information from the rect objects themselves.