Ashwini Maddala

HTML controls overlapping with fusioncharts graph in IE 11

Recommended Posts

My application has some JQuery controls which seem to be overlapping with the Fusion charts graph. I tried setting z-index,setTransparent to true, WMode to transparent. None of them seem to work in IE 11 browser. This doesnt show issue in any other browsers. Any idea how to fix this for fusion charts v3 and IE 11 combination ? I attached the screenshot for more info. 

post-65342-0-30830800-1425532311_thumb.png

Share this post


Link to post
Share on other sites

Hi,

 

Can you share a live URL or sample.

 

Also a reason for suggesting up-gradation to you is that dependency on jQuery files has bene removed from the latest files.

 

Thanks.

Share this post


Link to post
Share on other sites

hi, the reason why i cannot upgrade to next version is that fusion charts 3 is used in an organization level and it can be upgraded only when the whole company upgrades. We are rolling out to IE 11 and hence i need to be sure this works. Do you know if we have a solution or it cant be done with this version of fusion charts? 

 

 

Below is the code sample i am using. 

This is my html : 

 

<script src="../JS/jquery.ui.datepicker.js" type="text/javascript"></script>

 <script src="../../jquery/jquery-1.8.3.js" type="text/javascript"></script>

    <script src="../../FusionCharts/FusionCharts.js" type="text/javascript"></script>
    <script src="../../FusionCharts/FusionChartsExportComponent.js" type="text/javascript"></script>
    <script type="text/javascript">
 
        function CallSuccess(res) {
            var str = res.toString().split(",");
            Maxdate = str[0];
            defaultDate = str[1];
            MinDate = str[2];
            var txtFrom = document.getElementById('<%=txtFrom.ClientID%>');
            var txtTo = document.getElementById('<%=txtTo.ClientID%>');
            $(function () {
 
                $('#<%=txtFrom.ClientID%>').datepicker({
                    showOn: "button",
                    buttonImage: "../blitzer/images/calendar.gif",
                    buttonImageOnly: true,
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'ddMyy',
                    maxDate: new Date(Maxdate),
                    minDate: new Date(MinDate),
                    defaultDate: new Date(defaultDate),
                    setDate: new Date(defaultDate),
                    buttonText: "Click to view Calender",
                    onClose: function (dateText, inst) {
 
 
                    }
                });
}</script>
 
In my rendering, 
 
strChart = InfoSoftGlobal.FusionCharts.RenderChartHTML("../../FusionCharts/MSLine.swf", "", strXml, "Chrt", "100%", "250", false);
 
            strChart = strChart.Replace("<param name=\"allowScriptAccess\" value=\"always\" />\r\n", "<param name=\"allowScriptAccess\" value=\"always\" />\r\n<param name=\"WMode\" value=\"Transparent\" />\r\n");
       
Edited by Ashwini Maddala

Share this post


Link to post
Share on other sites

 

hi, the reason why i cannot upgrade to next version is that fusion charts 3 is used in an organization level and it can be upgraded only when the whole company upgrades. We are rolling out to IE 11 and hence i need to be sure this works. Do you know if we have a solution or it cant be done with this version of fusion charts? 

 

 

Below is the code sample i am using. 

This is my html : 

 

<script src="../JS/jquery.ui.datepicker.js" type="text/javascript"></script>

 <script src="../../jquery/jquery-1.8.3.js" type="text/javascript"></script>

    <script src="../../FusionCharts/FusionCharts.js" type="text/javascript"></script>
    <script src="../../FusionCharts/FusionChartsExportComponent.js" type="text/javascript"></script>
    <script type="text/javascript">
 
        function CallSuccess(res) {
            var str = res.toString().split(",");
            Maxdate = str[0];
            defaultDate = str[1];
            MinDate = str[2];
            var txtFrom = document.getElementById('<%=txtFrom.ClientID%>');
            var txtTo = document.getElementById('<%=txtTo.ClientID%>');
            $(function () {
 
                $('#<%=txtFrom.ClientID%>').datepicker({
                    showOn: "button",
                    buttonImage: "../blitzer/images/calendar.gif",
                    buttonImageOnly: true,
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'ddMyy',
                    maxDate: new Date(Maxdate),
                    minDate: new Date(MinDate),
                    defaultDate: new Date(defaultDate),
                    setDate: new Date(defaultDate),
                    buttonText: "Click to view Calender",
                    onClose: function (dateText, inst) {
 
 
                    }
                });
}</script>
 
In my rendering, 
 
strChart = InfoSoftGlobal.FusionCharts.RenderChartHTML("../../FusionCharts/MSLine.swf", "", strXml, "Chrt", "100%", "250", false);
 
            strChart = strChart.Replace("<param name=\"allowScriptAccess\" value=\"always\" />\r\n", "<param name=\"allowScriptAccess\" value=\"always\" />\r\n<param name=\"WMode\" value=\"Transparent\" />\r\n");
       

 

Hi,

 

Please note that you are using a much older version that support RenderChartHTML method and SWF files.

 

We neither support this method or Flash charts anymore in the latest version. Hence, we would first recommend you to upgrade to the latest version as older versions are not supported annymore.

Ref.- http://www.fusioncharts.com/asp-net-charts/

 

Looking forward to your response.

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