Guest Madhumita

Resize Guage Chart

Recommended Posts

Having trouble resizing guage chart (AngularGauge.swf).  I resize it within the flash code but the chart isn't resizing.  Any ideas?  Just need this chart smaller.

 

<script type="text/javascript" language="javascript"> 

//Instantiate the Chart 

var chart_FG_AvgRev = new FusionCharts("Charts/AngularGauge.swf", "FG_AvgRev", "200", "115", "0", "1");

 

//Set the dataURL of the chart

chart_FG_AvgRev.setDataURL("xml/fleetguage.xml");

 

//Finally, render the chart.

chart_FG_AvgRev.render("FG_AvgRevDiv");

 </script> 

 

Big chart in little space.

 

Edited by Guest

Share this post


Link to post
Share on other sites
Guest Madhumita

Hello,

 

Please refer to the code below:

("Charts/AngularGauge.swf", "FG_AvgRev", "200", "115", "0", "1");

 

The width and height(in bold) resizes the SWF. Now, your XML might contain annotations which has fixed sizes. Hence, the SWF is resized but the gauge inside is not.

 

Please send us the XML so that we can solve the issue.

Share this post


Link to post
Share on other sites

<Chart bgColor="AEC0CA,FFFFFF" fillAngle="45" upperLimit="100" lowerLimit="0" majorTMNumber="5" majorTMHeight="8" showGaugeBorder="0" gaugeOuterRadius="140" gaugeOriginX="205" gaugeOriginY="206" gaugeInnerRadius="2" displayValueDistance="20" pivotRadius="17" showPivotBorder="1" pivotBorderColor="000000" pivotBorderThickness="5" pivotFillMix="FFFFFF,000000">

- <colorRange>

  <color minValue="0" maxValue="50" code="399E38" />

  <color minValue="50" maxValue="95" code="E48739" />

  <color minValue="95" maxValue="100" code="B41527" />

  </colorRange>

- <dials>

  <dial value="56" borderAlpha="0" bgColor="000000" baseWidth="28" topWidth="1" radius="130" />

  </dials>

- <annotations>

- <!--  Draw the background arcs

  -->

- <annotationGroup xPos="205" yPos="207.5">

  <annotation type="circle" xPos="0" yPos="2.5" radius="150" startAngle="0" endAngle="180" fillPattern="linear" fillAsGradient="1" fillColor="dddddd,666666" fillAlpha="100,100" fillRatio="50,50" fillDegree="0" showBorder="1" borderColor="444444" borderThickness="2" />

  <annotation type="circle" xPos="0" yPos="0" radius="145" startAngle="0" endAngle="180" fillPattern="linear" fillAsGradient="1" fillColor="666666,ffffff" fillAlpha="100,100" fillRatio="50,50" fillDegree="0" />

  </annotationGroup>

  </annotations>

  </Chart>

Share this post


Link to post
Share on other sites
Guest Madhumita

Hello,

 

 

 

Please set autoScale='1' origW='410' origH='270' in the <chart> element as well as in the <annotations> element and you can now render the chart using any dimension.

Share this post


Link to post
Share on other sites

Awesome, thank you!

Is there a document that identifies all the possible emelents for a specific chart?  I need to put a name on the yaxis and I am using (yAxisName="Percentage Completed"), but it doesn't render on the screen.

Any ideas?

Share this post


Link to post
Share on other sites
Guest Madhumita

Hello,

 

 

 

You are most welcome.

 

 

 

For FusionWidgets for every chart the attributes that are available are present in the CHART XML SHEET.

 

 

 

Suppose you are looking for the CHART XML SHEET of Angular Gauge, then the Path would be/

 

http://www.fusioncharts.com/widgets/docs/ >> Angular Gauge >> Chart XML Sheet(http://www.fusioncharts.com/widgets/docs/Contents/Ang_XML.html)

Edited by Guest

Share this post


Link to post
Share on other sites
Guest Madhumita

Hey,

 

 

 

You are most welcome.

 

 

 

Happy FusionCharting. :)

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