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

[Vedmack]

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 August 5, 2012 by Vedmack

[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.

[Vedmack]

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.

Edited August 7, 2012 by Vedmack

[Guest Bindhu]

Hi,

 

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

 

Hope this helps!

[Vedmack]

Thanks for the reply , But alpha > 0 means that the annotation is being seen... so its not good for me :/

The circle must be completely transparent and hide the overlapping part of the linear gauge so it will look like in the http://www.fusioncha...asp?id=linear_5 example

Edited August 7, 2012 by Vedmack

[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.