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?

Could you put the code you have into a fiddle or jsbin? – Dylan Valade Jul 09 '15 at 13:37 — Dylan Valade, Jul 09 '15 at 13:37

score 8 · Accepted Answer · answered Jul 09 '15 at 13:35

8

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.

answered Jul 09 '15 at 13:35

Dylan Valade

5,565
6
42
56

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 ? – ssbb Jul 15 '15 at 07:39
Glad it worked. Nope, unfortunately bounties have a time expiration. – Dylan Valade Jul 20 '15 at 16:18
4

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. – esdot Jan 21 '16 at 20:23

score 1 · Answer 2 · answered Jul 04 '15 at 10:40

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();
            }

});

score 0 · Answer 3 · edited May 23 '17 at 12:17

0

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.

edited May 23 '17 at 12:17

Community

1
1

answered Jul 09 '15 at 11:02

Laxmikant Dange

7,606
6
40
65

Angular nvd3 Line Chart automatic resizing

3 Answers3