This is a migrated thread and some comments may be shown as answers.

RadHtmlChart's Navigator not working in IE

3 Answers 119 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

Ruchi asked on 18 Mar 2015, 09:04 AM

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

3 Answers, 1 is accepted

answered on 20 Mar 2015, 09:58 AM

RadHtmlChart-NavigatorTest.zip

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.

answered on 23 Mar 2015, 06:59 AM

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