Problem in Deployment of the Application

4 posts, 0 answers
  1. Kevin
    Kevin avatar
    4 posts
    Member since:
    Nov 2012

    Posted 09 Jan 2013 Link to this post

    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.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 09 Jan 2013 Link to this post

    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!
  3. Kevin
    Kevin avatar
    4 posts
    Member since:
    Nov 2012

    Posted 09 Jan 2013 Link to this post

    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.
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 11 Jan 2013 Link to this post

    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!
Back to Top