Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chart stacking #19

Open
bwinchester opened this issue Sep 5, 2014 · 4 comments
Open

chart stacking #19

bwinchester opened this issue Sep 5, 2014 · 4 comments

Comments

@bwinchester
Copy link

Tom,

I noticed the chart stacking isn't working in the lineChart on your stock examples and I'd like to use stackable charts where possible.

So after line 172 in the source of the directive, I've written a snippet that's working on my end, and I'd like to see what you think about the approach. The .stack() method in dc.js requires 3 arguments, which are the dimension object, the data set's title, and a value accessor function.

I propose using a variable off of the controller's scope that is either an array or an array of arrays, depending on if you are only stacking one additional data dimension or many.

After line 172 in the angular-dc directive I used the following code:

LINE 172: var chart = setupChart(scope, iElement, iAttrs);

                    //if stacking the chart, looking for attr dc-stack
                    if(iAttrs.dcStack){
                        var stack = scope.$eval(iAttrs.dcStack);
                        if(angular.isArray(stack[0])){
                            _.each(stack,function(arrArgs){
                                chart.stack.apply(chart,arrArgs);
                            });
                        }else{
                            chart.stack.apply(chart,stack);
                        }
                    }

In the controller of stock.js I have a variable showing multiple dimensions being stacked onto the existing lineChart (which happens to be the exact same data/dimension x2):

s.stacking = [[s.monthlyMoveGroup, 'Monthly Index Move', function (d) {return d.value;}],[s.monthlyMoveGroup, 'Monthly Index Move', function (d) {return d.value;}]];

And then on the lineChart element, I just added dc-stack="stacking", attribute and variable from controller scope.

Let me know if there is another way already to do this without additional code, or if you'd like it somewhere else. I can do a pull request if you'd like.

@TomNeyland
Copy link
Owner

@bwinchester thank you for looking into this, I probably won't have a chance to think about/test this locally until midweek next week, but I wanted to let you know that I see this issue.

Do you have a fork/branch with these changes in place?

@christianmalek
Copy link
Contributor

Is this fixed now?

@TomNeyland
Copy link
Owner

@Phisherman Not currently, adding this to my todo list, but I'd also welcome a PR.

I am debating if using a strategy similar to what I describe here #15 (comment) (nested directives) would make sense. Feel free to chime in.

@christianmalek
Copy link
Contributor

I like both approaches (nested directives and attributes). In my opinion you should decide for only one and don't mix them up. Otherwise it will be error-prone and counterintuitive.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants