Completed
Last Updated:
10 Aug 2021 15:24
by ADMIN
ADMIN
Danail Vasilev
Created on:
08 Jun 2015 12:32
Category:
HtmlChart
Type:
Bug Report
Radar chart is resized reversely
For the time being you can resize the chart with set_width/set_height methods. For example:
<head runat="server">
<title></title>
<style>
.RadHtmlChart.k-chart, table {
width: 100%;
height: 100%;
}
td {
border: 1px solid green;
width: 60%;
height: 60%;
overflow:hidden;
}
html, body, form {
height: 100%;
overflow: hidden;
margin: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<script>
function resizedw() {
// Haven't resized in 100ms!
var donut = $find("<%=DonutChart.ClientID%>");
var radar = $find("<%=RadarAreaChart.ClientID%>");
var docDimensions = $telerik.getBounds(document.body);
resizeChart(donut, docDimensions);
resizeChart(radar, docDimensions);
}
function resizeChart(chart, docDimensions) {
var chartDimensions = $telerik.getBounds(chart.get_element().parentElement);
chart.set_width("'" + (chartDimensions.width / docDimensions.width) + "%'");
chart.set_height(("'" + chartDimensions.height / docDimensions.height) + "'%");
}
var doit;
window.onresize = function () {
clearTimeout(doit);
doit = setTimeout(resizedw, 1000);
};
</script>
<table>
<tr>
<td>
<telerik:RadHtmlChart runat="server" ID="DonutChart" Width="100%" Height="100%" Transitions="true">
<Appearance>
<FillStyle BackgroundColor="White"></FillStyle>
</Appearance>
<ChartTitle Text="OS Usage Statistics for December 2012">
<Appearance Align="Center" Position="Top"></Appearance>
</ChartTitle>
<PlotArea>
<Series>
<telerik:DonutSeries>
<LabelsAppearance Visible="false">
</LabelsAppearance>
<TooltipsAppearance DataFormatString="{0}%" BackgroundColor="White"></TooltipsAppearance>
<SeriesItems>
<telerik:PieSeriesItem BackgroundColor="#00adcc" Name="Win7"
Y="55.6"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#cccccc" Name="Win8" Y="2.5"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#999999" Name="Vista" Y="2.8"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#888888" Name="NT" Y="1.8"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#777777" Name="WinXP" Y="21.1"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#666666" Name="Linux" Y="4.7"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#555555" Name="Mac" Y="8.7"></telerik:PieSeriesItem>
<telerik:PieSeriesItem BackgroundColor="#444444" Name="Mobile" Y="2.2"></telerik:PieSeriesItem>
</SeriesItems>
</telerik:DonutSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
</td>
<td>
<telerik:RadHtmlChart runat="server" ID="RadarAreaChart" Width="100%" Height="100%" Transitions="true">
<PlotArea>
<Series>
<telerik:RadarAreaSeries Name="Position" MissingValues="Gap">
<Appearance>
<FillStyle BackgroundColor="#00adcc"></FillStyle>
</Appearance>
<LineAppearance Width="1" />
<MarkersAppearance Visible="false" />
<LabelsAppearance Visible="false"></LabelsAppearance>
<SeriesItems>
<telerik:CategorySeriesItem Y="159"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="170"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="100"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="103"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="173"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="107"></telerik:CategorySeriesItem>
</SeriesItems>
</telerik:RadarAreaSeries>
<telerik:RadarAreaSeries Name="Person" MissingValues="Gap">
<Appearance>
<FillStyle BackgroundColor="red"></FillStyle>
</Appearance>
<LabelsAppearance Visible="false">
</LabelsAppearance>
<LineAppearance Width="1" />
<MarkersAppearance Visible="false"></MarkersAppearance>
<SeriesItems>
<telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="168"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="150"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="109"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="76"></telerik:CategorySeriesItem>
</SeriesItems>
</telerik:RadarAreaSeries>
</Series>
<XAxis Color="Black" Reversed="false" StartAngle="180">
<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
<MinorGridLines Visible="false"></MinorGridLines>
<Items>
<telerik:AxisItem LabelText="Soft Skills"></telerik:AxisItem>
<telerik:AxisItem LabelText="Sector knowledge"></telerik:AxisItem>
<telerik:AxisItem LabelText="Finance knowledge"></telerik:AxisItem>
<telerik:AxisItem LabelText="Work experience"></telerik:AxisItem>
<telerik:AxisItem LabelText="Win7 skills"></telerik:AxisItem>
<telerik:AxisItem LabelText="MS Office skills"></telerik:AxisItem>
<telerik:AxisItem LabelText="Programming skills"></telerik:AxisItem>
<telerik:AxisItem LabelText="Database skills"></telerik:AxisItem>
</Items>
</XAxis>
<YAxis Visible="false">
<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
<MinorGridLines Visible="false"></MinorGridLines>
<LabelsAppearance Step="1"></LabelsAppearance>
</YAxis>
<CommonTooltipsAppearance Color="White"></CommonTooltipsAppearance>
</PlotArea>
<ChartTitle Text="Position Profile">
<Appearance Align="Center" BackgroundColor="White" Position="Top">
</Appearance>
</ChartTitle>
<Legend>
<Appearance BackgroundColor="White" Position="Bottom">
</Appearance>
</Legend>
</telerik:RadHtmlChart>
</td>
</tr>
</table>
</form>
1 comment
ADMIN
Rumen
Posted on:
10 Aug 2021 15:24