Problem With Fusion Chart Is Coming On Top Of Jquery Date Picker

[adigaonline]

Hi,

 

I have problem with Fushion charts. please help me to resolve this issue.

 

Im using fusion charts(line), and im also using jquery datepicker for selecting two different date ranges.

 

when i select dates, the date picker comes properly when there is no data in chart display. (please find attached nodata inchart.jpg file)

 

the problem is when data is displayed in chart, and when i try to change the date using date picker, the chart data is coming on top of calendar picker which i dont want to happen. (please find attached Fusioncharts_JqueryCalender.jpg file).

 

Is it the problem with date picker or fusion charts???

 

Kindly let me know how to fix this issue.. please do help.

 

thanks,

Adiga

 

[Guest Sumedh]

Hi,

Could you please try using setTransparent method?

Ref. Code:

 

myChart.setTransparent(true);

If this does not help, try to set z-index property.

z-index property specifies the stack order of an element.

#datePicker

{

width: 600px;

z-index: 1000; ----------------------------> (setting positive z-index)

}

#chartContainer

{

background: #FFFFFF;

z-index: -1; ----------------------> (setting negative z-index ).

}

Hope this helps.

[adigaonline]

Hi,

 

I did tried the same, it did not helped me.

 

script = "<script type=\"text/javascript\"> var dataString = '" + dataXML + "';FusionCharts.setCurrentRenderer('javascript');var chart = FusionCharts.items[\"ChartId\"]; if(chart == null){ chart = new FusionCharts('Line', \"ChartId\", \"450\", \"300\", \"0\", \"0\");} chart.setXMLData(dataString); chart.setTransparent(true); chart.render(\"chartdiv\");</script>";

 

Hi,

Could you please try using setTransparent method?

Ref. Code:

 

myChart.setTransparent(true);

If this does not help, try to set z-index property.

z-index property specifies the stack order of an element.

#datePicker

{

width: 600px;

z-index: 1000; ----------------------------> (setting positive z-index)

}

#chartContainer

{

background: #FFFFFF;

z-index: -1; ----------------------> (setting negative z-index ).

}

Hope this helps.

[adigaonline]

Hi,

 

Where do i need to set this z-index, i mean which file??

 

Thanks,

Adiga

 

Hi,

Could you please try using setTransparent method?

Ref. Code:

 

myChart.setTransparent(true);

If this does not help, try to set z-index property.

z-index property specifies the stack order of an element.

#datePicker

{

width: 600px;

z-index: 1000; ----------------------------> (setting positive z-index)

}

#chartContainer

{

background: #FFFFFF;

z-index: -1; ----------------------> (setting negative z-index ).

}

Hope this helps.

[Guest Sumedh]

Hi,

 

You would need to add z-index property in the CSS.

 

Create two classes for the divs for datePicker and chartContainer in the CSS as mentioned in the earlier post.

 

Hope this helps.

[adigaonline]

thanks for reply...its working now.

 

Hi,

 

You would need to add z-index property in the CSS.

 

Create two classes for the divs for datePicker and chartContainer in the CSS as mentioned in the earlier post.

 

Hope this helps.

[Guest Sumedh]

Glad that, solution worked.