Different Colors for Bars in the Same DataTable Row in a Bar Chart

[pasqual]

I am wondering if there is a way to color bars by value, preferably
using gradient logic. I am using GWT so I would prefer something
compatible (unfortunately no Image Bar Chart yet)

What I have so far renders all of the bars red like the sample.
I would like to color them varying shades based on their values
(Similar to TableColorFormat.addRange()).

Any insight is appreciated.

Thanks.

[m.zielke]

I did not try it myself yet, but the properties stroke fill and
strokeSize (Background Class) should help you achieve to paint a
gradient. See Details here: http://www.w3.org/TR/SVG/painting.html#StrokeProperties.
Also check out: http://www.w3.org/TR/SVG/painting.html#ColorInterpolationProperties

[m.zielke]

Just found this hint in the Google-Chart documentation
http://code.google.com/apis/chart/colors.html#linear_gradient that
should do the trick nicely

On Jan 2, 8:14 am, pasqual <hes...@gmail.com> wrote:

[pasqual]

Thanks for the assistance, I did find a solution and the page about
Colors was insightful.

I should have used a different word than 'gradient'. I created the
effect on individual bars instead of BG color.

The individual bars are solid colors, and the 'gradient' effect is
spread across bars based on the y-value (height):
___
| | ___
| | | | ___
| | | | | | ___
| | | | | | | |
yellow orange red dark red

From the colors page, I was trying to get around this:
--"In the following chart, the third data set, Bar, is drawn in
the first color. If only one color is specified, all data sets use
that color."
-- http://code.google.com/apis/chart/colors.html#chart_colors

So I added a dataset for each color of bar:

for (int k=0; k<intensityHexColors.length; k++){
double n1 = k * MAX_VALUE/intensityHexColors.length;
double n2 = (k + 1) * MAX_VALUE/intensityHexColors.length - .001;
NumberFormat nf = NumberFormat.getFormat("#.##");
data.addColumn(ColumnType.NUMBER, nf.format(n1) + " - " +
nf.format(n2));
}

Then when I add data, I add it top the appropriate dataset, based on
the y-value:

int intensityIdx = getIntensityHexIndex(val);
data.setValue(month, intensityIdx, val);

And this part is important for display - I changed the chart to
stacked, so zero values are invisible.

options.setStacked(true);

Otherwise the zero y-values will still take up width, and make the
other bars too skinny.

Good luck to anyone else trying to achieve the same result and feel
free to add further solutions.

[pasqual]

Also out of curiosity: Do elements like bars in a BarChart or the
spans in a Gauge get style names associated with them so I can control
them? If so where is the reference on this?

That would be handy.

On Jan 2, 3:58 pm, pasqual <hes...@gmail.com> wrote:
> Thanks for the assistance, I did find a solution and the page about
> Colors was insightful.
>
> I should have used a different word than 'gradient'.  I created the
> effect on individual bars instead of BG color.
>
> The individual bars are solid colors, and the 'gradient' effect is
> spread across bars based on the y-value (height):
> ___
> |    |      ___
> |    |      |    |      ___
> |    |      |    |      |    |      ___
> |    |      |    |      |    |      |    |
> yellow  orange   red      dark red
>
> From the colors page, I was trying to get around this:
>      --"In the following chart, the third data set, Bar, is drawn in
> the first color. If only one color is specified, all data sets use
> that color."

>      --http://code.google.com/apis/chart/colors.html#chart_colors

[VizGuy]

Some of the visualizations use CSS, but some do not (some of them are Flash based, images, and other non-pure-html technologies).
In addition, playing with CSS classes is a tough game, as the order and priorities are very browser dependent (and hard to understand even for a single browser).
For that reason, we try to expose these settings as configuration options, in a standard way for all visualizations.
While not implemented for all options and for all visualizations, we are gradually adding these options to more and more of them. This way it will be much simpler (and working) to configure all of the visualizations.

Regards,
VizGuy

[m.zielke]

Ah now I see what you meant, clever code,

I am more on the php side thus I did test some php script to achive
different colored base bars based on trigger values and came up with
this example:

Let us load the data string which builds the bars chd URL parameter
into one array.

$data1 = array(10,50,60,80,40);

As we want some stacked bars where each bar has two sets of values,
create an array for each,
one for the lower and one for the upper the upper set.

$data2 = array(50,60,100,40,20);

Let us build an array for the base color and set a trigger value.
$color1 = array();
$trigger = 50;

Use the arrays to build the string parsed for the bar values:

foreach($data1 as $value)

Than checked each array value and based on a trigger e color values
can be calculated
if ($value < $trigger )
{
$color = "FF0000";
}
else
{
$color = "FFC000";
}
Than load the calculated value into the color array:

$color1[] = $color;

Though I would have liked XML style data parsing much better but let
us face the facts,
the API does not use XML we need to build some "," separated listing
of values as a string:

$valuestringA = $valuestringA.$value."," ;

Ups the last one will be a "," , The API does not expect this so we
need to get rid of it, delete the last sign of the string:

$valuesA = substr($valuestringA, 0, -1);

Now let us get the second data set same method as above:

foreach($data2 AS $value)
{
$valuestringB = $valuestringB.$value."," ;
}
$valuesB = substr($valuestringB, 0, -1);

Ok now let us put both together to form the chd string expected

$chd = $valuesA ."|".$valuesB ;

Ok last part let us build the color value URL param string and parse
it into the $chco variable:

foreach($color1 AS $colorstring)
{
$colorstringA = $colorstringA.$colorstring."|" ;
}
$chco = substr($colorstringA, 0, -1);

And now let us work the embedded code:

<img src="http://chart.apis.google.com/chart?
cht=bhs
&amp;chs=200x125
&amp;chd=t:<?php echo $chd ?>
&amp;chco=<?php echo $chco ?>,FFC00059
&amp;chbh=20"
alt="Horizontal bar chart with two data sets: and lower set 2 colored
based on min value">
<br>

Sure that can be build into a function but I just needed a proof of
concept.