Question

Hi i am using the following example to construct the angular gauge fusion widget, but i am not finding a option to decrease the height and width of the widget.Can i know is their any option to resize the angular widget.

http://www.fusioncharts.com/widgets/Gallery/Angular15.html

Answer 1

The gauge is built using various elements which are placed using pixel values based on the width of 300 and height of 300. You can make these elements scale automatically using the Auto Scale feature of the gauge.

Please use origW='300' origH='300' autoScale='1' in <chart> and <annotations> element before you try to decrease the width and height of the gauge.

NOTE: You should always increase or decrease the size of the gauge using the original ratio of width and height (which is 300:300 i.e., 1:1 in this case)

So, using the auto scale you can safely use 200x200px or 400x400px.

<chart origW='300' origH='300' autoScale='1' bgColor='FFFFFF' upperLimit='100' lowerLimit='0' baseFontColor='FFFFFF' majorTMNumber='11' majorTMColor='FFFFFF'  majorTMHeight='8' minorTMNumber='5' minorTMColor='FFFFFF' minorTMHeight='3' toolTipBorderColor='FFFFFF' toolTipBgColor='333333' gaugeOuterRadius='100' gaugeOriginX='150' gaugeOriginY='150' gaugeScaleAngle='270' placeValuesInside='1' gaugeInnerRadius='80%25' annRenderDelay='0' gaugeFillMix='' pivotRadius='10' showPivotBorder='0' pivotFillMix='{CCCCCC},{333333}' pivotFillRatio='50,50' showShadow='0' >
<colorRange>    

    <color minValue='0' maxValue='50' code='C1E1C1' alpha='40'/>    

    <color minValue='50' maxValue='85' code='F6F164' alpha='40'/>

    <color minValue='85' maxValue='120' code='F70118' alpha='40'/>

</colorRange> 

<dials>     

    <dial value='65' borderColor='FFFFFF' bgColor='000000,CCCCCC,000000' borderAlpha='0' baseWidth='10'/>

</dials>    

<annotations origW='300' origH='300' autoScale='1'>

    <annotationGroup xPos='150' yPos='150' showBelow='1'>       

        <annotation type='circle' xPos='0' yPos='0' radius='145' startAngle='0' endAngle='360' fillColor='CCCCCC,111111'  fillPattern='linear' fillAlpha='100,100'  fillRatio='50,50' fillAngle='-45'/>

        <annotation type='circle' xPos='0' yPos='0' radius='120' startAngle='0' endAngle='360' fillColor='111111,cccccc'  fillPattern='linear' fillAlpha='100,100'  fillRatio='50,50' fillAngle='-45'/>

        <annotation type='circle' xPos='0' yPos='0' radius='110' startAngle='0' endAngle='360' color='666666'/>

    </annotationGroup>

</annotations>
</chart>

For more information on Auto Scale please read : http://www.fusioncharts.com/widgets/docs/Contents/Ang_Origins.html