Multiple Table formatters override

[sanj]

I am facing issues while implementing multiple formaters on the table
chart in the example
http://code.google.com/apis/ajax/playground/?type=visualization#color_formatter

In my sample code listed below, It seems like the "formatter1"
overrides "formatter"
as the text color is no longer white or red or even black but its all
blue because of the hyperlink.

var formatter = new google.visualization.TableColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

var formatter1 = new google.visualization.PatternFormat('<a
href="{0}">{1}</a>');
formatter1.format(data, [0,1],1);

You may copy this code above at line number line#23 of
http://code.google.com/apis/ajax/playground/?type=visualization#color_formatter
and try to run it in playground to see the result that I see.

What do I need to do in order to retain the text color that I want
from "formatter"

[asgallant]

First off, tableColorFormat is deprecated; use ColorFormat instead.  Second, the problem is a CSS issue: by default, links don't inherit the color of their parent containers, so you have to make them.  Add this as a style to the playground, and the colors will work properly:

#visualization a {
  color: inherit;

} 

Maybe this is something the Viz team should look into offering an option for, but for now the CSS should do the trick.

[sanj]

Thank you so much.
It works absolutely fine now.
Is there a place (a link maybe) I can read more on this CSS tweaks for
visualization?

Sanj.

On Mar 30, 7:49 am, asgallant <drew_gall...@abtassoc.com> wrote:
> First off, tableColorFormat is deprecated; use ColorFormat instead.
>  Second, the problem is a CSS issue: by default, links don't inherit the
> color of their parent containers, so you have to make them.  Add this as a
> style to the playground, and the colors will work properly:
>
> #visualization a {
>   color: inherit;
>
> }
>
> Maybe this is something the Viz team should look into offering an option
> for, but for now the CSS should do the trick.
>
>
>
>
>
>
>
> On Thursday, March 29, 2012 9:54:19 PM UTC-4, sanj wrote:
>
> > I am facing issues while  implementing multiple formaters on the table
> > chart in the example
>

> >http://code.google.com/apis/ajax/playground/?type=visualization#color...

>
> > In my sample code listed below, It seems like the "formatter1"
> > overrides "formatter"
> > as the text color is no longer white or red or even black but its all
> > blue because of the hyperlink.
>
> >   var formatter = new google.visualization.TableColorFormat();
> >   formatter.addRange(-20000, 0, 'white', 'orange');
> >   formatter.addRange(20000, null, 'red', '#33ff33');
> >   formatter.format(data, 1); // Apply formatter to second column
>
> >   var formatter1 = new google.visualization.PatternFormat('<a
> > href="{0}">{1}</a>');
> >   formatter1.format(data, [0,1],1);
>
> > You may copy this code above at line number line#23 of
>

> >http://code.google.com/apis/ajax/playground/?type=visualization#color...

[asgallant]

I don't think there is any where specific that covers CSS tweaks - most of the charts are built in iFrames by default, so CSS in the main page would not have any effect on them.  Tables are just standard HTML, though, so you can apply normal CSS to them.  Tables support assigning classes or custom styles to cells (via the DataTable#setProperties method, see http://code.google.com/apis/chart/interactive/docs/gallery/table.html#customproperties) and you can assign class names to other table elements via the cssClassNames option.