Ugh...the coloring system on the Timelines is in desperate need of fixing. It turns out that the bars won't be colored correctly if you have too few colors in the array. You have 6 unique labels and only 5 colors in the array; add a 6th color and it works: http://jsfiddle.net/asgallant/pMXXc/3/. You can have more colors in the array than are required for the chart, but if you have less, it seems to use only the first color.
On Wednesday, October 23, 2013 6:16:05 PM UTC-4, miroslav bohovic wrote: > > Thank you for your response. It works but only for a short title bar. In > the example as shown on the picture it does not work. The colors are set as > follows: > > http://jsfiddle.net/pMXXc/2/ > > Where is problem? > > > On Wednesday, October 23, 2013 4:33:16 PM UTC+2, asgallant wrote: >> >> The API is assigning colors to bars according to their labels, so all >> bars with the same label get the same color. Colors are assigned to bars >> in order of the DataTable rows, so in your example, you want the colors >> option to be: >> >> colors: ["#19deeb","#1921eb","#ffd708"] >> >> see example based on your code here: >> http://jsfiddle.net/asgallant/pMXXc/1/ >> >> On Wednesday, October 23, 2013 2:01:47 AM UTC-4, miroslav bohovic wrote: >>> >>> Hi, >>> >>> this is all code for timeline charts with colors problem. Where is >>> problem? Thanks >>> >>> var dataTable = {"cols":[ >>> {"id":null,"label":"Title graph","type":"string"}, >>> {"id":null,"label":"Description","type":"string"}, >>> {"id":null,"label":"Start","type":"date"}, >>> {"id":null,"label":"End","type":"date"} >>> ], >>> "rows":[ >>> {"c":[{"v":"Event1"},{"v":"#19deeb"},{"v":new >>> Date(2013,10,21,20,50,0)},{"v":new Date(2013,10,22,20,10,0)}]}, >>> {"c":[{"v":"Event1"},{"v":"#1921eb"},{"v":new >>> Date(2013,10,21,20,45,0)},{"v":new Date(2013,10,22,20,50,0)}]}, >>> {"c":[{"v":"Event2"},{"v":"#1921eb"},{"v":new >>> Date(2013,10,21,20,0,0)},{"v":new Date(2013,10,23,20,10,0)}]}, >>> {"c":[{"v":"Event2"},{"v":"#1921eb"},{"v":new >>> Date(2013,10,21,20,20,0)},{"v":new Date(2013,10,22,20,30,0)}]}, >>> {"c":[{"v":"Event2"},{"v":"#ffd708"},{"v":new >>> Date(2013,10,23,21,15,0)},{"v":new Date(2013,10,24,20,0,0)}]}, >>> {"c":[{"v":"Event3"},{"v":"#ffd708"},{"v":new >>> Date(2013,10,21,20,30,0)},{"v":new Date(2013,10,21,22,25,0)}]}, >>> {"c":[{"v":"Event3"},{"v":"#1921eb"},{"v":new >>> Date(2013,10,22,18,10,0)},{"v":new Date(2013,10,23,20,0,0)}]} >>> ]}; >>> var options = { >>> title: "Graph", >>> width: 940, >>> height: 600, >>> colors: >>> ["#19deeb","#1921eb","#1921eb","#1921eb","#ffd708","#ffd708","#1921eb"] >>> } >>> // Create the data table. >>> var data = new google.visualization.DataTable(dataTable); >>> // Instantiate and draw our chart, passing in some >>> options. >>> var chart = new google.visualization.Timeline(elm); >>> >>> chart.draw(data, options); >>> >>> >>> On Tuesday, October 22, 2013 3:24:50 PM UTC+2, miroslav bohovic wrote: >>>> >>>> I have a problem when defining colors for timeline charts. >>>> example looks like this: >>>> >>>> options.colors = ["19deeb #", "# 1921eb", "# 1921eb", "# 1921eb", "# >>>> ffd708", "# ffd708", "# 1921eb ']; >>>> >>>> There are seven items for display but the colors assigned see >>>> attachment. >>>> >>>> Can you advise me? thank you >>>> >>> -- 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/groups/opt_out.
