Charts does not resize when using a screen toggle (e.g. toggle-able side bar)

[amcpanaligan]

So basically I have a side bar on the left, and a content on the right.

Right one has the chart, while Left one has the filters. I make the sidebar toggle-able for the users to be able to have larger view of the charts on the right. But when I toggle the left sidebar. The chart doesn't seem to occupy the whole screen (which is the whole right side by now). However, other bootstrap components such as tables expands and occupies the whole screen (right side, because left side, the side bar is toggled).

How do I make the chart resize? When resizing using the browser minimize or simply dragging to resize the corners of the browser, it works perfectly.

Thanks!

[nabbl]

I have the same problem. Same thing happens when going from bootstrap container to bootstrap container-fluid. The charts just wont resize even if you have "resize = true" defined for each chart.

What works though is when you launch redraw() on each chart (or rebind the data with setData()).

But this is hard to accomplish for me because I have a completely responsive grid with and undefined amount of charts.

EDIT: One other way to do it: Put resize=true on all the charts and Trigger a window resize event in Jquery when the charts should be automatically resized: $(window).trigger('resize');

worked for me now. Need to test performance though

[amcpanaligan]

@nabblschnur Wow!!! Thanks mate! This worked like charm. I haven't thought of this trick. If it resizes on window/browser resize, why not trigger it then. Though as you said performance should be considered. However this could count as a temporary solution!

[nabbl]

No problem. Glad to be able to help.

If you (or anybody else) is using angularJS with Morris.

The best way would be to pass an additional parameter (toggle-like) to the Morris directive and have a $watch on it when it should redraw(). This is like a refresh function.

Grid Layout changes -> switch toggle in controller -> Directive reacts on changed parameter and you redraw the chart.

If anybody needs detailed code I can of course provide it.

[xavhan]

@nabblschnur : I'm pretty interested by your angular way of doing it :)

[alicesaw]

@nabblschnur : Hi, I am having problem with toggle side menu, redraw chart.. need your detail code to see how you did it.. thanks.

[Hujjat]

But i didn't work for me :(