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