Radchart Width in percentage

[shankar]

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

[Evgenia]

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

[Uday]

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

[Denis]

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 

[Danail Vasilev]

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