Responsive Telerik RadHtmlChart

Question

I am using Telerik RadHtml chart i need to chart should be auto size based on the screen resolution how to do it. I have tried to set width and height as Auto but this not working. my chart containing in the datalist my code block below

 <asp:UpdatePanel ID="pnlContainer" runat="server" UpdateMode="Conditional">
        <ContentTemplate>        
            <div id="wrapper">
                        <asp:DataList ID="dtlstDashboards" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
                            OnItemDataBound="dtlstDashboards_ItemDataBound" Width="100%" DataKeyField="DashboardID">
                            <ItemTemplate>
                                    <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td align="left">
                                                <telerik:RadHtmlChart runat="server" ID="chrtCntrl"  Width="500px" Height="300px" >
                                                <Legend>
                                                    <Appearance Position="Bottom">
                                                    </Appearance>
                                                </Legend>
                                                <PlotArea>
                                                </PlotArea>
                                                </telerik:RadHtmlChart>
                                            </td>
                                        </tr>
                                    </table>
                            </ItemTemplate>
                        </asp:DataList>
                   </div>
        </ContentTemplate>
    </asp:UpdatePanel>

score 0 · Answer 1 · edited May 23 '17 at 12:05

You need to call the repaint() method of the chart if its dimensions change (usually, in the window.resize event, or any other suitable place in your code): http://www.telerik.com/support/code-library/radhtmlchart-in-a-responsive-web-page.

Here is an example:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            html, body, form
            {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .chartContainer
            {
                width: 50%;
                height: 50%;
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="Scriptmanager1" runat="server" />
            <div class="chartContainer">
                <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="100%">
                    <PlotArea>
                        <Series>
                            <telerik:AreaSeries>
                                <SeriesItems>
                                    <telerik:CategorySeriesItem Y="1" />
                                    <telerik:CategorySeriesItem Y="2" />
                                    <telerik:CategorySeriesItem Y="4" />
                                    <telerik:CategorySeriesItem Y="3" />
                                </SeriesItems>
                            </telerik:AreaSeries>
                        </Series>
                    </PlotArea>
                </telerik:RadHtmlChart>
                <script>
                    function resizeChart() {
                        //repaint the chart - will play animations
                        //$find("<%=RadHtmlChart1.ClientID%>").repaint();
                        //only resizes the chart - will not play animations
                        $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget().resize();
                    }
                    var TO = false;
                    $telerik.$(window).resize(function () {
                        if (TO !== false)
                            clearTimeout(TO);
                        TO = setTimeout(resizeChart, 200); //200 is time in miliseconds
                    });
                </script>
            </div>
        </form>
    </body>
</html>

resize timeout idea courtesy of this post javascript resize event firing multiple times while dragging the resize handle

score -1 · Answer 2 · answered Jun 19 '15 at 17:37

-1

Telerik Controls RadGrid and RadHTMLChart need to have the Height and Width on every container that is sized by percentage in order to be sized by percentage. You will have to add Height=100% Width=100% to all the containers that hold these items, all the way to the root.

answered Jun 19 '15 at 17:37

Daryl

28
8

with the HtmlChart this is not enough. While correct for HTML, the HtmlChart requires some scripts, see my answer. Generally, charts are static - take Excel for example, if you resize the program window, charts do not resize. – rdmptn Jun 23 '15 at 13:11

Responsive Telerik RadHtmlChart

2 Answers2

Linked