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

Problem in Deployment of the Application

3 Answers 84 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 09 Jan 2013, 06:30 AM
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.

3 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 09 Jan 2013, 04:38 PM
Hello Kevin,

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.  

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!
0
Kevin
Top achievements
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.
0
Iliana Dyankova
Telerik team
answered on 11 Jan 2013, 02:51 PM
Hello Kevin,

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!
Tags
Charts
Asked by
Kevin
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or