This is a migrated thread and some comments may be shown as answers.

100% Width

10 Answers 288 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Heath
Top achievements
Rank 1
Heath asked on 12 Jun 2012, 12:00 AM
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

10 Answers, 1 is accepted

Sort by
0
Heath
Top achievements
Rank 1
answered on 12 Jun 2012, 12:02 AM
I have found that  style="left: 10px; right: 10px;" will work
but please advise on the 100% width.
0
Marin Bratanov
Telerik team
answered on 12 Jun 2012, 11:50 AM
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.
0
JEONG
Top achievements
Rank 1
answered on 20 Jun 2012, 09:24 AM
Could you show some sample? I tried Client-SIde API, but it doesn't work. only div size was resized.


0
Marin Bratanov
Telerik team
answered on 21 Jun 2012, 11:24 AM
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.
0
Filupa
Top achievements
Rank 1
answered on 11 Dec 2012, 08:09 PM
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
0
Asutosh
Top achievements
Rank 1
answered on 23 May 2014, 10:46 AM
hi 
can u explain in brief?
0
infoweshanney
Top achievements
Rank 2
answered on 21 Nov 2014, 04:40 PM
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.$);
0
Thomas
Top achievements
Rank 1
answered on 24 Nov 2014, 11:39 AM
Thanks for your solution, it works great!
0
Danail Vasilev
Telerik team
answered on 25 Nov 2014, 02:43 PM
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.

 
0
infoweshanney
Top achievements
Rank 2
answered on 25 Nov 2014, 03:54 PM
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.$);
Tags
Chart (HTML5)
Asked by
Heath
Top achievements
Rank 1
Answers by
Heath
Top achievements
Rank 1
Marin Bratanov
Telerik team
JEONG
Top achievements
Rank 1
Filupa
Top achievements
Rank 1
Asutosh
Top achievements
Rank 1
infoweshanney
Top achievements
Rank 2
Thomas
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or