TechQA.

Responsive Telerik RadHtmlChart

1.8k views Asked by At

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>
telerik telerik-charting radhtmlchart
Original Q&A
2

There are 2 answers

1
Daryl On

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.

0
rdmptn On

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

Related Questions in TELERIK

Related Questions in TELERIK-CHARTING

Related Questions in RADHTMLCHART

Popular Questions

Trending Questions