Radchart Width in percentage

Thread is closed for posting
5 posts, 0 answers
  1. shankar
    shankar avatar
    1 posts
    Member since:
    Mar 2011

    Posted 29 Mar 2011 Link to this post

    I dont know why I cant set width in percentage i.e.  when i am set the width <telerik:radchart width = "100%" its gives me error.

    Is there any easy way to set the width as per resolution or set the width in percentage?

    Please do the needful.

    Thanks & Regards,
    Shankar Gidwani
  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 30 Mar 2011 Link to this post

    Hi shankar,

    I would suggest you use the following javascript snippet:

    <script type="text/javascript">   
                    window.onload = AdjustChartImage;   
                    function AdjustChartImage()                
                    {                      
                        var chart = window["<%=RadChart1.ClientID%>"];                     
                        var chartImg = chart.childNodes[0];                    
                        chartImg.style.width = chart.parentNode.offsetWidth;   
                        chartImg.style.height = chart.parentNode.offsetWidth;   
                    }   
                </script>  

    Regards,
    Evgenia
    the Telerik team
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Uday
    Uday avatar
    1 posts
    Member since:
    May 2013

    Posted 09 Oct 2013 Link to this post

    Hi Evgenia 
    ,

     The Javascript snippet to set the chart width to 100% works fine in IE8 but not in IE9 and later versions. Can you please help how do I achieve the same in IE9 and later versions.

    Thanks & Regards,
    Uday Kumar
  5. Denis
    Denis avatar
    1 posts
    Member since:
    Jan 2014

    Posted 10 Mar 2014 Link to this post

    Hello Evgenia,

    I have relatively the same issue but my Chart is inside a UserControl .ascx file?? window["<%=RadChart1.ClientID%>"] gives me a compile error. and if I use reference id "<%=ByYearLine.ClientID%>" of the .ascx file Javascript gives me var chart = undefined. And to make you beat your head agents the wall it all sits inside a DevExpress image slider.


    <table class="DashChartsa" width="50%" border="1" style="float: left;">
        <tr align="center">
            <td class="RelatedAssoc">
                <div style="width: 100%">
                    <%-- Styles-ImageArea-Height="260px" Styles-ImageArea-Width="400px" --%>
                    <dx:ASPxImageSlider ID="ASPxImageSlider4" runat="server" ClientInstanceName="ImageSlider4"
                        EnableViewState="False" EnableTheming="False" NavigateUrlFormatString="javascript:void({0});">
                        <ClientSideEvents Init="OnInit" />
                        <SettingsImageArea ImageSizeMode="FillAndCrop" NavigationButtonVisibility="None"
                            ItemTextVisibility="Always" />
                        <SettingsNavigationBar Mode="Dots" />
                        <SettingsSlideShow AutoPlay="False" StopPlayingWhenPaging="false" PausePlayingWhenMouseOver="false" PlayPauseButtonVisibility="Faded"></SettingsSlideShow>
                        <Items>
                            <dx:ImageSliderItem >
                                <Template>
                                    <asp:UpdatePanel ID="upByYearLine"  runat="server">
                                        <ContentTemplate>
                                            <evt:ByYearLine ID="ByYearLine" runat="server" />
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </Template>
                            </dx:ImageSliderItem>
                        </Items>
                    </dx:ASPxImageSlider>
                </div>
            </td>
        </tr>
    </table>

    I've also tried this code. 

    window.onload = AdjustChartImage;
    function AdjustChartImage() {
        var chart = document.getElementsByTagName('<%= ByYearLine.ClientID %>').item[1];;
        alert(chart);
                //var chartImg = chart.childNodes[0];
                //chartImg.style.width = chart.parentNode.offsetWidth;
                //chartImg.style.height = chart.parentNode.offsetWidth;
    }

    here is what Chrome gives me
    <td class="RelatedAssoc">
                        <div style="width: 100%">
                             
                            <input type="hidden" id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4H" name="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4H" value="0|0"><div class="dxisControl" id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4" style="width: 760px; height: 505px;" tabindex="0">
     
                <div class="dxis-passePartout" style="width: 660px; height: 452px;"><div class="dxis-imageArea" style="top: 0px; width: 660px; height: 452px;"><div class="dxis-slidePanel" style="width: 660px; height: 452px; left: 0px;"><div class="dxis-item" style="background-image: url(http://localhost:54919/DXR.axd?r=1_10-VUGi8); width: 660px; height: 452px; left: 0px;">
                                            <div id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_upByYearLine">
         
                                                    <div id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1" class="RadChart" style="height:300px;width:400px;">
            <!-- 2013.3.1324.45 --><img alt="" style="border-width: 0px;" usemap="#imctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1" src="ChartImage.axd?UseSession=true&ChartID=f9346d72-6c99-42d1-86ef-4fc2574f78d9_chart_ctl00$MainCallbackPanel$ContentCallbackPanel$ContentPanel$ContentPlaceHolder$ASPxImageSlider4$IT0$ByYearLine$RadChart1&imageFormat=Png&random=b22ebc39-5499-4fa2-9719-29474411c6c3" onerror="if(confirm('Error loading RadChart image.\nYou may also wish to check the ASP.NET Trace for further details.\nDisplay stack trace?'))window.location.href=this.src;"><input id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1_ClientState" name="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1_ClientState" type="hidden">
        </div>
     
     
    <div id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1" style="display:none;position:absolute;">
            <div id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1RTMPanel">
     
            </div><input id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1_ClientState" name="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1_ClientState" type="hidden">
        </div>
                                                 
    </div>
                                        </div></div></div><div class="dxis-playPauseBtnWrapper" style="opacity: 0.30000001192092896;"><div class="dxWeb_isPlayBtn dxis-playPauseBtn">
     
    </div><div class="dxWeb_isPauseBtn dxis-playPauseBtn" style="display: none;">
     
    </div></div></div><div class="dxis-nbDotsBottom" style="width: 660px; height: 13px;"><div class="dxis-nbSlidePanelWrapper" style="width: 660px; height: 13px;"><div class="dxis-nbSlidePanel" style="width: 13px; height: 13px; left: 323.5px;"><div id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_dot_0" class="dxWeb_isDot dxis-nbDotItem dxis-nbDotItemSelected dxWeb_isDotSelected" savedselectedstateitemsrc="[object Object]" src="/DXR.axd?r=1_10-VUGi8" savedselectedstateitemclassname="dxWeb_isDot dxis-nbDotItem dxis-nbDotItemSelected" style="width: 13px; height: 13px; left: 0px;"></div></div></div></div></div><script id="dxss_2141877661" type="text/javascript">
    <!--
     
    var dxo = new ASPxClientImageSlider('ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4');
    window['ImageSlider4'] = dxo;
    dxo.uniqueID = 'ctl00$MainCallbackPanel$ContentCallbackPanel$ContentPanel$ContentPlaceHolder$ASPxImageSlider4';
    dxo.Init.AddHandler(OnInit);
    dxo.hasTemplates = true;
    dxo.imageLoadMode = 0;
    dxo.itemClasses = 'dxis-item';
    dxo.imageAreaClasses = 'dxis-imageArea';
    dxo.imageSizeMode = 2;
    dxo.navigationBtnsVisibility = 0;
    dxo.itemTextAreaClasses = 'dxis-itemTextArea';
    dxo.playPauseButtonVisibility = 1;
    dxo.playBtnHtml = '<div class="dxWeb_isPlayBtn dxis-playPauseBtn">\r\n\r\n</div>';
    dxo.pauseBtnHtml = '<div class="dxWeb_isPauseBtn dxis-playPauseBtn">\r\n\r\n</div>';
    dxo.navigationBarClasses = 'dxis-nbDotsBottom';
    dxo.navigationBarMode = 1;
    dxo.dotBtnHtml = '<div class="dxWeb_isDot dxis-nbDotItem">\r\n\r\n</div>';
    dxo.dotItemHoverClasses = 'dxis-nbDotItemHover';
    dxo.dotItemHoverSpriteObj = ({'spriteCssClass':'dxWeb_isDotHover'});
    dxo.dotItemPressedClasses = 'dxis-nbDotItemPressed';
    dxo.dotItemPressedSpriteObj = ({'spriteCssClass':'dxWeb_isDotPressed'});
    dxo.dotItemSelectedClasses = 'dxis-nbDotItemSelected';
    dxo.dotItemSelectedSpriteObj = ({'spriteCssClass':'dxWeb_isDotSelected'});
    dxo.thumbnailNavigationBtnsVisibility = 0;
    dxo.InlineInitialize();
     
    //-->
    </script><script id="dxss_494449719" type="text/javascript">
    <!--
    dxo.items = [{'template':'\r\n                                        <div id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_upByYearLine">\r\n\t\r\n                                                <div id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1" class="RadChart" style="height:300px;width:400px;">\r\n\t\t<!-\- 2013.3.1324.45 -\-><img alt=\'\' style=\'border-width: 0px;\' usemap=\'#imctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1\' src=\'ChartImage.axd?UseSession=true&ChartID=f9346d72-6c99-42d1-86ef-4fc2574f78d9_chart_ctl00$MainCallbackPanel$ContentCallbackPanel$ContentPanel$ContentPlaceHolder$ASPxImageSlider4$IT0$ByYearLine$RadChart1&imageFormat=Png&random=b22ebc39-5499-4fa2-9719-29474411c6c3\' onerror="if(confirm(\'Error loading RadChart image.\\nYou may also wish to check the ASP.NET Trace for further details.\\nDisplay stack trace?\'))window.location.href=this.src;" /><input id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1_ClientState" name="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1_ClientState" type="hidden" />\r\n\t</div>\r\n\r\n\r\n<div id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1" style="display:none;position:absolute;">\r\n\t\t<div id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1RTMPanel">\r\n\r\n\t\t</div><input id="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1_ClientState" name="ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1_ClientState" type="hidden" />\r\n\t</div>\r\n                                            \r\n</div>\r\n                                    '}];
     
    //-->
    </script>
                        </div>
                    </td>
    Would love to get your thoughts on this one. 

    Thanks,
    Denis 
  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 13 Mar 2014 Link to this post

    Hi Denis,

    Please find below an example on how this can be achieved with RadChart inside RadSplitter.
    JavaScript:
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function ResizeChart(sender, args) {
                var chart = $get("<%= RadChart1.ClientID %>");
                var chartimg = chart.getElementsByTagName("img")[0];
                chartimg.setAttribute("width", sender.get_width() + "px");
                chartimg.setAttribute("height", sender.get_height() + "px");
            }
        </script>
    </telerik:RadScriptBlock>
    ASPX:
    <telerik:RadSplitter ID="RadSplitter1" runat="server">
        <telerik:RadPane ID="LeftPane" runat="server" Width="10px" Scrolling="none">
        </telerik:RadPane>
        <telerik:RadSplitBar ID="Radsplitbar2" runat="server"></telerik:RadSplitBar>
        <telerik:RadPane ID="MiddlePane1" runat="server" Height="800px" Width="600px">
            <telerik:RadSplitter ID="Radsplitter3" runat="server" Height="100%" Width="100%"
                Orientation="Horizontal">
                <telerik:RadPane ID="Radpane4" runat="server" Height="100%" Width="100%" Scrolling="none"
                    OnClientResized="ResizeChart">
                    <telerik:RadChart ID="RadChart1" runat="server">
                        <Series>
                            <telerik:ChartSeries>
                                <Items>
                                    <telerik:ChartSeriesItem YValue="3">
                                    </telerik:ChartSeriesItem>
                                    <telerik:ChartSeriesItem YValue="6">
                                    </telerik:ChartSeriesItem>
                                    <telerik:ChartSeriesItem YValue="2">
                                    </telerik:ChartSeriesItem>
                                    <telerik:ChartSeriesItem YValue="1">
                                    </telerik:ChartSeriesItem>
                                    <telerik:ChartSeriesItem YValue="5">
                                    </telerik:ChartSeriesItem>
                                    <telerik:ChartSeriesItem YValue="4">
                                    </telerik:ChartSeriesItem>
                                </Items>
                            </telerik:ChartSeries>
                        </Series>
                    </telerik:RadChart>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="Radpane5" runat="server" Height="50px">
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>

    You can also find the full runnable VS example in the attached archive.

    Regards,
    Danail Vasilev
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017