Resizing chart on browser resize

[Paul]

Hi there

I am using the MVC chart control and it is inside a div element which expands and contracts horizonatally when the browser is resized. The vertical size is fixed using the HtmlAttributes.

I have some JavaScript attached to the window resize event as follows: -

    function resizeChart() {
        var chart = $('#chtIssueStats').data('tChart');
        chart.refresh();
    };

    var resizeTimer;
    $(window).resize(function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(resizeChart, 1000);
    });

When the browser window is resized the script is called fine and I can see the Ajax postback for the data for the chart and therefore I know the refresh is happening. However, the image stays the same width and does not adjust to the new width of the resized div that it is hosted in.

According to the documentation the 'refresh' method is supposed to refresh the data and repaint the chart but either the repaint is not happening or it is not picking up the new width to draw with.

Can you suggest a solution please?

Regards
Paul

[Hristo Germanov]

Hi Paul,

Thank you for contacting us.

Can you try to set width and height to the chart options:

var chart = $("#chart").data("tChart");
chart.options.chartArea.width = 200;
chart.options.chartArea.height = 200;
chart.refresh();

Then you can call the "refresh" method.

Kind regards,
Hristo Germanov
the Telerik team

[Mike]

Hristo,

I am looking at the same issue, but the refresh call only works if the window is growing, not if the window is shrinking. Is there something else that needs to be done to get this to work properly in both directions?

Thanks,
Mike

[Mike]

I got it working by setting h/w values instead of using percentages in the style sheet. Here is the code that works.

$(document).ready(function () {
    $(window).bind('resize', resizeChart);
});

function resizeChart() {
    try {
        // we have a partial (242px) and a logo/banner (96px) on top
        var h = $(window).height() - (242 + 96);
        // we have margins on a table and div that are 50px on each side
        var w = $(window).width() - 100;

        $('#chtBudget').css('height', h);
        $('#chtBudget').css('width', w);
        $('#chtBudget').data('tChart').refresh();
    }
    catch (e) {
    }
};

I set the CSS attributes directly via the jQuery function. The resizeChart() function gets called at the bottom of the main page where the partial containing the chart is hosted as well as when a resize event happens so that the initial size will fit properly.

Thanks,
Mike

[Jim]

thanks Mike!