adigaonline

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

Recommended Posts

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

 

post-27858-0-94432100-1333098441_thumb.jpg

post-27858-0-61834400-1333098452_thumb.jpg

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

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