Angular Gauge Customization help

[fq]

I am trying to customize an angular chart. I made the background black but then how do I make the color of the text on the dial to white?

 

 

 

This is my xml

 

 

 

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

 

 

minorTMNumber="10" minorTMColor="FFFFFF" minorTMHeight="3" pivotRadius="3" pivotBgColor="FFFFFF" pivotBorderColor="FFFFFF"

 

hoverCapBorderColor="FFFFFF" hoverCapBgColor="DDDDDD" majorTMThickness="2" gaugeInnerRadius="55" gaugeOuterRadius="55"

 

gaugeAlpha="70" gaugeStartAngle="150" gaugeScaleAngle="120" gaugeOriginX="70" gaugeOriginY="75" displayValueDistance="12"

 

tickMarkDecimalPrecision="0" numberSuffix="%25" decimalPrecision="0" placeValuesInside="2">

 

 

 

 

 

 

 

You can view the chart here http://develop.kmsi.us/dotnet/application/FusionCharts/dm.htm

 

Its on the top left corner (the first one is real and the rest are just images). In the chart the dial text is missing because I can't change its color to white.

 

 

 

PS: If you quote this message you can see the full xml. I think it's blocked.

Edited April 21, 2010 by Guest

[Guest Basundhara Ghosal]

Hi,

Please try using 'Styles' on the 'value' object using the 'font' attribute.

Ref.- <styles>

<definition>

<style name='myLabelsFont' type='font' font='Arial' size='14' color='666666' bold='1' underline='1'/>

</definition>

<application>

<apply toObject='Value' styles='myLabelsFont' />

</application>

</styles>

Also, please refer to the link below for further details on the same:-

Ref.- http://www.fusioncharts.com/widgets/docs/Contents/Ang_Style.html

http://www.fusioncharts.com/widgets/docs/Contents/Ang_XML.html

Hope this helps.

[fq]

It didn't work. It's still the same. http://develop.kmsi.us/dotnet/application/FusionCharts/dm.htm

 

 

 

I made the background to white and I saw the scale values in black. So i guess it didn't work. Also if I am not clear I am trying to get the 0%, 50%, 100% visible on the scale. The "value" is already visible on hover.

 

 

 

Here is my xml now

 

 

 

<Chart bgcolor="000000" lowerLimit="0" upperLimit="100" majorTMNumber="3" majorTMColor="FFFFFF" majorTMHeight="7"

 

minorTMNumber="10" minorTMColor="FFFFFF" minorTMHeight="3" pivotRadius="3" pivotBgColor="FFFFFF" pivotBorderColor="FFFFFF"

 

hoverCapBorderColor="FFFFFF" hoverCapBgColor="FFFFFF" majorTMThickness="2" gaugeInnerRadius="55" gaugeOuterRadius="55"

 

gaugeAlpha="70" gaugeStartAngle="150" gaugeScaleAngle="120" gaugeOriginX="70" gaugeOriginY="75" displayValueDistance="12"

 

tickMarkDecimalPrecision="0" numberSuffix="%25" decimalPrecision="0" placeValuesInside="2">

 

<dials>

 

<dial value="65" borderColor="FFFFFF" borderAlpha="20" bgColor="FFFFFF" baseWidth="3" topWidth="1" />

 

</dials>

 

<styles>

 

<definition>

 

<style name='myLabelsFont' type='font' font='Arial' size='14' color='FFFFFF' bold='1'/>

 

</definition>

 

<application>

 

<apply toObject='value' styles='myLabelsFont' />

 

</application>

 

</styles>

 

</Chart>

Edited April 22, 2010 by Guest

[Guest Basundhara Ghosal]

Hi,

In case you wish to customize the color of the TickMark values of the chart, please try applying the "Styles" on the "TICKVALUES" object using 'font' attribute.

Ref.- http://www.fusioncharts.com/widgets/docs/Contents/Ang_XML.html

 http://www.fusioncharts.com/widgets/docs/Contents/Ang_Style.html

Hope this helps.

[fq]

Still waiting for a reply.

[Guest Basundhara Ghosal]

Hi,

Could you please send us the whole XML codes that you are using to render the chart?

Awaiting your reply.

[fq]

Still waiting for a reply

[Guest Basundhara Ghosal]

Hi,

We have edited your XML codes and then have been able to render the chart as per your requirement(background color as black and the font color of the Dial Value as white).

Please refer to the XML file that we are sending you as an attachment.

Also, in case you wish, not to display the Tickvalue on the chart, please try setting the attribute "showTickValues" in the <chart> element to '0'.

Hope this helps.

new 2.zip

[Guest Basundhara Ghosal]

Hi,

Please refer to the sample that we are sending you as an attachment.

Hope this helps.

Copy (3) of angular gauge.zip

[Madhu]

Hey,

 

 

 

You can apply the Styles functionality on TICKVALUES object. Apply the font style on it....you will then be able to change the scale values to white.

[Guest Basundhara Ghosal]

Hi Madhu,

Thanks for the idea.

As you can check in our previous post, we have already created a sample using 'Styles'.

In case you wish to apply the same, please refer to the sample.

Keep smiling and keep FusionCharting.

[FusionCharts Support]

Hi,

 

 

 

Alternatively, you can set baseFontColor='ffffff' toolTipBgColor='333333' and add wow to the tooltips too.