Hi All,
We have developed an application using HTML 5 Kendo UI.We have tested the application in both IE 9 and IE 10 versions in the local machines it works fine but the main problem arises when the application is deployed and we run the application in the IE 9 and IE 10 the charts compressed or the pointing on one side and line drawing on the other side.
We have developed an application using HTML 5 Kendo UI.We have tested the application in both IE 9 and IE 10 versions in the local machines it works fine but the main problem arises when the application is deployed and we run the application in the IE 9 and IE 10 the charts compressed or the pointing on one side and line drawing on the other side.
3 Answers, 1 is accepted
0
Hello Kevin,
I have just answered on your support ticket with the same subject, however I am pasting my reply here too:
Iliana Nikolova
the Telerik team
I have just answered on your support ticket with the same subject, however I am pasting my reply here too:
I am not quite sure what causes the described outcome. In order to assist you best and provide concrete recommendations I would like to ask you to provide a live URL where we can observe the problem. Thank you in advance for your cooperation.
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kevin
Top achievements
Rank 1
Rank 1
answered on 10 Jan 2013, 05:23 AM
Hi Nikolova,
Thanks for the replay. As the application was hosted in the internal site not in public domain.Here I'm providing the code for the chart's binding which is showing the problem.hope it will be useful to resolve the problem occurring.
design of the charts
<table id="tbWeekly" width="100%" style="display: none">
<tr>
<td colspan="2">
<center>
<h2 style="color: #1f497d;">
Title</h2>
</center>
</td>
</tr>
<tr>
<td width="50%" align="center">
<div id="Chart1" style="height: auto">
</div>
</td>
<td width="50%" align="center">
<div id="Chart2">
</div>
</td>
</tr>
<tr>
<td width="50%" align="center">
<div id="Chart3">
</div>
</td>
<td width="50%" align="center">
<div id="Chart4">
</div>
</td>
</tr>
</table>
and in the script
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
data: '{"WeekDate":"' + $("#CbxWeek").val() + '"}',
url: "WebService.asmx/Chart1Data",
dataType: "json",
success: function (data) {
$("#Chart1").kendoChart({
dataSource: {
data: data.d
},
legend: {
position: "bottom"
},
title: {
text: "Title"
},
series: [
{
type: "line",
field: "Year2010",
name: "Year2010",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#4a7ebb"
}, {
type: "line",
field: "Year2011",
name: "Year2011",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#be4b48"
}, {
type: "line",
field: "Year2012",
name: "Year2012",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#98b954"
}, {
type: "line",
field: "Year2013",
name: "Year2013",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
dashType: "dash",
color: "#000000"
}
],
valueAxis: [{
name: "FiscalMonth",
title: { text: "Revenue " },
labels: {
template: "#= kendo.format('{0:N0}', value ) #$"
}
}],
categoryAxis: {
field: "Week",
majorTickType: "none",
labels: {
visible:false
}
},
tooltip: {
visible: false
}
})
}
});
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
data: '{"ReportWeekDate":"' + $("#CbxReportWeek").val() + '"}',
url: "WebService.asmx/Chart2Data",
dataType: "json",
success: function (data) {
$("#Chart2").kendoChart({
dataSource: data.d,
legend: {
position: "bottom"
},
title: {
text: "title"
},
series: [
{
type: "line",
field: "Year2010",
name: "Year2010",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#4a7ebb"
}, {
type: "line",
field: "Year2011",
name: "Year2011",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#be4b48"
}, {
type: "line",
field: "Year2012",
name: "Year2012",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#98b954"
}, {
type: "line",
field: "Year2013",
name: "Year2013",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
dashType: "dash",
color: "#000000"
}
],
valueAxis: [{
name: "FiscalMonth",
title: { text: "Revenue " },
labels: {
template: "#= kendo.format('{0:N0}', value) #$"
}
}],
categoryAxis: {
field: "Week"
},
tooltip: {
visible: false
}
})
}
});
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
data: '{"ReportWeekDate":"' + $("#CbxReportWeek").val() + '"}',
url: "WebService.asmx/Chart3Data",
dataType: "json",
success: function (data) {
$("#Chart3").kendoChart({
dataSource: data.d,
legend: {
position: "bottom"
},
title: {
text: "Title"
},
series: [
{
type: "line",
field: "Year2010",
name: "Year2010",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#4a7ebb"
}, {
type: "line",
field: "Year2011",
name: "Year2011",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#be4b48"
}, {
type: "line",
field: "Year2012",
name: "Year2012",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#98b954"
}, {
type: "line",
field: "Year2013",
name: "Year2013",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
dashType: "dash",
color: "#000000"
}
],
valueAxis: [{
name: "FiscalMonth",
title: { text: "Revenue" },
labels: {
template: "#= kendo.format('{0:N0}', value) #$"
}
}],
categoryAxis: {
field: "Week"
},
tooltip: {
visible: false
}
})
}
});
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
data: '{"ReportWeekDate":"' + $("#CbxReportWeek").val() + '"}',
url: "WebService.asmx/Chart4Data",
dataType: "json",
success: function (data) {
$("#Chart4").kendoChart({
dataSource: data.d,
legend: {
position: "bottom"
},
title: {
text: "Windows Q3 Weekly Trends (FY10-FY13)"
},
series: [
{
type: "line",
field: "Year2010",
name: "Year2010",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#4a7ebb"
}, {
type: "line",
field: "Year2011",
name: "Year2011",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#be4b48"
}, {
type: "line",
field: "Year2012",
name: "Year2012",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#98b954"
}, {
type: "line",
field: "Year2013",
name: "Year2013",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
dashType: "dash",
color: "#000000"
}
],
valueAxis: [{
name: "FiscalMonth",
title: { text: "Revenue" },
labels: {
template: "#= kendo.format('{0:N0}', value) #$"
}
}],
categoryAxis: {
field: "Week"
},
tooltip: {
visible: false
}
})
}
});
The above code is working fine in Chrome and Firefox but it is not working in IE 10 and IE 9.
can you provide me any skype id or any means of communication to share the application.
Thanks for the replay. As the application was hosted in the internal site not in public domain.Here I'm providing the code for the chart's binding which is showing the problem.hope it will be useful to resolve the problem occurring.
design of the charts
<table id="tbWeekly" width="100%" style="display: none">
<tr>
<td colspan="2">
<center>
<h2 style="color: #1f497d;">
Title</h2>
</center>
</td>
</tr>
<tr>
<td width="50%" align="center">
<div id="Chart1" style="height: auto">
</div>
</td>
<td width="50%" align="center">
<div id="Chart2">
</div>
</td>
</tr>
<tr>
<td width="50%" align="center">
<div id="Chart3">
</div>
</td>
<td width="50%" align="center">
<div id="Chart4">
</div>
</td>
</tr>
</table>
and in the script
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
data: '{"WeekDate":"' + $("#CbxWeek").val() + '"}',
url: "WebService.asmx/Chart1Data",
dataType: "json",
success: function (data) {
$("#Chart1").kendoChart({
dataSource: {
data: data.d
},
legend: {
position: "bottom"
},
title: {
text: "Title"
},
series: [
{
type: "line",
field: "Year2010",
name: "Year2010",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#4a7ebb"
}, {
type: "line",
field: "Year2011",
name: "Year2011",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#be4b48"
}, {
type: "line",
field: "Year2012",
name: "Year2012",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#98b954"
}, {
type: "line",
field: "Year2013",
name: "Year2013",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
dashType: "dash",
color: "#000000"
}
],
valueAxis: [{
name: "FiscalMonth",
title: { text: "Revenue " },
labels: {
template: "#= kendo.format('{0:N0}', value ) #$"
}
}],
categoryAxis: {
field: "Week",
majorTickType: "none",
labels: {
visible:false
}
},
tooltip: {
visible: false
}
})
}
});
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
data: '{"ReportWeekDate":"' + $("#CbxReportWeek").val() + '"}',
url: "WebService.asmx/Chart2Data",
dataType: "json",
success: function (data) {
$("#Chart2").kendoChart({
dataSource: data.d,
legend: {
position: "bottom"
},
title: {
text: "title"
},
series: [
{
type: "line",
field: "Year2010",
name: "Year2010",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#4a7ebb"
}, {
type: "line",
field: "Year2011",
name: "Year2011",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#be4b48"
}, {
type: "line",
field: "Year2012",
name: "Year2012",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#98b954"
}, {
type: "line",
field: "Year2013",
name: "Year2013",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
dashType: "dash",
color: "#000000"
}
],
valueAxis: [{
name: "FiscalMonth",
title: { text: "Revenue " },
labels: {
template: "#= kendo.format('{0:N0}', value) #$"
}
}],
categoryAxis: {
field: "Week"
},
tooltip: {
visible: false
}
})
}
});
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
data: '{"ReportWeekDate":"' + $("#CbxReportWeek").val() + '"}',
url: "WebService.asmx/Chart3Data",
dataType: "json",
success: function (data) {
$("#Chart3").kendoChart({
dataSource: data.d,
legend: {
position: "bottom"
},
title: {
text: "Title"
},
series: [
{
type: "line",
field: "Year2010",
name: "Year2010",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#4a7ebb"
}, {
type: "line",
field: "Year2011",
name: "Year2011",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#be4b48"
}, {
type: "line",
field: "Year2012",
name: "Year2012",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#98b954"
}, {
type: "line",
field: "Year2013",
name: "Year2013",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
dashType: "dash",
color: "#000000"
}
],
valueAxis: [{
name: "FiscalMonth",
title: { text: "Revenue" },
labels: {
template: "#= kendo.format('{0:N0}', value) #$"
}
}],
categoryAxis: {
field: "Week"
},
tooltip: {
visible: false
}
})
}
});
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
data: '{"ReportWeekDate":"' + $("#CbxReportWeek").val() + '"}',
url: "WebService.asmx/Chart4Data",
dataType: "json",
success: function (data) {
$("#Chart4").kendoChart({
dataSource: data.d,
legend: {
position: "bottom"
},
title: {
text: "Windows Q3 Weekly Trends (FY10-FY13)"
},
series: [
{
type: "line",
field: "Year2010",
name: "Year2010",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#4a7ebb"
}, {
type: "line",
field: "Year2011",
name: "Year2011",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#be4b48"
}, {
type: "line",
field: "Year2012",
name: "Year2012",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
color: "#98b954"
}, {
type: "line",
field: "Year2013",
name: "Year2013",
axis: "FiscalMonth",
tooltip: {
visible: true,
template: "#= kendo.format('{0:N0}', value) #$"
},
dashType: "dash",
color: "#000000"
}
],
valueAxis: [{
name: "FiscalMonth",
title: { text: "Revenue" },
labels: {
template: "#= kendo.format('{0:N0}', value) #$"
}
}],
categoryAxis: {
field: "Week"
},
tooltip: {
visible: false
}
})
}
});
The above code is working fine in Chrome and Firefox but it is not working in IE 10 and IE 9.
can you provide me any skype id or any means of communication to share the application.
0
Hello Kevin,
Iliana Nikolova
the Telerik team
The charts' definitions look OK. Could you please check if the charts are rendered in Compatibility Mode (keep it in mind that such browser mode is not supported by Kendo UI DataViz)?
Regards,Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!