Timeline charts - colors problem

[miroslav bohovic]

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

[asgallant]

Your color strings are malformed, which may be the cause of your problem.  They should look like this:

options.colors = ['#19deeb', '#1921eb', '#1921eb', '#1921eb', '#ffd708', '#ffd708', '#1921eb'];

If that doesn't fix the problem, post your whole javascript code for the Timeline and I'll see if I can figure out what else might be causing the problem.

[miroslav bohovic]

Hi,

of course the colors are correct hex code, I made a typo when writing the post. So the problem is not that. Later joined the javascript code.               

[miroslav bohovic]

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:

[asgallant]

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/

[miroslav bohovic]

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?

[asgallant]

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.

[miroslav bohovic]

Thanks,

it's ok.