TomNeyland / angular-dc

AngularJS directives for dc.js
http://tomneyland.github.io/angular-dc/
MIT License
112 stars 58 forks source link

chart stacking #19

Open bwinchester opened 10 years ago

bwinchester commented 10 years ago

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 commented 10 years ago

@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 commented 10 years ago

Is this fixed now?

TomNeyland commented 10 years ago

@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 https://github.com/TomNeyland/angular-dc/issues/15#issuecomment-52341163 (nested directives) would make sense. Feel free to chime in.

christianmalek commented 10 years ago

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.