100% Width

[Heath]

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

[Heath]

I have found that  style="left: 10px; right: 10px;" will work
but please advise on the 100% width.

[Marin Bratanov]

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

[JEONG]

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

[Marin Bratanov]

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

[Filupa]

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

[Asutosh]

hi 
can u explain in brief?

[infoweshanney]

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.$);

[Thomas]

Thanks for your solution, it works great!

[Danail Vasilev]

Hi All,

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

Regards,
Danail Vasilev
Telerik

 

 

[infoweshanney]

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.$);