Sign in to follow this  
radarbuddy

AngularGauge text is cut off

Recommended Posts

For some reason the upper and lower limt and some ticker values are cut off?

I am placing the gauge in gauge1 div below.

<div class="row span10" style="margin-left:0px;width:auto; vertical-align:bottom;display:block">

<!--

<div class="span2 vintage" style="margin-left:0px; padding-right:15px; width:auto;display: table-cell;vertical-align: bottom;float: none;">

<h1 style="vertical-align:text-bottom">165</h1>

</div>

-->

<div class="span4" style="margin-left:0px; padding-left:0px;padding-right:0px;margin-right:0px; display: table-cell;vertical-align: bottom;float: none;">

<div id="gauge1" style="width:200px; height:200px">

</div>

</div>

<div class="span6" style="margin-left:0px; width:auto;vertical-align:top;display: table-cell;float:none">

<div id="chart1" style="width: 750px;height:200px"></div>

</div>

</div>

 

javascript:

var gaugeThree = new FusionCharts("AngularGauge", "3gauge", "200", "200", "0");

gaugeThree.setJSONData(

{

"chart": {

"lowerlimit": "100",

"is2D": "0",

"upperlimit": "230",

"gaugestartangle": "240",

"showBorder": "0",

"lowerLimitDisplay":"100",

"upperLimitDisplay":"230",

"bgColor": "#ffffff",

"gaugeendangle": "-60",

"manageResize":"1",

"gaugefillmix":"",

"gaugeouterradius": "100",

"gaugeinnerradius": "80"

},

"colorrange": {

"color": [

{

"minvalue": "100",

"maxvalue": "170",

"code": "FF0000"

},

{

"minvalue": "170",

"maxvalue": "185",

"code": "FFFF00"

},

{

"minvalue": "185",

"maxvalue": "205",

"code": "008000"

},

{

"minvalue": "205",

"maxvalue": "215",

"code": "FFFF00"

},

{

"minvalue": "215",

"maxvalue": "230",

"code": "FF0000"

}

]

},

"dials": {

"dial": [

{

"value": "205.8",

"rearextension": "1",

"baseWidth":"4",

"topWidth":"4"

}

]

}

}

);

gaugeThree.render("gauge1");

 

 

 

post-55401-0-86098400-1379010598_thumb.png

Share this post


Link to post
Share on other sites
Guest Rishab

Hi,

The issue is arriving due to the value set for the <chart> element attribute 'gaugeOuterRadius' to 100.

This attribute is used to set the outer radius for the color range scale.

Please try setting it explicitly to 90 in the JSON DataSource.

Alternatively, you can also resolve the issue by updating the chart dimension to 250 x 250.

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
Sign in to follow this