RadHtmlChart's Navigator not working in IE

4 posts, 0 answers
  1. Ruchi
    Ruchi avatar
    54 posts
    Member since:
    Apr 2012

    Posted 18 Mar 2015 Link to this post

    Hello Team,

    I am having one Radhtmlchart which is binded with Data on client side through WebApi controller.

    The function that we are using to bind RadHtmlChart is as follows:

    function chartDataBind(sender, args) {
           var ID = sender.ClientId;
           var widmapID = <%= WidMapID %>;
           var Cultureinfo='<%= CommonTools.GetUserDetails().Localization %>';
           var url = '/api/TestVolumeWidget?WidMapID=' + widmapID + "&CultureInfo=" + Cultureinfo;
            
           $.get(url, function (jsonResult) {    
               debugger
               var kendoChart  = sender;
                
               //Set the new datasource to the RadHtmlChart
               kendoChart.set_dataSource(jsonResult);
               kendoChart.set_transitions(true);
               kendoChart._dataBind();
               //Add the new series and repaint the chart, so that the new changes can take effect           
               kendoChart.repaint();
            });
            }

    I am declaring this function on <ClientEvents OnLoad="chartDataBind" /> in RadHtmlChart,

    Now the issue is in Navigator section, 
    Navigator is working properly in Firefox and Google Chrome, But its not working in IE(Its not even Visible).

    <telerik:RadHtmlChart runat="server" ID="TestVolumeChart" Layout="Stock"  CssClass="myChart" >
            <ClientEvents OnLoad="chartDataBind" />
            <Navigator Visible="true">
                <RangeSelector From="2014/08/25" To="2014/09/02" />
                 
                <SelectionHint Visible="true" DataFormatString="{0:d}" />
                <Series>
                    <telerik:AreaSeries Visible="true"  DataFieldY="TestDataDate">
                    </telerik:AreaSeries>
                </Series>
                <XAxis Color="#aaaaaa">
                    <LabelsAppearance>
                        <TextStyle Color="#666666" />
                    </LabelsAppearance>
                </XAxis>
            </Navigator>
     
            <PlotArea>
                <XAxis AxisCrossingValue="0" Color="#333333" MajorTickType="Outside" MinorTickType="Outside"
                    Reversed="false" DataLabelsField="TestDataVerifyDate">
                    <LabelsAppearance DataFormatString="{0:d}" RotationAngle="90" Skip="0" Step="1"></LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Date of Test Verified">
                    </TitleAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" Color="#333333" MajorTickSize="1" MajorTickType="Outside"
                    MinorTickSize="1" MinorTickType="Outside" Reversed="false">
                    <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Ordered Test Count">
                    </TitleAppearance>
                </YAxis>
                <Series>
                    <telerik:ColumnSeries Name="Test Volume" DataFieldY="TestDataCount">
                        <LabelsAppearance DataFormatString="{0}" Position="OutsideEnd"></LabelsAppearance>
                        <TooltipsAppearance DataFormatString="{0}" Color="White"></TooltipsAppearance>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
     
            <ChartTitle Text="Daily Test Volume">
            </ChartTitle>
             
        </telerik:RadHtmlChart>


    Is there anything i am missing out in my code?

    It would be great if anyone can help me out.

    Thanks,
    Ruchi
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 20 Mar 2015 Link to this post

    Hello Ruchi,

    If you are not using latest Telerik UI version - 2015.1.225, does upgrading to it helps? Otherwise I can suggest that you try to reproduce the issue with the attached example and then tell me what changes you have made, so that I can investigate it further.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ruchi
    Ruchi avatar
    54 posts
    Member since:
    Apr 2012

    Posted 23 Mar 2015 Link to this post

    Hey Danail,

    Thanks for your reply.

    By taking reference from your Demo Zip file, we have identified the issue which is causing RadhtmlChart's Navigator to not work in IE.

    The issue was the DataFormatString of X-axis LabelsAppearance was not in correct format, when we passed the value in mm/dd/yyyy format, it worked perfectly.

    Now, the issue is that we are setting the value of DataFormatString of X-axis LabelsAppearance from server side like:
    CultureInfo culInfo = new CultureInfo(usDetails.Localization);
                TestVolumeChart.PlotArea.XAxis.LabelsAppearance.DataFormatString = culInfo.DateTimeFormat.ShortDatePattern;

    So when the culture of the account is set to US culture, it works perfectly, but when it is set to some other culture like German(dd.mm.yyyy), it does not work in IE.

    However, this culture issue is working perfectly in all other browsers except IE.

    So can you anyone help me for how to set this value by taking value of DataFormatString from Current Culture Info.

    Regards,
    Ruchi
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 23 Mar 2015 Link to this post

    Hello Ruchi,

    I can suggest that you examine this article - Localization of RadHtmlChart Controls that illustrates how to localize the chart.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top