Transparent Background

[bionary]

I can't for the life of me figure out how to achieve a transparent background with fusion charts XT using the jquery plugin

[@version fusioncharts/3.2.3-sr3.5347]

 

here's my code:

$('#myChart').insertFusionCharts({
	
	type:"Pie2D",
	renderer: "flash",
	width: "30", 
	height: "30", 
	id: 'p-'+data.id,
	dataFormat: "json",
	wmode: 'transparent',
	dataSource: { 
		chart: { 
			pieRadius: 15,
			bgAlpha: 0,
			animation:0,         
			showShadow:0,
			enableRotation:1,
			showLegend:0,
			showLabels:0,
			showValues:0,
			showToolTip:0,
			dataLabels: 0,
			showBorder:0,
			enableSmartLabels:0
		},
		data: [
			{value: data.med, color:'#009000'},
			{value: 100 - parseInt(data.med), color:'#900000'}
		]
	}
});

I've tried setting bgAlpha equal to '0,0' , but that doesn't work either.

 

Thanks.

 

[Swarnam]

Hey,

 

To achieve transparent background while using the jQuery plugin, please refer to the following code:

    $('#myChart').insertFusionCharts({
    type:"Pie2D",
    renderer: "flash",
    width: "30",
    height: "30",
    id: 'p-'+data.id,
    dataFormat: "json",
    backgroundColor: 'transparent',
    dataSource: {
    chart: {
    pieRadius: 15,
    bgAlpha: 0,
    animation:0,
    showShadow:0,
    enableRotation:1,
    showLegend:0,
    showLabels:0,
    showValues:0,
    showToolTip:0,
    dataLabels: 0,
    showBorder:0,
    enableSmartLabels:0
    },
    data: [
    {value: data.med, color:'#009000'},
    {value: 100 - parseInt(data.med), color:'#900000'}
    ]
    }
    });
     

[bionary]

I tried your code.  I'm sorry to report it doesn't work.  The chart still has a white box around it, blocking out the color of it's parent element.

[Guest Sushant]

Hi,

 

This is a known bug in the current release of the jQuery plugin and will be taken care of in the subsequent release.

 

I have a workaround that can fix this issue for you, for the time being.

$('#myChart').bind('fusionchartsbeforerender', function () {
    FusionCharts.items['p-'+data.id].jsVars.transparent = true;
});

$('#myChart').insertFusionCharts(...);

 

 

Make sure you set the bgAlpha='0' in the chart attributes being passed to insertFusionCharts.

 

Hope this solves your issue.

 

 

Regards,

Sushant

[bionary]

ok, your answer didn't quite fix it but got me snooping around the data objects used to control the chart settings and my orginal code (first post in thread) ***was correct but I was following some bad information given in the docs.   http://docs.fusioncharts.com/maps/Contents/jQuery/API.html   reads as  "wmode"  all lowercase when in fact "wMode" is correct.   I changed that and all works as expected.  So, there may not be any bug with Fusion Chart, just a typo in the documentation.  Thank you.