Tooltip Is Not Working When The Chart Is Inserted Into A Fancybox

[Mahtab]

Hi everybody,

 

I am using FusionCharts in an asp.net application.

 

Everything is working fine ecxept the automatic ToolTip.

The problem showed up when I started rendering my chart inside an asp.net page that is loaded into a fancybox.

 

I used the following code to show the chart, but no tooltip shows up :

 

 

var myChart = new FusionCharts(chartType, divId + "Chart", "600", "450", "0");

myChart.setXMLData(chartDescription);

 

myChart.render(divId);

 

I have even tried to use the jquery plugin and insert the whole chart into the page (which is loaded in fancybox) like this :

 

 

$("#" + divId).insertFusionCharts({

swfUrl: chartType,

renderer: "JavaScript",

dataSource: chartDescription,

dataFormat: "xml",

width: "600",

height: "450",

id: divId + "Chart"

});

 

But still no success with the tooltip!!!

 

Any help is appreciated, its frustrating!

 

Thanks in advance

Mahtab

Edited February 19, 2013 by Mahtab

[Mahtab]

Ok, seems like no one could help me, but this morning I could solve my own problem thanks to this link : http://stackoverflow...-modal-fancybox

 

It is the "z-index" property that decides the order of elements on the page.

The z-index of the tooltip was 999 which is less than the z-index of fancybax.

Giving a z-index greater than the one fancybox has, brings the tooltip up on the chart

I hope this helps someone else who is having the same problem.

 

Have a nice day

Mahtab

 

 

Hi everybody,

 

I am using FusionCharts in an asp.net application.

 

Everything is working fine ecxept the automatic ToolTip.

The problem showed up when I started rendering my chart inside an asp.net page that is loaded into a fancybox.

 

I used the following code to show the chart, but no tooltip shows up :

 

 

var myChart = new FusionCharts(chartType, divId + "Chart", "600", "450", "0");

myChart.setXMLData(chartDescription);

 

myChart.render(divId);

 

I have even tried to use the jquery plugin and insert the whole chart into the page (which is loaded in fancybox) like this :

 

 

$("#" + divId).insertFusionCharts({

swfUrl: chartType,

renderer: "JavaScript",

dataSource: chartDescription,

dataFormat: "xml",

width: "600",

height: "450",

id: divId + "Chart"

});

 

But still no success with the tooltip!!!

 

Any help is appreciated, its frustrating!

 

Thanks in advance

Mahtab

[Guest Sashibhusan]

Hi Mahtab,

 

We are glad to hear that you have managed of your own to resolve your issue.

 

Your solution would really help others, who is facing similar issues.

 

Please do let us know if we could be of any further help.

[Mahtab]

Hi again,

 

Thanks for your message Sashibhusan

 

I'm now having a similar problem with the export menu in javascript charts.(the one that comes up after clicking on the export button and is like : save as a pdf, save as img etc)

 

The export menu is now covered by the fancybox and I cannot solve the problem on the same way that I did for the tooltip.

Thats because I could set the z-index of the tooltip element but I find no way to do the same thing with the export menu.

 

Can anyone help me with the issue?

 

/Mahtab

[Mahtab]

I solved my issue by this line of jQuery:

 

$('svg').css('z-index', '1102');

 

It might help someone

 

/Mahtab

[Guest Sashibhusan]

Hi Mahtab,

 

We are glad to hear that you have managed of your own to resolve your issue.

 

Happy FusionCharting!