Hi Nick,
You can still style unnamed elements in a couple different ways. If you
want to set the background color to transparent for *every* div under your
#chart_div, do:
#chart_div div {
background-color: transparent;
}
And if you want to specify the background image for just the top level div
under #chart_div, do:
#chart_div > div {
background-image: url(watermark.png)
}
But you might as well assign it to your #chart_div since it will be at the
same location. Be aware that the implementation of charts can change in
ways that might break your assumptions, though we try to avoid it unless
necessary.
Hope that helps.
On Tue, Jan 27, 2015 at 5:26 PM, <[email protected]> wrote:
> I'm building a commercial application utilising Google visualisations and
> I need to be able to place a branded logo or text box containing a URL for
> the site inside the Google charts that appear on the site, in particular
> Annotation Charts. I've done a little searching on these forums, and found
> a suggestion that the solution was to make the chart background
> transparent, and then place the logo or text box behind the chart using
> some CSS code.
> So I tried this using an Annotation Chart, by including
>
> 'chart': {
> 'chartArea': {'backgroundColor': 'transparent'},
> }
> in the options field.
>
> Then I worked with a developer who tried assigning a watermark image to
> three levels of <div> but his efforts were thwarted because the ultimate,
> topmost <div> is under the
> control of the Google Chart core code and doesn't have a named ID or Class
> that we can assign the background to.
> He wrote the following CSS in Wordpress:
>
> .watermark, #chart_div_AnnotationChart_containerTable,
> #chart_div_AnnotationChart_chartContainer
> {
> background-image:
> url(w
> <http://nickdunbar.net/wp-content/uploads/2015/01/Nick_Dunbar_watermark.png>atermark
> image URL);
> background-repeat:no-repeat;
> background-position: center center;
> }
>
> Unfortunately, this doesn't seem to work. The logo image appears
> momentarily behind the Annotation Chart and then disappears as the chart
> finishes rendering. The "watermark" class we assigned to the outermost
> div; the two following IDs "chart_div_AnnotationChart_containerTable" and
> "chart_div_AnnotationChart_chartContainer"
> are the innermost <div>s that we have named access to.
>
> From looking the API terms and conditions (
> https://developers.google.com/terms/) I can't see any obvious reason why
> including branding Google API charts wouldn't be allowed, and if it is
> permitted, it isn't in the nature of Google to quietly make something
> difficult for developers without giving a reason.
>
> So could someone explain how to include a logo or text behind an
> Annotation Chart? An actual code example rather than a one-line suggestion
> is preferred.
>
> Thank you,
> Nick
>
> --
> 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 [email protected].
> To post to this group, send email to
> [email protected].
> Visit this group at
> http://groups.google.com/group/google-visualization-api.
> For more options, visit https://groups.google.com/d/optout.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> -
978-394-1058
[email protected] <[email protected]> 5CC, Cambridge MA
[email protected] <[email protected]> 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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
