Jody

Angular Gauge Displays Wrong Colors On Color Range

Recommended Posts

I have an issue rendering a simple angular gauge.

 

The xml is as follows:

 

<chart caption=\"Average Performance\" subCaption=\"50 Percent\" lowerLimit=\"0\" upperLimit=\"100\" lowerLimitDisplay=\"Epic Fail\" upperLimitDisplay=\"WIN\" gaugeStartAngle=\"180\" gaugeEndAngle=\"20\" numberSuffix=\"%\" showValue=\"1\"><colorRange><color minValue=\"0\" maxValue=\"50\" color=\"ed2323\" /><color minValue=\"50\" maxValue=\"85\" color=\"ff9900\" /><color minValue=\"85\" maxValue=\"100\" color=\"00ff09\" /></colorRange><dials><dial value=\"50\" /></dials></chart>

 

The expected display of this chart is simply, a left to right curve with:

Red 0-50%,

Amber 50-85%

Green 85-100%.

Value: 50%.

 

When this chart is rendered, depending on the render mode and the browser the color range will render incorrectly for me.

 

IE8 Javascript Rendering: OK.

 

IE8 Flash Rendering, IE9, Chrome, Firefox: Scale correct, but colors in color range are back to front:

 

Green 0-50%

Amber: 50-85%

Red: 85-100%

 

 

Have I done something stupid? The angular gauge will only render correctly in IE8 Javascript mode.

Edited by Jody

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

With regard to your query, could you please try once again by providing the Hex color codes to the attribute "code" instead of "color" in the <color> element of your XML string?

 

Ref. Code:

<colorRange>
 <color minValue="0" maxValue="50" code="ED2323" />
 <color minValue="50" maxValue="85" code="FF9900" />
 <color minValue="85" maxValue="100" code="00FF09" />
</colorRange>

 

Hope this helps !

Share this post


Link to post
Share on other sites

Hi,

 

With regard to your query, could you please try once again by providing the Hex color codes to the attribute "code" instead of "color" in the <color> element of your XML string?

 

Ref. Code:

<colorRange>
 <color minValue="0" maxValue="50" code="ED2323" />
 <color minValue="50" maxValue="85" code="FF9900" />
 <color minValue="85" maxValue="100" code="00FF09" />
</colorRange>

 

Hope this helps !

 

 

 

That, my friend, is a great spot.

 

I'll make the change tonight, thanks!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now