Gauge background color

[Mingfei Bi]

Hey Guys,
Quick question, do you know any configuration to change gauge chart background.
I just read a old post to say


 $('ellipse[hoge]').attr('fill'

, '#HEXCOLOR');

I am not quite know about jQuery.

could you guys give a me detail code to say a gauge chart background color is red. thanks.

[asgallant]

Here's an example: http://jsfiddle.net/asgallant/7CGhJ/ (example works in all browsers except IE 8 and older; you need a separate code path to handle those if you need to support them).  To make it work on your local web page, you need to either have a local copy or a link to a CDN of jQuery.  If you don't want to use jQuery, it can be written with other frameworks or with plain javascript - jQuery just makes the code easier to write.

[Mingfei Bi]

Asgallant, thank you so much, actually I want to the white part to be red not the background of the gauge itself.

When you have time could you just so me this part too. Thanks again.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/BVHDs_rDfbE/unsubscribe.
To unsubscribe from this group and all its topics, 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/groups/opt_out.
 
 

[asgallant]

Like this?  http://jsfiddle.net/asgallant/7CGhJ/2/

That just requires CSS to change the background color of the div (or the page or some other higher-level element).

On Friday, June 21, 2013 2:07:21 PM UTC-4, Mingfei Bi wrote:

Asgallant, thank you so much, actually I want to the white part to be red not the background of the gauge itself.

When you have time could you just so me this part too. Thanks again.

On Fri, Jun 21, 2013 at 1:35 PM, asgallant <drew_g...@abtassoc.com> wrote:

Here's an example: http://jsfiddle.net/asgallant/7CGhJ/ (example works in all browsers except IE 8 and older; you need a separate code path to handle those if you need to support them).  To make it work on your local web page, you need to either have a local copy or a link to a CDN of jQuery.  If you don't want to use jQuery, it can be written with other frameworks or with plain javascript - jQuery just makes the code easier to write.

On Friday, June 21, 2013 12:11:03 PM UTC-4, Mingfei Bi wrote:

Hey Guys,
Quick question, do you know any configuration to change gauge chart background.
I just read a old post to say


 $('ellipse[hoge]').attr('fill'

, '#HEXCOLOR');

I am not quite know about jQuery.

could you guys give a me detail code to say a gauge chart background color is red. thanks.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/BVHDs_rDfbE/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Mingfei Bi]

cool, yes. you are awesome :) Thanks.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Mingfei Bi]

and I am not sure why when i use css and <div id="chart_div_main" class='chartDiv' ></div> it dose not work.

div.chartDiv {
    background-color: #FF0000;
}

[asgallant]

It works fine when I use that: http://jsfiddle.net/asgallant/7CGhJ/3/

Like this?  http://jsfiddle.net/asgallant/7CGhJ/2/

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@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/groups/opt_out.
 
 

[Mingfei Bi]

I attach my chart, this is what I have but I am not sure why.btw my default background is the kind of green. so it should be white in normal browser.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

What browser are you viewing that in?  I would expect that in IE 8 or older, as the charts are drawn in VML there, which doesn't support transparency.

[Mingfei Bi]

I am using IE 9.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

I can't duplicate the problem in IE 9.  I suspect you have some CSS on your site that is causing the problem.  Check for background color's being assigned to <table>, <tr>, and <td> elements, as the gauges are drawn inside a table to handle the layout.

[Gustavo L. Moraes]

I have the same problem!

:(

[scottyfrog]

The comment above about looking for CSS on <table> elements allowed me to solve the problem. I had <tr> coloring in my CSS for the whole site, thus I needed to create a new rule within the #chart_div CSS to not color <tr>. Now my #chart-div background-color works fine.  Thanks

[Ram15]

I want to show a particular circle with red background and the others remain in white. Could you guys help me out. Thanks in advance!!