Transparant background (Interactive Charts)

[rein]

Dear Google Charts users,

I trying to get a transparent background on my Google pie chart.
Someone posted a solution for the image charts:
http://alblue.bandlem.com/2007/12/use-transparent-backgrounds-in-google.html,
but i can't find a solution for the Interactive Charts (using
javascript).

Anyone knows what is have to define at backgroundColor? I tried
backgroundColor:'transparent' and backgroundColor:'none' but that does
not work..

Thanks for your time!

Regards,
Rein

[Jinji]

We are thinking about adding such capability, but this not supported now, sorry.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Jré]

Setting backgroundColor: 'transparent' worked for me but only in
Firefox.
It shows as a black background in all other browsers :(

Cheers,
Jré

On Aug 2, 12:11 am, rein <i...@reinaris.nl> wrote:
> Dear Google Charts users,
>

> I trying to get atransparentbackground on my Google pie chart.
> Someone posted a solution for the image charts:http://alblue.bandlem.com/2007/12/use-transparent-backgrounds-in-goog...,

[ChartMan]

I will record this bug.

Thanks

ChartMan

[Jré Sarenac]

I got it to work by using: backgroundColor: {stroke:null, fill:null, strokeSize: 0}
Although this was only possible thanks to an example I saw as I did not know I could edit specifics of the backgroundColor.
Where can I find detailed information on the properties of vis charts?  I.e where can I find out that the backgroundColor has additional properties of: stroke, fill, strokeSize?

Thanks!
Jré

[Jré Sarenac]

A correction to my previous post:
This method still doesn't work for Internet Explorer.  It works in Firefox, Safari and Chrome.

Cheers,
Jré

[ChartMan]

The corechart package currently does not support the extended color objects {stroke:,fill: strokeSize:}.

If this is a necessary feature for you please revert to the old version of the charts - http://code.google.com/apis/visualization/documentation/gallery/linechart_old.html#backgroundColor

ChartMan

[asgallant]

There are three style classes you have to change to make the background color change:

google-visualization-table-table

google-visualization-table-tr-head

google-visualization-table-tr

and if using alternating rows: 

google-visualization-table-tr-even

google-visualization-table-tr-odd 

and maybe these too, but I'm not sure:

google-visualization-table-th

google-visualization-table-td

You can also set the cssClassNames option to change the class names applied for most of these so the default styles won't be applied.

Set  "background-color: transparent;" for each of these classes and it should work.

On Monday, July 2, 2012 11:42:13 AM UTC-4, Bernardo Martínez wrote:

Have anyone figured this out? cause its been 2 years now and i cant find clear information on how to get transparent background on a table chart.

Thanks for any reply

ChartMan

ChartMan

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

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

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

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

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

[Bernardo Martínez]

Ok, i did two tests:

1. Changing the respective tr-head, tr, tr-even and tr-odd classes, in the cssClassNames to transparent background, but since also the table has by default a white background, it still doesnt work.

2. In my css y add the class  google-visualization-table-table , and set it to background:transparent, but the javascript loaded from google changes it to the default white.

Hope I explian myself right, since i dont speak english

Thanks for your support asgallant

[asgallant]

Try this:

#myTable table.google-visualization-table-table,

#myTable .google-visualization-table-tr-head,

#myTable .google-visualization-table-tr-over,

#myTable .google-visualization-table-tr,

#myTable .google-visualization-table-tr-head td,

#myTable .google-visualization-table-tr-over td,

#myTable .google-visualization-table-tr td {
    background-color: transparent;
} 

where "myTable" is the id of the table div.

[Bernardo Martínez]

that was really helpful, thanks a lot asgallant!!

[Maicol - MasterNet]

Hello everyone, to change a charts background color to transparency, you only need create a style css with:

<style>

rect{

fill:none;

}

</style>

[Sergey Grabkovsky]

I would not recommend this method, as it will make all the legend item rectangles transparent. The backgroundColor option is the correct thing to use. You should be able to set it to either 'none' or 'transparent'. Here is a jsfiddle example of doing this: http://jsfiddle.net/xwsp8gkz/

This option should work for all core charts.

--

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.