Angular nvd3 Line Chart automatic resizing

Question

I'm using angular nvd3 directives.

according to the exemple :https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives/blob/master/examples/lineChart.with.automatic.resize.html

<!--
width and height are removed from the directive for automatic resizing.
-->

Well, if I change The Div size of the graph. it resize but only when I move/open/close the 'console view' (ctrl + shift + i on FF).

I check on angular-nvd3-directive, There is no event call for the resize, so I suppose it's a d3/nvd3 comportement?

My question so far: How to simulate this kind of event for the graph to resize?

Maidenhair

Could you put the code you have into a fiddle or jsbin? – Seger

Answer 1

You could try firing another resize event which could repaint the graph. window.dispatchEvent(new Event('resize'));

A similar approach worked for me with Chart.js. It's odd when the console being visible changes the page - still don't fully understand how that works but it shows up regularly with dynamic layouts.

Seger

The way I do was a bit tricky. But I use your line and it work well. Is there a way i give you back the bounty ? – Maidenhair

Glad it worked. Nope, unfortunately bounties have a time expiration. – Seger

The reason the console visibility changes the page is because, if they are docked, toggling the developer tools resizes the browser window and dispatching a resize event. Same thing if you resize by dragging the edges of the browser window to change its dimensions. – Iconoscope

Answer 2

I am not sure it will help you or not but I guess you can update the graph while your div resize it works in my case:-

For example:-

$('#my_div').bind('resize', function(){

            for (var i = 0; i < nv.graphs.length; i++) {
                nv.graphs[i].update();
            }

});

Illomened

Answer 3

You can add a jquery resize event handler, if you are not using jquery then you can attach event handler using angular only.

Using jQuery

$(document).on('resize', function() {

  for (var i = 0; i < nv.graphs.length; i++) {
    nv.graphs[i].update();
  }

});

Using Angular Only

Here is an example shows how to attach event do document using angular.

Goodrich