Responsive Telerik RadHtmlChart -
i using telerik radhtml chart need chart should auto size based on screen resolution how it. have tried set width , height auto not working. chart containing in datalist 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>
you need call repaint() method of chart if dimensions change (usually, in window.resize event, or other suitable place in code): http://www.telerik.com/support/code-library/radhtmlchart-in-a-responsive-web-page.
here 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 chart - play animations //$find("<%=radhtmlchart1.clientid%>").repaint(); //only resizes chart - not play animations $find("<%=radhtmlchart1.clientid%>").get_kendowidget().resize(); } var = false; $telerik.$(window).resize(function () { if (to !== false) cleartimeout(to); = settimeout(resizechart, 200); //200 time in miliseconds }); </script> </div> </form> </body> </html>
resize timeout idea courtesy of post javascript resize event firing multiple times while dragging resize handle
Comments
Post a Comment