H Linear Gauge labels are unreadable

[pdezwart-rp]

Hey guys,

 

 

 

I did some searching, but being a n00b, i probably searched for all the wrong terms.

 

 

 

I have a H Linear Gauge chart, an example of which is attached. I need to make the labels legible, either by alternating putting them on top/bottom of the chart and letting them bleed out of their section a little, or put up a legend.

 

 

 

Can anyone please point me in the right direction to get this done? Again, I am n00b level and just inherited this thing and I could use all the help you are willing to provide.

 

 

 

Thanks!

[Guest Madhumita]

Hello,

Welcome to FusionCharts Forum.

Could you please attach your XML here?

Please also specify the chart widht and height you are using.

You can try accommodating the labels by adjusting the width and height of the gauge.

 

The labels are not displayed as there is not enough space within the range to display the labels.

 

You can also try using annotaions to show the labels outside the gauge to display the entire label.

ref. - http://www.fusioncharts.com/widgets/docs/Contents/Ann_Text.html

Looking forward to your reply.

 

 

 

[pdezwart-rp]

Thanks for responding!

 

 

 

As it turns out, the person before me was truncating the labels to size to prevent the attached behavior. As you can tell, the data is unfortunately illegible, bringing me back to the problem of being able to explain to people what the graph means. We are limited in space on both the X and Y axis currently, and the product manager has asked me to figure out a solution.

 

 

 

The XML is as follows:

 

 

 

   <chart 

       bgColor='FFFFFF' bgAlpha='0' showBorder='0' 

       lowerLimit='0' upperLimit='100' ticksBelowGauge='1' 

       gaugeRoundRadius='5' showGaugeLabels='1' 

       valueAbovePointer='0' showValue='0' pointerOnTop='1' pointerRadius='9'

       numberSuffix='%' decimals='0'

       majorTMNumber='12' minorTMNumber='4' 

       gaugeFillMix='{dark-10},FFFFFF,{dark-10}' gaugeFillRatio='3'

   >



   <colorRange>

<color code='FF3300' minValue='0' maxValue='34.254433868671' label="Long String Here" />

<color code='FF8800' minValue='34.254433868671' maxValue='45.848879893101' label="Long String Here" />

<color code='CC7744' minValue='45.848879893101' maxValue='53.202542774752' label="Long String Here" />

<color code='FFBB00' minValue='53.202542774752' maxValue='59.681043433745' label="Long String Here" />

<color code='CC2200' minValue='59.681043433745' maxValue='64.384731510715' label="Long String Here" />

<color code='FF3300' minValue='64.384731510715' maxValue='68.488794027884' label="Long String Here" />

<color code='FF8800' minValue='68.488794027884' maxValue='72.379464812901' label="Long String Here" />

<color code='CC7744' minValue='72.379464812901' maxValue='76.074082063551' label="Long String Here" />

<color code='FFBB00' minValue='76.074082063551' maxValue='79.402421736577' label="Long String Here" />

<color code='CC2200' minValue='79.402421736577' maxValue='82.387057595441' label="Long String Here" />

<color code='FF3300' minValue='82.387057595441' maxValue='100' label="Long String Here" />



</colorRange>



   <pointers>

<pointer radius='8' value='17.127216934336' bgColor='CCCCCC' borderColor='333333' toolText="<B>Long String Here</B>

34% of Ads Served

" />

<pointer radius='8' value='40.051656880886' bgColor='CCCCCC' borderColor='333333' toolText="<B>Long String Here</B>

12% of Ads Served

" />

<pointer radius='8' value='49.525711333926' bgColor='CCCCCC' borderColor='333333' toolText="<B>Long String Here</B>

7% of Ads Served

" />

<pointer radius='8' value='56.441793104249' bgColor='CCCCCC' borderColor='333333' toolText="<B>Long String Here</B>

6% of Ads Served

" />

<pointer radius='8' value='62.03288747223' bgColor='CCCCCC' borderColor='333333' toolText="<B>Long String Here</B>

5% of Ads Served

" />

<pointer radius='8' value='66.436762769299' bgColor='CCCCCC' borderColor='333333' toolText="<B>Long String Here</B>

4% of Ads Served

" />

<pointer radius='8' value='70.434129420392' bgColor='CCCCCC' borderColor='333333' toolText="<B>Long String Here</B>

4% of Ads Served

" />

<pointer radius='8' value='74.226773438226' bgColor='CCCCCC' borderColor='333333' toolText="<B>Long String Here</B>

4% of Ads Served

" />

<pointer radius='8' value='77.738251900064' bgColor='CCCCCC' borderColor='333333' toolText="<B>Long String Here</B>

3% of Ads Served

" />

<pointer radius='8' value='80.894739666009' bgColor='CCCCCC' borderColor='333333' toolText="<B>Long String Here</B>

3% of Ads Served

" />

<pointer radius='8' value='91.193528797721' bgColor='CCCCCC' borderColor='333333' toolText="<B>Long String Here</B>

18% of Ads Served

" />

</pointers>



   <styles>

       <definition>

           <style name='ValueFont' type='Font' bgColor='' size='10' color='FFFFFF'/>

           <style name='labelFont' type='Font' size='9' bold='1' color='000000'/>

           <style name='toolTipFont' type='font' font='Arial' size='12' color='000000' isHTML='1'/>

       </definition>

       <application>

           <apply toObject='GAUGELABELS' styles='labelFont,myShadow' />

           <apply toObject='VALUE' styles='valueFont'/>

           <apply toObject='TOOLTIP' styles='toolTipFont'/>

       </application>  

   </styles>



   </chart>

 

 

 

Is there any way someone could start me down the path of making this more legible, maybe using annotations or something?

 

 

 

 

 

Thank you,

 

Pieter

Edited December 14, 2009 by Guest

[Guest Madhumita]

Hello,

 

 

 

I'm afraid, if you have limited space for the whole chart, then annotations can also not be included in the chart. It will require more space.

 

 

 

There are only two ways of effectively showing the labels:

 

1. Increasing the height and width of the entire chart and using line-breaks within the labels to show them in multiple lines.

 

 

 

2. You can consider using the SSGrid component of FusionCharts V3 suite to effectively show the labels by not displaying them in the gauge, but associating the color ranges with the labels in the grid component.

 

ref. - http://www.fusioncharts.com/docs/?Grid_Overview.html

 

 

 

If you have further queries please revert.