Transparency For All Chart

[glbm.leo]

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.

[Guest Angshu]

Hi,

 

Welcome to FusionCharts Forum!

 

 

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.

[Steve Grove]

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 December 6, 2012 by Steve Grove

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