Column color in Google Charts AnnotatedTimeLine - google-visualization

Question

Im working with the AnnotatedTimeLine chart from Google. My chart is pretty messy (10-15 data sets) and I'm trying to make it easier to deal with. Along these lines I've added an 'index' with checkboxes to enable/disable particular columns. Now Im wondering how to get/set the color/thickness/line qualities of each column.
It looks like you can get information about a given column using getColumnProperties( column # ) but when I look at the returned object in the debugger I see plenty of methods but no properties.
Either:
Looking at the 'properties' object in the js debugger is the wrong way to enum property names / values
There aren't any user-settable properties
Suggestions on where I should be looking?

Answer 1

You need to set the color for each data value within the chart. See the documentation here. The colors option will allow you to set the color for each set (pass in an array for the color of each different series). thickness will set the line thickness, but is a "one size fits all" option and cannot be configured separately for each series. You can see an example of how to configure an annotated timeline chart here:
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addColumn('number', 'Sold Papers');
data.addRows([
[new Date(2009, 1 ,1), 30000, null, null, 4645, null, null, 12345],
[new Date(2009, 1 ,2), 14045, null, null, 2374, null, null, 44444],
[new Date(2009, 1 ,3), 55022, null, null, 5766, null, null, 76545],
[new Date(2009, 1 ,4), 75284, null, null, 1334, 'Out of Stock', 'Ran out of stock on pens at 4pm', 16345],
[new Date(2009, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 6467, null, null, 41345],
[new Date(2009, 1 ,6), 33322, null, null, 3463, null, null, 33665]
]);
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
document.getElementById('visualization'));
annotatedtimeline.draw(data, {
//'allValuesSuffix': '%', // A suffix that is added to all values
'colors': ['blue', 'red', '#0000bb'], // The colors to be used
'displayAnnotations': true,
'displayExactValues': true, // Do not truncate values (i.e. using K suffix)
'displayRangeSelector' : false, // Do not sow the range selector
'displayZoomButtons': false, // DO not display the zoom buttons
'fill': 30, // Fill the area below the lines with 20% opacity
'legendPosition': 'newRow', // Can be sameRow
//'max': 100000, // Override the automatic default
//'min': 100000, // Override the automatic default
'scaleColumns': [0, 1], // Have two scales, by the first and second lines
'scaleType': 'allfixed', // See docs...
'thickness': 2, // Make the lines thicker
'zoomStartTime': new Date(2009, 1 ,2), //NOTE: month 1 = Feb (javascript to blame)
'zoomEndTime': new Date(2009, 1 ,5) //NOTE: month 1 = Feb (javascript to blame)
});
}
Since it is a flash chart, there is very little configuration that you can do outside the options. If you want more control over the chart, I suggest combining a line chart using annotation columns. If you want to have a similar draggable slider below that allows you to select a range of dates, I recommend combining the line chart with a chart range filter.