Add auto-resize configuration to documentation about angularjs-nvd3-directives

[cstephe]

whats the configuration like?

[cmaurer]

@cstephe
Actually there isn't configuration. The 'auto resize' kicks in when a width and height are not specified as attributes. Thats the expected behavior. I think I originally meant this to document that behavior.

[nikolawannabe]

I'd like to see more information on this as well. I'm using the auto-resize on width, with a toggle button to switch between showing/hiding different graphs using ng-show. It appears to be rendering the hidden graph with a zero-width though since it isn't displayed, which makes sense. I don't know how to give the renderer a "kick" to notify it that the width of the newly-shown graph should be re-calculated when the property controlling the ng-show value changes.

Any help would be appreciated.

[atihkin]

I'm struggling with this as well. Would appreciate more information regarding how to trigger a redraw.

[cmaurer]

@atihkin Ok. I will add it to the list. :)

[atihkin]

@nikolawannabe for me, adding this snippet of code to the angularjs-nvd3-directive made it work! I used it for the height of a line plus bar chart, but it should work just as easily for the width.

scope.$watch('height',function(height) {
if (height) {
if (scope.chart) {
return scope.d3Call(scope.data, scope.chart);
}
}
});

[nikolawannabe]

@atihkin I'm confused by your snippet. chart is not in scope in my controller. It appears to be the chart created by nvd3. How would I get access to that object from my controller?

Also, d3Call is not in scope. I found a simple example so I just backfilled it, but your snipped seems to assume it is already there?

Or are you directly modifying the code in the directives where both are already defined?

[atihkin]

I should have made myself a bit clearer. Yes, I went directly into the
source and put these lines into the nvd3 directive for LinePlusBarChart
simply because I had the same doubts you did i.e how would I access the
chart or the d3 call from my own controller/directive? This is more of a
quick and dirty solution, but it works for my application.

Let me know if you're still confused. I'll put in a working example on
github.

On Friday, March 21, 2014, Case Talbot [email protected] wrote:

@atihkin https://github.com/atihkin I'm confused by your snipped. chart
is not in scope in my controller. It appears to be the chart created by
nvd3. How would I get access to that object from my controller?

Also, d3Call is not in scope. I found a simple example so I just
backfilled it, but your snipped seems to assume it is already there?

Or are you directly modifying the code in the directives where both are
already defined?

Reply to this email directly or view it on GitHubhttps://github.com//issues/12#issuecomment-38239158
.

[nikolawannabe]

@atihkin That makes sense but I want to avoid it because we have imported angularjs-nvd3-directives via bower. I want to be able to consume bugfixes and so forth from @cmaurer, and would rather not modify the source. So I guess that I am still on the lookout.

Getting d3Call is no problem as I mentioned. I just don't know how to get a reference to the d3 chart object since it is not exposed. I think in general that being able to pick and tweak the charts from here with a separate utility service, such as 'nvd3DirectivesService' that knows how to grab these references and do common manipulations (like notifying the chart to update on height/width change or when data is updated from an ajax request like this #123) would be super awesome.

[cmaurer]

@nikolawannabe
You can access the nvd3 chart through the 'nv' object. The charts are stored on the graph array (if I remember correctly).

[nikolawannabe]

I'm still having trouble getting auto-resize to work the way I'd like. I guess I don't understand how to utilize the existing nv graph array to do this. I don't see how to identify which graph is the one I'd like to update. I got around it for a while by unnecessarily re-filtering the data but I can't go to prod with that since my datasets are very large. (Yeah, this is more of a nvd3 docs issue than this project. 😸)

I've created a plunkr that shows the scenario I'm trying to enable. The data isn't changing, but the visible chart is. I'd like the width to be auto and the height to be specified for both as per the example, without mucking about with the bound data. You can see the issue is that the line chart is rendering to a width of 0 since it is hidden when it is is initially rendered.

Any help would be greatly appreciated!

[paul-tST]

@nikolawannabe I had the same issue when using ngShow to toggle between different charts using the same data. I swapped ngShow for ngIf and this allowed for the auto-size to work smoothly. Hope this helps.

[nikolawannabe]

I ended up having serious issues with IE9-11 support with the built-in resize code - you can also see this on the github.io page for this project. I swapped all of the height/width/resize logic out in favor of putting a defined height and width:100% on the svg element itself, and that worked out pretty well.

For reference, the IE9-11 issues seem to be caused by both nvd3 and bootstrap making a fix for IE broken handling of the default overflow element on SVGs.

[Rathode]

i too got the similar issue.Iam placing my charts in resizable div.on resize the width is resizing as per it's parent div.but height is not resizable.I have tried giving
style="height: 100% !important; width:100%;" to svg
in my template.Iam also getting my angularjs-nvd3-directives.js via bower as @nikolawannabe said.
Template in my directive is:




In this if I removed height attribute then the chart is rendering too small and that too not resizable also.Thankyou