Z Order Problems with Fusion Charts

[Matt]

I have rendered a web page with a chart.  I have another 3rd party control on the page for selecting a date.  It looks like a combo box, but when the button is pushed on the control a calendar opens.

The problem is that the Fusion Chart remains in front of the calendar.  What can I do so that the calendar control opens in front of the chart?

--Thanks

[thoth]

U need to download FusionChartsWMode.js and use that instead of the standard FusionCharts.js file. It will allow you to set the z-index...the standard js file does not.

[Matt]

thoth (7/29/2008)

---

U need to download FusionChartsWMode.js and use that instead of the standard FusionCharts.js file. It will allow you to set the z-index...the standard js file does not.

Just so I am clear, do we just need to get the lastest version of Fusion Charts?  It appears that we have v3, but I don't know which .version we have.

Or do we just need to download FusionChartsWMode.js?  If that is the case, where and how can I do that?

Thanks

[thoth]

Try this. I think it should work with what you have. It solved my Z-index problems.

 

http://www.fusioncharts.com/Downloads/FusionChartsWMode.zip

[thoth]

just remeber to reference on your page instead of the FusionCharts.js file. Example:

<

script language="javascript" type="text/javascript" src="FusionCharts/FusionChartsWMode.js"></script>

[Matt]

I've downloaded FusionChartsWMode.js and added the <script> tag in my file.  Could you point me to documentation regarding how I can set the z-order?

Thanks

[thoth]

You set the Z-index using css either in your style sheet or inline....your css is in control of the actual layering.

Try wrapping your chart in a wrapper div. For example:

<td valign="top">

<div align="center" style="position: relative; top: 0px; left: 0px; z-index: 0;">

<div id="chartdiv" align="center" style="position: relative; top: 0px; left: 0px; z-index: 1;"></div>

<script type="text/javascript">

var myChart = new FusionCharts("Charts/Column3D.swf", "myChartId", "800", "550", "0", "0");

myChart.setDataURL(

"Data/Stats.xml");

myChart.render(

"chartdiv");

</script>

<img src="map.png" border="0" alt="" usemap ="#StatsMap" style="position: absolute; top: 40px; left: 0px; z-index: 2;"/>

</div>

</td>

The sample above has a main wrapper DIV with a z-index of 0. Inside that div is another div with the ID chartdiv...its z-index is set to 1 and it is the div the chart is rendered in. Also inside the main wrapper div is an image (in this example it's an image map) that has a z-index of 2. The image map is placed on top the chart when its renederd to a browser.

You'll have to play with the css to fix your problem. You'll need to set the z-index of your chart to a number which is lower than whatever is being displayed ontop of it.

[dtondo]

if you are using: "FusionCharts.js" library just call:

 

 

 

chart.setTransparent(true);

 

 

 

after

 

chart.setDataXML(yourXml);

[Anju Maria Joshi]

Hi,

 I am new to this fusionChart. i have the same issue in my user control.

In my user control, i am binding the fusionchart from code behind by setting the text property of  a literal control like this,

ltrlBarChart.Text =

FusionCharts.RenderChartHTML("../FCF_MSColumn2D.swf", "", xmlBarData.ToString(), "mychart1", "1000", "300", false);

its design part is this.

<

tr><td align="center" valign="top"><asp:Literal ID="ltrlBarChart" runat="server"></asp:Literal></td></tr>.

I have a menu control which have to be displayed infront of the fusion chart. but now when the menu displayed, ther will not be any data on the fusion chart portion. please see the attachment. 

How can i solve the z-index problem in this case.

From the forum documentation i used the following properties when making the xmlBarData,

xmlBarData.Append(

"zeroPlaneThickness='0' zeroPlaneAlpha='0' ");

but i didn't get the solution. i tried everything to set the z-index of the wrapper controls of the chart.

Can anyone help me to get out of this problem.

 

[FusionCharts Support]

Hi,

 

 

 

You can set transparent parameter (9th) of RenderChartHTML to true, to make the chart transparent.

 

 

 

Please read for more on this: http://www.fusioncharts.com/docs/Contents/CS_BasicExample.html

[Anju Maria Joshi]

hi,

Thank u for the reply.

In my 'FusionCharts.RenderChartHTML()' method it accessing only 7 params. why this? is it because of the different dll version in my project?

Thanks

Anju

[Guest Rajroop]

Hey Anju,

 

 

 

Could you please try using the latest FusionCharts.dll for this and see if it helps? The same can be found in the trial download pack.

 

 

 

Looking forward to your updates on this.

[chinnu]

Hi,

 

I also have this problem .

 

I have

return FusionCharts.RenderChart("../../../UserResources/Scripts/Column3D.swf", "", xmlDataYear, "SalesPerMonth", "400", "325", false, true);

 

It contain only 8 parameters . How i add 9th parameter . I downloaded v3

 

Please help

[FusionCharts Support]

Hi,

 

The latest FusionCharts.dll with 3.2.1 Pack provides 3 overriding RenderChart functions. The the functions with the parameters are as follows:

 

 

 

[FusionCharts Support]

Hi chinnu,

 

For you the 9th param is a boolean to set transparency.

[FusionCharts Support]

RenderChartHTML has 4 overriding functions as given in the images below: