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.
