Vedmack

Linear Gauge - How To Use All The Area For The Gauge Itself

Recommended Posts

Hi

 

I got a simple linear gauge , with the following code

 


var chartData = {
			"chart": {
				"manageresize": "1",
				"upperlimit": "100",
				"lowerlimit": "0",
				"showshadow": "0",
				"gaugefillmix": "{color},{FFFFFF}",
				"gaugefillratio": "50,50",
				"showTickMarks" : "0",
				"showTickValues" : "0",

				"chartLeftMargin" : "0",
				"chartRightMargin" : "0",
				"chartTopMargin" : "0",
				"chartBottomMargin" : "0",


				"pointerBgAlpha" : "0" ,
				"pointerBorderAlpha" : "0",
				"bgAlpha" : "0",
				"borderAlpha" : "100"

			},
			"colorrange": {
				"color": [
					{
						"minvalue": "0",
						"maxvalue": markValue,
						"code": "B40001",
						"bordercolor": "B40001"
					},
					{
						"minvalue": markValue,
						"maxvalue": "100",
						"code": "5C8F0E"
					}
				]
			}
		};

		chartReference = new FusionCharts("HLinearGauge", "chartID", "150", "70", "0", "0");
		chartReference.setJSONData(chartData);
		chartReference.setTransparent(true);
		chartReference.render(containerID);

 

 

For some reason there is still margin at the top (despite me doing "chartTopMargin" : "0",) and a little but of margin in the buttom

 

How can I draw my gauge without the margins at all (I want to use the entire area for the gauge)

 

 

Regards,

 

Daniel.

Edited by Vedmack

Share this post


Link to post
Share on other sites
Guest Bindhu

Hi,

 

I am afraid, we are not able to see any margins.

 

Can you please share a screen shot with us for better comprehension?

Share this post


Link to post
Share on other sites
Guest Bindhu

Hi,

 

That is the space reserved to display the pointer.

 

If you do not want to display the pointer, then as a work around, please define negative values for chart margins.

 

Ref. Code:

<chart chartTopMargin="-40" chartbottommargin="-10" ....>

 

Hope this helps!

Share this post


Link to post
Share on other sites

if i do the negative values the gauge become much thicker , so i end up doing

 

chartReference = new FusionCharts("HLinearGauge", chartID, "125", "25", "0", "0"); //replace the height of 50 to 25

 

and then it looses its 3D effect :/

 

please advise

post-28512-0-88530900-1345131030_thumb.png

Share this post


Link to post
Share on other sites
Guest Bindhu

Hi,

 

Please modify the value of "gaugefillratio" accordingly.

 

Ref. Code:

<chart gaugefillratio='10,90'...>

 

Hope this helps!

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