colors option for timeline charts

[rashmani]

Hi there,

I have a problem with custom coloring each bar in a timeline chart.
I'm building two arrays in PHP like this, for column (bar) values and bar colors:
            // holds column headers and values
            $tl_series[] = array(
                array('type'=>'string', 'id'=>'Date'),
                array('type'=>'string', 'id'=>'Value'),
                array('type'=>'date', 'id'=>'Start'),
                array('type'=>'date', 'id'=>'End'),
                );
            // holds bar colors
            $tlc_series = array();

Then I'm adding value columns like this:
            foreach ($timeline as $tl_date) {
                ....
                $tl_series[] = array($tl_label, $value, $startdate, $enddate);
                $tlc_series[] = <customized_color_hex_value>;
            }

The column values array is then json encoded and passed to a scripted javascript function that builds the chart, like this:
            function drawChart' . $chart_id . '() {
                var data = google.visualization.arrayToDataTable(' . CJavaScript::jsonEncode($tl_series) . ');
            ...

Finally, I use the $tlc_series colors array as value for timeline's colors option:
            ...
            'colors' => CJavaScript::jsonEncode($tlc_series),
            ...

I have varying number of values, from 2 up to 40, grouped by label and distributed between two dates (for those wondering, if any, I'm using YII to programmatically get data from MYSQL and draw charts).

Obviously if I have N values, $tl_series will have N+1 elements while tlc_series color array will have N elements.
In my thinking, element $tlc_series[0] should hold color for element $tl_series[1].
But I'm wrong: not even a simple two values array looks fine.
What should I do? I tried adding a dummy first element to colors array, without success.
Is the value array somehow reordered when passed to arrayToDataTable or to the chart?
How can I keep value and color arrays synchronized?

Thanks for any suggestion or idea,
rash*

[rashmani]

Uhm, maybe this was a bit too long-winded...
In case, I could rephrase it simpler like this: if I line up in two arrays values and colors for a timeline chart, in synchronized order, why my timeline bars do not use the color they're supposed to? Is the values array passed to the timeline re-sorted somehow before displaying it?

Cheers,
rash*

[Daniel LaLiberte]

Filippo, there is a bug in the timeline chart which is fixed in 1.1.  If you use google.load('visualization', '1.1', ....) you should see all the colors used.

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[rashmani]

Hi Daniel,

yep, I *do* load version 1.1 already... still colors appear not to respect my order... :-(

rash*

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[Daniel LaLiberte]

The colors of items in the timeline chart may not be as predictable as you want  but you could instead add a 'style' role column so you could associate each item with the color you want.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--

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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[PippoNippo]

Ciao Daniel,

thanks, I'll dig that and let you know.

Thanks again,
rash*

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/ecqI-mvlO1E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[rashmani]

Cool! It works a treat!

Thanks a lot!
rash*

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/ecqI-mvlO1E/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

[Scott Kostojohn]

Rashmani - 

Would you mind posting a sample of your working code?  I am struggling with this as well.  I tried using the colors array, and I tried creating the datatable by passing in JSON with the color specified for each cell, and I can't get either of them working.

Thanks for the help!

Scott

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/ecqI-mvlO1E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[rashmani]

Hi Scott,

been offline a few days, so apologizes pfr replying that late.
Here we go.
In my code I build an array like this

            // init timeline chart arrays
            $tl_series = array();
            //$tlc_series = array();

            $tl_series[] = array(
                array('type'=>'string', 'id'=>'Date'),

                array('type'=>'string', 'id'=>'Pax'),
                array('type'=>'string', 'role' => 'tooltip', 'p' => array('html' => true)),
                array('type'=>'string', 'role' => 'style'),

                array('type'=>'date', 'id'=>'Start'),
                array('type'=>'date', 'id'=>'End'),
                );

Then I loop over a daterange, and for each date which needs an entry, i set an array element like this:

                    foreach ($timeline as $tl_date) {
                            ...

                            $strcolor = 'color: '.$this->getColorForValue($bookedthatday);
                            $tl_series[] = array($tl_label, (string)$bookedthatday, $tooltip, $strcolor, $tl_date, $tl_date);
                            ...
                            }

My function $this->getColorForValue($bookedthatday) returns a string like "#006600", "#9a9f9b", and so on.

In my view, I use a very simple Timeline chart (pls note: this is YII code...):

        $this->widget('yiiwheels.widgets.google.WhVisualizationChart', array(
            'visualization' => 'Timeline',
            'data' => $tl_series,
            'options' => array(
                'tooltip' => array(
                    'isHtml' => true,
                    ),
                //'title' => ' ',
                'height' =>'600',
                )
            ));

Hope this helps!
rash*

[rashmani]

Hi Scott, was this of any help?

rash*

[Forumer]

Was there a final resolution to this? I'd appreciate a solution to be able to customize color for each cell in a Timeline chart.  Thanks

[Sergey Grabkovsky]

You can customize the color for each cell by using the style role. Here's an example: https://jsfiddle.net/9k76g85t/

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/33895f1a-9606-4bca-8ea7-d3fc9966782d%40googlegroups.com.

[Forumer]

I was working on this fiddle: http://jsfiddle.net/TimunAb/0zdjx1Ls/

What you provided is even better ... and cleaner.

Thank you!

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

[Santiago Galindo]

You find the solution?

I have the same problem