glbm.leo

Transparency For All Chart

Recommended Posts

Hello.

 

I need to know if there is a way through FusionCharts to obtain the chart rendered with an opacity. I need it to create like a chart "teaser".

I tried to apply an opacity to the chart container but the chart legends are shown badly. Furthermore, opacity in the HTML is not supported in every browser unlike the flash alternative.

 

Thanks a lot in advance.

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Welcome to FusionCharts Forum!smile.gif

 

 

If you wish to set your chart background as transparent in the HTML page, you need to follow these steps:

 

You need to configure chart's data as following:

 

If you are feeding data in XML format, set <chart ... bgAlpha='0,0' ...>

 

If you are feeding data in JSON format, set "chart":{ ... "bgalpha":"0,0", ...}

 

In the HTML code that embeds the chart, set myChart.setTransparent(true)

 

Please find the sample code below:

 

<div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>

<script type="text/javascript">

var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "900", "300", "0", "1");

myChart.setXMLUrl("Data.xml");

myChart.setTransparent(true);

myChart.render("chartdiv");

</script>

</div>

 

In case you are not looking for this, please send us a screenshot or any live link of your requirement.

 

Awaiting for your response.

Share this post


Link to post
Share on other sites

How can you achieve the same using the Fusion Charts jQuery plugin and a "javascript" rendered chart. There is no option to set transparency in the insertFusionChart() function call that presumably calls the render() method.

 

 

$("#chart_demo").insertFusionCharts({

swfUrl: $("#ctype").val(),

renderer: "javascript",

dataSource: $("#charttext").val(),

dataFormat: "xml",

width: $("#cwidth").val(),

height: $("#cheight").val(),

debugMode : 0,

});

 

I can do it in plain javascript as described earlier but I prefer jQuery. Essentially how can I do the equivalent of myChart.setTransparent(true); using jQuery plugin?

Edited by Steve Grove

Share this post


Link to post
Share on other sites
Guest Bindhu

Hi,

 

Please try using the below code,

 

Ref. Code:

$("#chartContainer").insertFusionCharts({

swfUrl: "Charts/Column2D.swf",

dataSource: "Pareto.xml",

dataFormat: "xmlurl",

width: "400",

height: "300",

id: "myChartID",

backgroundColor: 'transparent' });

 

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