100% Width

11 posts, 0 answers
  1. Heath
    Heath avatar
    4 posts
    Member since:
    May 2012

    Posted 11 Jun 2012 Link to this post

    I have entered 100% width and it is not working.  It shows the graph as 10px wide.
    I was expecting this version would support 100% width given that it is not reliant on images.

    Please let me know.

    Thanks
  2. Heath
    Heath avatar
    4 posts
    Member since:
    May 2012

    Posted 11 Jun 2012 Link to this post

    I have found that  style="left: 10px; right: 10px;" will work
    but please advise on the 100% width.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 12 Jun 2012 Link to this post

    Hello Heath,

    A chart (not just a web one, you can take Excel for example) is static - it has a given size and it does not change together with the browser window, program window, etc. A Chart is used for showing data and thus if its dimensions vary constantly with page layout changes or browser viewport changes the control would not look well and would not be usable. This is the reason why the RadHtmlChart does not support size set in percent and treats the values like pixels. Once rendered it has the static dimensions that are provided in the code.

    What you can do is to use its client-side API and set its width (and/or height) to the desired value on the client - you can obtain the dimensions of its container via JavaScript and use the chart's set_width() and set_height() methods. Further, you could attach to the window.resize event and call this function again (I would advise that you look in the net for solutions that delay the execution until the resize is finished to avoid calling the function several hundred times per second).


    Kind regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. JEONG
    JEONG avatar
    2 posts
    Member since:
    May 2012

    Posted 20 Jun 2012 Link to this post

    Could you show some sample? I tried Client-SIde API, but it doesn't work. only div size was resized.


  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 21 Jun 2012 Link to this post

    Hello Jeong,

    Here follows a simple example of this logic:
    <div id="chartHolder" style="display: none; width: 50%; height: 300px;">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries>
                        <Items>
                            <telerik:SeriesItem YValue="15" />
                            <telerik:SeriesItem YValue="4" />
                            <telerik:SeriesItem YValue="23" />
                            <telerik:SeriesItem YValue="6" />
                        </Items>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
    <asp:Button ID="Button1" Text="show the div containing the chart and resize the chart"
        OnClientClick="showAndResize(); return false;" runat="server" />
    the relies on the following script:
    function showAndResize()
    {
        var wrapper = $get("chartHolder");
        wrapper.style.display = "";
        var chart = $find("<%=RadHtmlChart1.ClientID %>");
        //gets the size of the wrapper of the chart. Can be done in any way you find comfortable
        var size = $telerik.getBounds(wrapper);
     
        chart.set_width(size.width);
        chart.set_height(size.height);
    }

    The attached video shows how this behaves on my end. I hope this helps.

    Regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Filupa
    Filupa avatar
    10 posts
    Member since:
    Nov 2012

    Posted 11 Dec 2012 Link to this post

    I need dynamically resize the Chart, so I solve the problem with javascript .

    1°. All the chart are in UpdatePanel

    2°. The UpdatePanel trigger with click of the button (btn_Button1)

    3° I use this js code:
    window.onload = function () {
      document.getElementById("Body").onresize = functionOnResizeEnd;
    }
    var functionOnResizeEnd = function () {
      var throttleTimer;
      return function (event) {
        throttleTimer = (!!throttleTimer) ? window.clearTimeout(throttleTimer) : null;
        throttleTimer = window.setTimeout(function () {
      
          if (document.getElementById("btn_button1") != null)
            document.getElementById("btn_button1").click();
      
        }, 500);
      };
    } ();


    I hope this help anyone
  8. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 23 May 2014 in reply to Filupa Link to this post

    hi 
    can u explain in brief?
  9. Wes
    Wes avatar
    9 posts
    Member since:
    Aug 2014

    Posted 21 Nov 2014 Link to this post

    This is an old post, but I figured I would chip in my two cents as I do not see why a chart made in Scalable Vector Graphics, would not be inherently scalable.

    I decided to use jQuery and the window.resize event, along with classes and intelligent size detection to automatically redraw my graphs if their parent's size changes.

    (function($)
    {
        $(document).ready(function()
        {
            var $window = $(window);
            var intLastResize = null;
            var blnResizing = false;
     
            //find our charts
            var $colCharts = $(".k-chart");
     
            //loop through each of our charts
            $colCharts.each(function(intIndex, divChart)
            {
                var $divChart = $(divChart);
     
                //get our immediate parent
                var $hgcParent = $divChart.parent();
     
                //record the width
                $divChart.attr("data-parent-width", $hgcParent.width());
            });
     
            //override svg widths
            setInterval(function()
            {
                //find our charts
                var $colSVGs = $(".k-chart svg");
     
                //loop through each of our charts
                $colSVGs.each(function(intIndex, svgChart)
                {
                    var $svgChart = $(svgChart);
     
                    //override width
                    $svgChart.attr("width", "100%");
     
                    //clean up
                    delete $svgChart;
                });
     
                //clean up
                delete $colSVGs;
            }, 1000);
     
            //when the window resizes, call the repaint function to redraw the graphs
            $window.on("resize", function()
            {
                //update the last resize time
                intLastResize = (new Date()).getTime();
     
                if (blnResizing)
                {
                    return;
                }
     
                //indicate that we have a resize timer going
                blnResizing = true;
     
                //thread to check if we should trigger the resize
                var intThreadID = setInterval(function()
                {
                    if (intLastResize + 400 <= (new Date()).getTime())
                    {
                        //find our charts
                        var $colCharts = $(".k-chart");
     
                        //loop through each of our charts
                        $colCharts.each(function(intIndex, divChart)
                        {
                            var $divChart = $(divChart);
     
                            //find the telerik control
                            var rhcChart = $find($divChart.attr("id"));
     
                            //get our immediate parent
                            var $hgcParent = $divChart.parent();
     
                            //get our parent width
                            var intParentWidth = parseInt($divChart.attr("data-parent-width"));
                            if (isNaN(intParentWidth))
                            {
                                intParentWidth = 0;
                            }
     
                            try
                            {
                                if ($hgcParent.width() != intParentWidth)
                                {
                                    //repaint
                                    rhcChart.repaint();
     
                                    //record the width
                                    $divChart.attr("data-parent-width", $hgcParent.width());
                                }
                            }
                            catch (e)
                            {
                                //fail silently
                            }
     
                            //mark that we're not resizing
                            blnResizing = false;
     
                            //cancel our thread
                            clearInterval(intThreadID);
     
                            //clean up
                            delete $divChart;
                            delete rhcChart;
                            delete $hgcParent;
                            delete intParentWidth;
                        });
     
                        //clean up
                        delete $colCharts;
                    }
                }, 100);
            });
        });
    })($telerik.$);
  10. Thomas
    Thomas avatar
    22 posts
    Member since:
    Mar 2011

    Posted 24 Nov 2014 in reply to Wes Link to this post

    Thanks for your solution, it works great!
  11. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 25 Nov 2014 Link to this post

    Hi All,

    You may also find useful the RadHtmlChart in a Responsive Web Page code library.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  12. Wes
    Wes avatar
    9 posts
    Member since:
    Aug 2014

    Posted 25 Nov 2014 in reply to Danail Vasilev Link to this post

    Let me jazz up your example with some jQuery and intelligent size detection.

    (function($)
    {
        $(document).ready(function()
        {
            var $window = $(window);
            var intLastResize = null;
            var blnResizing = false;
     
            //when the window resizes, call the repaint function to redraw the graphs
            $window.on("resize", function()
            {
                //update the last resize time
                intLastResize = (new Date()).getTime();
     
                if (blnResizing)
                {
                    return;
                }
     
                //indicate that we have a resize timer going
                blnResizing = true;
     
                //thread to check if we should trigger the resize
                var intThreadID = setInterval(function()
                {
                    if (intLastResize + 300 <= (new Date()).getTime())
                    {
                        //find our charts
                        var $colCharts = $(".k-chart");
     
                        //loop through each of our charts
                        $colCharts.each(function(intIndex, divChart)
                        {
                            var $divChart = $(divChart);
     
                            //find the telerik control
                            var rhcChart = $find($divChart.attr("id"));
     
                            //get our immediate parent
                            var $hgcParent = $divChart.parent();
     
                            //get our parent width
                            var intParentWidth = parseInt($divChart.attr("data-parent-width"));
                            if (isNaN(intParentWidth))
                            {
                                intParentWidth = 0;
                            }
     
                            //get our parent height
                            var intParentHeight = parseInt($divChart.attr("data-parent-height"));
                            if (isNaN(intParentHeight))
                            {
                                intParentHeight = 0;
                            }
     
                            try
                            {
                                if ($hgcParent.width() != intParentWidth || $hgcParent.height() != intParentHeight)
                                {
                                    //repaint
                                    rhcChart._chartObject.resize();
     
                                    //record the width
                                    $divChart.attr("data-parent-width", $hgcParent.width());
     
                                    //record the height
                                    $divChart.attr("data-parent-height", $hgcParent.height());                                     
                                }
                            }
                            catch (e)
                            {
                                //fail silently
                            }
     
                            //clean up
                            delete $divChart;
                            delete rhcChart;
                            delete $hgcParent;
                            delete intParentWidth;
                        });
     
                        //mark that we're not resizing
                        blnResizing = false;
     
                        //cancel our thread
                        clearInterval(intThreadID);
     
                        //clean up
                        delete $colCharts;
                    }
                }, 100);
            });
        });
    })($telerik.$);
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017