Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Resize a Chart that is embedded in a RadControl

1 Answer 93 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Karl-Heinz
Top achievements
Rank 1
Karl-Heinz asked on 22 Apr 2014, 09:37 AM
Hello,

For test purposes, I'm trying to resize a line chart that is embedded in a RadPane as soon as the size of the browser window changes. This is done by calling kendo.resize. The following code defines my sample web form:

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RadControlsWebApp1._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server" style="width: 100%; height: 100%;">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
 
    <style type="text/css">html { height: 95%; overflow: visible; }</style>
 
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" /> 
</head>
<body style="height: 100%;">
    <form id="form1" runat="server" style="height: 100%;">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
 
            <asp:ScriptReference Path="~/js/jquery.min.js" />
            <asp:ScriptReference Path="~/js/kendo.all.min.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "A Report"
                },
                legend: {
                    position: "bottom"
                },
 
                series: [{
                    type: "area",
                    data: [2, -1, 3],
                    name: "Signal 1",
                    color: "#ff1c1c",
                    axis: "ax_1"
                }, {
                    type: "area",
                    data: [3, 5, 30],
                    name: "Signal 2",
                    color: "#ffae00",
                    axis: "ax_2"
                }],
 
                valueAxes: [{
                    name: "ax_2",
                    min: 0,
                    max: 40,
                    axisCrossingValue: 0
                }, {
                    name: "ax_1",
                    min: -2,
                    max: 5
                }],
 
                categoryAxis: {
                    categories: ["2013", "2014", "2015"],
                    axisCrossingValues: [4, 0],
                    justified: true
                },
 
                tooltip: {
                    visible: true,
                    format: "{0}",
                    template: "#= category #/03: #= value #"
                }
            });
        }
 
        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
        $(window).on("resize", function () {
            kendo.resize($("#chart"));
        });
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
         
    <telerik:RadSplitter ID="rsProTrendFrame" Runat="server" Width="100%" Height="100%">
        <telerik:RadPane ID="rpApplication" Runat="server" Width="100%" Height="100%">
            <div id="example" class="k-content" style="width: 100%; height: 100%;">
                <div class="chart-wrapper" style="width: 100%; height: 100%;">
                    <div id="chart" style="width: 100%; height: 100%;">
                    </div>
                </div>
            </div>
        </telerik:RadPane>
    </telerik:RadSplitter>
    </form>
</body>
</html>

Unfortunately, the line chart is not being resized correctly. How can I avoid this problem?

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 24 Apr 2014, 09:11 AM
Hi Karl,

As a layout control, the Splitter functionality is highly depending on the resizing of the window and its child controls' rendering. When adding programmatically ASP controls or Kendo UI widgets to a page, confguring them to occupy 100% of their parents' size, you have to make sure that the parents are rendered before them. Since the document.ready() event is fired before the Splitter's ClientLoaded one, I would suggest that you move the chart creation to the handler of the Splitter's ClientLoaded event.

Following the same logic, the Kendo UI Chart will be properly resized is you resize it in the Splitter's ClientResized event handler, instead of the window.resize() one. You can find useful information regarding the RadSplitter's Client-side API and events in its online documentation here - Splitter Client-Side Basics.

In addition, please note that a Splitter containing less than two RadPanes is highly not recommended and not supported scenario that may lead to many unexpected issues.

For your convenience I am pasting here your code modified per the suggestions above, as the Telerik.Web.UI jQuery references are also removed so the will not override the primary declared Kendo UI ones:
<head id="Head1" runat="server" style="width: 100%; height: 100%;">
    <title></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
 
    <style type="text/css">
        html
        {
            height: 95%;
            overflow: visible;
        }
    </style>
 
    <meta charset="utf-8">
</head>
<body style="height: 100%;">
    <form id="form1" runat="server" style="height: 100%;">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
 
        <telerik:RadSplitter ID="rsProTrendFrame" runat="server" Width="100%" Height="100%" OnClientLoaded="OnClientLoaded" Orientation="Horizontal" OnClientResized="OnClientResized">
            <telerik:RadPane ID="rpApplication" runat="server">
                <div id="example" class="k-content" style="width: 100%; height: 100%;">
                    <div class="chart-wrapper" style="width: 100%; height: 100%;">
                        <div id="chart" style="width: 100%; height: 100%;">
                        </div>
                    </div>
                </div>
            </telerik:RadPane>
            <telerik:RadPane ID="AdditionalPane" runat="server" Height="50px"></telerik:RadPane>
        </telerik:RadSplitter>
        <script type="text/javascript">
            function OnClientLoaded(splitter, args) {
                $("#chart").kendoChart({
                    title: {
                        text: "A Report"
                    },
                    legend: {
                        position: "bottom"
                    },
 
                    series: [{
                        type: "area",
                        data: [2, -1, 3],
                        name: "Signal 1",
                        color: "#ff1c1c",
                        axis: "ax_1"
                    }, {
                        type: "area",
                        data: [3, 5, 30],
                        name: "Signal 2",
                        color: "#ffae00",
                        axis: "ax_2"
                    }],
 
                    valueAxes: [{
                        name: "ax_2",
                        min: 0,
                        max: 40,
                        axisCrossingValue: 0
                    }, {
                        name: "ax_1",
                        min: -2,
                        max: 5
                    }],
 
                    categoryAxis: {
                        categories: ["2013", "2014", "2015"],
                        axisCrossingValues: [4, 0],
                        justified: true
                    },
 
                    tooltip: {
                        visible: true,
                        format: "{0}",
                        template: "#= category #/03: #= value #"
                    }
                });
            }
 
            function OnClientResized(splitter, args) {
                kendo.resize($("#chart"));
            }
        </script>
    </form>
</body>
</html>

I hope this information will be helpful for you.

Kind regards,
Vessy
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Karl-Heinz
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or