Hi Nick, Here is an example of putting a background image behind the whole chart that works for me at least in Chrome: http://jsfiddle.net/dlaliberte/mkxsf680/ Most charts will be easier than the AnnotationChart since that one uses lots of HTML to layout the components, and each component requires some variations in how the overriding is done.
On Fri, Jan 30, 2015 at 8:12 AM, <[email protected]> wrote: > Hi Dan, > > Thanks for this suggestion. We tried this but still couldn't get things to > work. Our guess is that something that renders your API is overriding the > CSS instructions - in some browsers the logo appears momentarily and > disappears as the chart finishes rendering (Firefox) or once you mouse over > it (IE10). > > I imagine this not being a high priority for you but if there was any > working jsfiddle example where the CSS let you show a background image or > text beneath the Google chart that would be great. It doesn't have to be an > annotation chart - any example that showed proof of concept would be fine. > > Nick > > > On Thursday, January 29, 2015 at 2:43:31 PM UTC, Daniel LaLiberte wrote: >> >> 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] 5CC, Cambridge MA >> [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. > -- 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.
