Comments (13)
cmaurer
commented on September 26, 2024
Let me take a look. Is there a quick example you can post, or put on plnkr?
from angularjs-nvd3-directives.
dexdexdexdexdex
commented on September 26, 2024
I think this should get the basic idea across. I had to modify the angular-nvd3-directives.js file in one spot because it was complaining about staggerlabels in the directive. I have the chart hidden in a tab 2, but it starts out on tab 1. When you navigate to tab 2 you see the rendering issue.
http://plnkr.co/edit/B7fvrI?p=info
There's something weird going on with the interactivity that's not working quite right, but if you hit group or stacked and then resize it you will see that it gets rendered properly.
from angularjs-nvd3-directives.
cmaurer
commented on September 26, 2024
ok, it looks like the activateTab method is somehow causing this. I created another plnkr that has your chart without the tabs (trying to narrow down the problem).
I have not had a chance to dig into the activateTab method to see what might be happening there.
Also, I updated the dependencies to eliminate old dependencies as a potential cause.
from angularjs-nvd3-directives.
cmaurer
commented on September 26, 2024
@dexdexdexdexdex, have you had a chance to take a look at this? Are you still having issues?
Thanks,
Chris
from angularjs-nvd3-directives.
dexdexdexdexdex
commented on September 26, 2024
I'll try relooking at this today, but yes still having problems. I took a look at the plnkr but still couldn't get to the bottom of it unfortunately :(
from angularjs-nvd3-directives.
dexdexdexdexdex
commented on September 26, 2024
@cmaurer I'm still having problems at this point. Is there another way of looking at this that I can help follow up on? Or maybe there's another suggestion out there?
from angularjs-nvd3-directives.
cmaurer
commented on September 26, 2024
@dexdexdexdexdex, I will look at it tonight. Sorry.
Chris
from angularjs-nvd3-directives.
cmaurer
commented on September 26, 2024
@dexdexdexdexdex, after looking at this, I think the quickest thing would be to somehow call the chart in your activateTab method. It's fine when you resize the window, etc. It feels like a shortcut, but I haven't been able to devote any significant amount of time to it.
from angularjs-nvd3-directives.
dexdexdexdexdex
commented on September 26, 2024
Yeah I think that's how all of the other folks solved it in nv.d3 posts, but could you maybe show it in the plnkr? I'm not 100% sure how to actually implement that.
from angularjs-nvd3-directives.
cmaurer
commented on September 26, 2024
Ok,
This will do it. Create a function on the controller that calls nv.graphs[0].update();. This is the function that is called when any update to the window is made. Call it from the activateTab() call.
I have an example that uses angular-bootstrap that I will push. issue37.html.
The refresh method needs to iterate through all the graphs, or call a specific graph rather than the hardcoded '[0]'. I think thats obvious, but I thought I would call it out.
refresh function
$scope.refresh = function(chartid){
nv.graphs[0].update();
}html
<body ng-app='nvd3TestApp'>
<div ng-controller="IndicatorsCtrl">
<tabset>
<tab heading="Static title">Static content</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled" select="refresh('id1')">
<!-- nvd3-multi-bar-chart data="indicatorsData" id="id1" width="800" height="400" showlegend="true" showcontrols="true" -->
<nvd3-multi-bar-chart data="indicatorsData" id="id1" width="800" height="400" showlegend="true" showcontrols="true"/>
</tab>
</tabset>
<hr />
</div>from angularjs-nvd3-directives.
cmaurer
commented on September 26, 2024
sorry it took so long. I got squirreled a number of times. :)
from angularjs-nvd3-directives.
dexdexdexdexdex
commented on September 26, 2024
Ok sweet yeah that did end up working. What we had to do was call on a controller above our tab element that could respond to the refresh call on select properly.
from angularjs-nvd3-directives.
cmaurer
commented on September 26, 2024
@dexdexdexdexdex
Ok, glad to hear that worked. I will close.
Thanks,
Chris
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.