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:
Unfortunately, the line chart is not being resized correctly. How can I avoid this problem?
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"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<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?