Coloring the bars in a Timeline using the "colors" option is a tricky process at best, and may well be bugged. It is much easier to use a "style" role column to color the bars: http://jsfiddle.net/asgallant/t5wj394u/
On Thursday, October 23, 2014 2:55:36 PM UTC-4, Abdul Javeed wrote: > > i want my colors in the milestones to be all individually controlled but > looks like its not working. Is this a bug? Here is my code below.... > > <script type="text/javascript" src=" > https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization', > > 'version':'1','packages':['timeline']}]}"></script> > > <script type="text/javascript"> > > > > google.setOnLoadCallback(drawChart); > > function drawChart() { > > > > var container = document.getElementById('example3.1'); > > var chart = new google.visualization.Timeline(container); > > > > var dataTable = new google.visualization.DataTable(); > > dataTable.addColumn({ type: 'string', id: 'Position' }); > > dataTable.addColumn({ type: 'string', id: 'Name' }); > > dataTable.addColumn({ type: 'date', id: 'Start' }); > > dataTable.addColumn({ type: 'date', id: 'End' }); > > dataTable.addRows([ > > [ 'Release 1', 'Milestone 1 due 12/25/14 - Goals: FATCA > onboarding, orientation, registration, requirements gathering, > visualization', new Date(2014, 11, 01), new Date(2014, 11, 30)], > > [ 'Release 1', 'Milestone 2', new Date(2014, 12, 01), > new Date(2014, 12, 30)], > > [ 'Release 1', 'Milestone 3', new Date(2015, 01, 01), new > Date(2015, 01, 30)], > > > > [ 'Release 2', 'Milestone 1', new Date(2015, 2, 01), new > Date(2015, 2, 30)], > > [ 'Release 2', 'Milestone 2', new Date(2015, 3, 01), new > Date(2015, 3, 30)], > > [ 'Release 2', 'Milestone 3', new Date(2015, 4, 01), new > Date(2015, 4, 30)], > > [ 'Release 3', 'Milestone 1', new Date(2015, 5, 01), new > Date(2015, 5, 30)], > > [ 'Release 3', 'Milestone 2', new Date(2015, 6, 01), new Date(2015, > 6, 30)], > > [ 'Release 3', 'Milestone 3', new Date(2015, 7, 01), new > Date(2015, 7, 30)]]); > > var options = { > > *colors: ['#E60000', '#0066FF', '#00CC00', '#E60000', '#FF9900', > '#00CC00', '#E60000', '#0066FF', '#0066FF '],* > > }; > > > > > > > > chart.draw(dataTable, options); > > } > > </script> > > > > <div id="example3.1" style="width: 1000px; height: 200px;"></div> > > > > > > > > > > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
