Geek Answers Handbook

Google chart timeline color based on specific value

I would like to create color groups for bars. The example below is unprocessed. I would like to add a column with the category type, and based on this category I will color the panel.

Something like:

Column

dataTable.addColumn({ type: 'string', id: 'Category' });

Line

 [ '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) ]]);

Based on the category, the panel should have a specific color.

Fiddle

 google.load("visualization", "1", {packages: ["timeline"]}); google.setOnLoadCallback(drawChart); 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: 'ID' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'GROUP #1', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ], [ 'GROUP #1', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ], [ 'GROUP #1', 'C00003', new Date(2014, 3, 1), new Date(2014, 3, 15) ], [ 'GROUP #1', 'C00003', new Date(2014, 0, 21), new Date(2014, 2, 19) ], [ 'GROUP #1', 'C00004', new Date(2014, 0, 1), new Date(2014, 0, 15) ], [ 'GROUP #2', 'C00005', new Date(2014, 2, 8), new Date(2014, 2, 15) ], [ 'GROUP #3', 'C00006', new Date(2014, 5, 1), new Date(2014, 5, 15) ], [ 'GROUP #4', 'C00007', new Date(2014, 1, 15), new Date(2014, 1, 25) ]]); 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%' }; chart.draw(dataTable, options); }
+8
google-visualization
source share
3 answers

There is nothing in the timeline visualization that would do this for you, but you can set the colors parameter to whatever you need so that the bars have the correct color. You can analyze a DataTable to build an array of colors, and then use a DataView to hide the category column from the timeline (because Timeline does not know what to do with it). Here is 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 how it works here: http://jsfiddle.net/asgallant/7A88H/

+14
source share

Use the undocumented style role, as shown 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});
+7
source share

You should use the option:

  timeline: { colorByRowLabel: true }

From google docs: timeline.colorByRowLabel default value boolean false
If set to true, each line in the line will be the same. By default, one color per label is used.

0
source share

More articles:


All Articles