Ticket Q497183
Visible to All Users

A problem with resizing a dxChart

created 12 years ago

Hello,

I have a problem with dxChart I cannot solve.

My goal is to resize the chart in his container when hiding/showing elements surrounding it, so it always takes the whole container area.

I found a couple of bad solutions. One is to use:

$("#container").dxChart("instance")._render();

on each surrounding element resize event. This is not an acceptable solution because the _render() method is too slow and causes UI to stutter and freeze for a short time, plus the graph has animation, and it is always re-animated when _render() is used.

The other solution was to use

redrawOnResize: true,

on dxChart, and resize the browser window. This causes the graph to redraw nicely and fit the available area when actually resizing the browser window. The idea from this was to call browser window resize event manually, so the graph would think the browser is resized and would redraw itself. However, this doesnt work. I tried couple of methods of firing the browser resize event:

// doesn't work
window.onresize();

// doesn't work
$(window).trigger('resize');

// doesn't work
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);

Basically I want to call the resize function that is called on dxChart when redrawOnResize is used and the browser is actually resized.

Thank you for you help.

Igor

Answers approved by DevExpress Support

created 12 years ago (modified 12 years ago)

Hi Igor!

If you want to emulate Chart reaction on window resize event you can call the following method:

JavaScript
DevExpress.utils.windowResizeCallbacks.fire();

Please take special note that this code uses a non-public API. This means that it can be changed at any moment.

    Show previous comments (1)
    DevExpress Support Team 12 years ago

      Firing DevExpress.utils.windowResizeCallbacks callback should work if the chart's 'redrawOnResize' option is set to true.
      By the way, your code also works. It just differs a bit from our realization: we clear the timeout if a new resize event occurs.

      You also can reinitiate a timeout on every surrounding element visibility change.

        We are experiencing the same issue and opted to use the _render(…) function. This is, of course, not the solution we hope for, especially since the documentation specifies a public render function for exactly this purpose: `http://chartjs.devexpress.com/Documentation/ApiReference/dxChart/Methods#renderrenderOptions`. This does not seem to be implemented, however, and throws a javascript exception.

        DevExpress Support Team 11 years ago

          Hi Tom,
          We kindly ask you not to post your questions to the tickets that were created by other customers. If you wish to discuss any problem, please create a new thread. Post all messages regarding this issue in this ticket The dxChart.render throws an error.

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.