Comments (14)
whats the configuration like?
from angularjs-nvd3-directives.
@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.
from angularjs-nvd3-directives.
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.
from angularjs-nvd3-directives.
I'm struggling with this as well. Would appreciate more information regarding how to trigger a redraw.
from angularjs-nvd3-directives.
@atihkin Ok. I will add it to the list. :)
from angularjs-nvd3-directives.
@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);
}
}
});
from angularjs-nvd3-directives.
@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?
from angularjs-nvd3-directives.
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
.
from angularjs-nvd3-directives.
@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.
from angularjs-nvd3-directives.
@nikolawannabe
You can access the nvd3 chart through the 'nv' object. The charts are stored on the graph array (if I remember correctly).
from angularjs-nvd3-directives.
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!
from angularjs-nvd3-directives.
@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.
from angularjs-nvd3-directives.
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.
from angularjs-nvd3-directives.
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
from angularjs-nvd3-directives.
Related Issues (20)
- how to i18n
- Custom data field names for sunburst..?
- How to achieve horizontal interactive guide line in nvd3 charts
- Need a vertical scroll in multiBarHorizontalChart if no. of bars increases
- How to i get data when iam click on pie chart HOT 2
- Discretebar Chart HOT 1
- Is there a way to save the graph and/or all its data to an xml or xmls ?
- TypeError: nv.dispatch.render_start is not a function HOT 2
- Pie Chart Label Lines with angular-nvd3
- Cannot read property 'disabled' of undefined
- Wrap long axis labels
- TypeError: nv.dispatch.render_start is not a function HOT 1
- Tooltip Not Hide while clicking outside of chart element in IPAD Devices
- Gradient color
- Format of focus chart x axis in "lineWithFocusChart" HOT 2
- Interactive Guideline Not showing on all the data points
- Fixed Labels on xAxis
- When selecting/deselecting legends with multi lines on line chart the lines start showing incorrect colors
- Cannot output data to another component using angular 2 custom event @Output()
- Discrete Bar chart tooltip customize
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angularjs-nvd3-directives.