Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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'}
    ]
    }
    });
     

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

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