Vedmack

How To Make Annotations Transparent And Yet To Cover The Linear Gauge?

Recommended Posts

Hi

 

I want to make the annotations of the linear gauge transparent , i took the following example

 

http://www.fusioncha...asp?id=linear_5

 

 

but when I set the alpha or the fillAlpha of the annotation to 0 it disappears and the shape of the linear gauge become a simple rectangle

 

 

so how can i make the circle annotation to cover the linear gauge rectangle but stay transparent to the background I'm displaying the whole chart on?

 

Thanks ahead,

 

Daniel,

Edited by Vedmack

Share this post


Link to post
Share on other sites
Guest Bindhu

Hi,

 

Please share the sample image of your requirement.

 

If you need a similar chart as is on the link that you have provided, you may obtain the same from the very same link.

 

Also, please share the XML data that you are currently using.

Share this post


Link to post
Share on other sites

Here the sample image

http://i49.tinypic.com/2pzfpqg.jpg

 

I want to make that blue circle (created by annotation) to cover the linear gauge rectangle and to be transaprent

 

but if I use "alpha" : "0", the circle disappears , I don't want to make the circle colored in white or other color , cause the background of the chart is colored in gradient color and it could be changed later on

 

 

here is my code

 


		var chartData = {
			"chart": {
				"manageresize": "1",
				"lowerlimit": "0",
				"upperlimit": "100",
				"showborder": "0",
				"valuepadding": "0",
				"gaugefillmix": "",
				"showgaugeborder": "0",
				"pointerontop": "0",
				"pointerradius": "5",
				"pointerbordercolor": "000000",
				"pointerbgcolor": "000000",
				"annrenderdelay": "0",
				"showshadow": "0",
				"minortmnumber": "0",
				"basefontcolor": "000000",
				"animation": "0",
				"showValue": "0",
				"showTickMarks": "0",
				"showTickValues": "0",
				"bgAlpha" : '0,0'
			},
			"colorrange": {
				"color": [
					{
						"minvalue": "0",
						"maxvalue": "100",
						"alpha": "0"
					}
				]
			},
			"pointers": {
				"pointer": [
					{
						"value": markValue
					}
				]
			},
			"annotations": {
				"groups": [
					{
						"id": "Grp1",
						//"alpha" : "0",
						"showbelow": "0",
						"x": "$chartCenterX",
						"y": "-25",
						"items": [
							{
								"type": "circle",
								"radius": "50",
								"color": "0000FF"
							}
						]
					},
					{
						"id": "Grp2",
						"showbelow": "1",
						"items": [
							{
								"type": "rectangle",
								"x": "$gaugeStartX",
								"y": "$gaugeStartY",
								"tox": "$gaugeEndX",
								"toy": "$gaugeEndY",
								"fillcolor": "678000,FCEF27,E00000"
							}
						]
					}
				]
			}
		};

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

 

 

Thanks ahead,

 

Daniel.

post-28512-0-89819400-1344319860_thumb.png

Edited by Vedmack

Share this post


Link to post
Share on other sites
Guest Bindhu

Hi,

 

Try setting alpha to a little higher value, say 30.

 

Hope this helps!

Share this post


Link to post
Share on other sites
Guest Bindhu

Hi,

 

I am afraid, it is not possible.

 

If you make it transparent, then linear gauge will be see behind the circle annotation.

 

Hope this clarifies.

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