Do you happen to have an example?

@tardyp

I went to register angular-dc with bower but noticed you had already registered the name, can you point bower to the main repository?

I need to wait for an API call to return before generating the chart; however its not clear how to do this.

Thanks!

Liz

Hi,

I'm trying to set a selection range via my controller, but I can't seem to find how to do this.

I can set a filter $scope.dimension.filter([new Date('2015-08-11'), new Date('2016-08-11')]);
but this creates this:

instead of

Any suggestions on how to set the range?

this is the function that processes the data

function processData() {
    // set date via key
    data.forEach(function (d) {
        d.dd = new Date(d.key);
    });

    // set data
    $scope.ndx = crossfilter(data);
    // get all
    $scope.all = $scope.ndx.groupAll();
    // get dimension
    $scope.dimension = $scope.ndx.dimension(function (d) {
        return d.key;
    });


    // get first and last date
    var scaleStart = $scope.dimension.bottom(1)[0].dd;
    var scaleStop = $scope.dimension.top(1)[0].dd;
    // add some extra months
    var difference = monthDiff(scaleStart, scaleStop) / 6;
    scaleStart.setMonth(scaleStart.getMonth() - difference);
    scaleStop.setMonth(scaleStop.getMonth() + difference);

    // set scale
    $scope.scale = d3.time.scale().domain([scaleStart, scaleStop]);

    // group by count
    $scope.orderdbycount = $scope.dimension.group().reduceSum(function (d) {
        return d.doc_count;
    });
}

When I set a chart group, collective chart filtering seemed to stop working.
My initial syntax was:

<div dc-chart-group="records" dc-chart="barChart"  ...>

This is used directly in chartFactory(chartElement, chartGroupName) on line 34, but then calls chartGroup(undefined) in getOptionsFromAttrs() on line 83, because "records" is presumably interpreting it as a variable on the scope.

Changing the line 34 call would make the scope.$eval call consistent:

var chart = chartFactory(chartElement, scope.$eval(chartGroupName))

Then the directive needs to be used with the chart name quoted as follows:

<div dc-chart-group="'records'" dc-chart="barChart"  ...>

When attempting to configure dc Listener

Receive a "unable to evaldcOn:'filtered', filterCalled();" error when configuring the .on listener:

Syntax Error: Token ',' is an unexpected token at column 11 of the expression ['filtered', filterCalled();] starting at [, filterCalled()].

//Function within controller scope:
$scope.filterCalled = function() {
console.log("Filtered Called ")
}

//Control

<div dc-chart="pieChart "
dc-width="160 "
dc-height="160 "
dc-on="'filtered', filterCalled() "
dc-inner-radius="60 "
dc-dimension="certDim "
dc-group="certGrp "
class="dc-chart "></div>
`

How can I use listener?

I will appreciate an example of .on("filtered", function(chart, filter){...}) with angular-dc.

Thanks!

First, Thanks for the cool Dashboard.

I am trying to use this library in a MEAN stack- I am new to all Web Stacks.
I am trying to run the pie-chart example in MEAN but am getting the above error in the following line

                        var options = _(iAttrs.$attr).keys().filter(function(s) { // Throws error before going into the function.
                            return s.substring(0, 2) === 'dc' && s !== 'dcChart' && s !== 'dcChartGroup';
                        })

This works perfectly fine as an angular app.
When I debug through Firebug, I see that the $attr has values.

The dependencies are

        "bootstrap": "~3",
        "angular": "~1.2",
        "angular-resource": "~1.2",
        "angular-mocks": "~1.2",
        "angular-cookies": "~1.2",
        "angular-animate": "~1.2",
        "angular-touch": "~1.2",
        "angular-sanitize": "~1.2",
        "angular-bootstrap": "~0.11.2",
        "angular-ui-utils": "~0.1.1",
        "angular-ui-router": "~0.2.11",
    "nvd3": "~1.1.15-beta",
    "d3": "~3.5.1",
    "angular-dc": "~0.0.4",
    "crossfilter": "~1.3.0"
  },
  "resolutions": {
    "d3": "~3.5.1"
  }

Please let me know, if any additional details are required.
Thanks

Hi,

I am trying to display a world map with geochoroplethChart but nothing is working.
Do you have any sample?

Thanks!

Hi, I'm banging my head against passing the optional "legend" parameter to a group as in:
https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#groupvalue-name---mandatory

Is there a way to do this with angular-dc? (Disclaimer, I'm pretty new to Angular, so perhaps I'm just missing the $parse foo)

Thanks,
Stephan

How can i filter a dimension based on an input box value ?

using the pie example, i added an inputbox tied to a model called calypso, and from the controller , i'm watching the calypso value change and filtering by that value:

$scope.$watch('calypso', function() {
       console.log(parseInt($scope.calypso,10));
       $scope.runDimension.filter(parseInt($scope.calypso,10));
   });

console.log picks the value change , but the chart doesn't get updated.

Hi, on DC.

Dc.js I can get the chart:
var myChart = dc.lineChart('#my-chart');

But how can I do on angular-dc inside the Controller? I need to put a link to reset a specific Chart out of html of Chart.

Regards.

Hi @TomNeyland ,

Using d3 with AngularJS dependency injection is highly recommend -

d3Service.d3().then(function(d3) {
  // d3 is the raw d3 object
});

So I wonder how do I make it work with a d3Service instead of directly with the d3 instance.

Thanks.

First of all let me complement you on this excellent work you have done wrapping dc.js for use with angular, it was a lifesaver for me. I thought you might be pleased to know that it was fairly seamless for me to use angular-dc with blairn's sunburst chart pull request that isn't even fully merged into masterAPI for dc-js yet dc-js/dc.js#907

Something I was having trouble with was I needed a dropdown to filter all of my charts and so I was happy to find reading through your src that you already had written something to support this. What I didn't realize was that I had specified a chart group of "1" for all of my charts, much like in the Nasdaq example. This being the case, when I used my dc-select dropdown the crossfilter dimensions would update but then the bound chart directives weren't updating until I filtered using one of the other charts.

after a little bit of headscratching, I realized my error was in not adding the dcChartGroup, but looking at the 'dcSelect' code it doesn't seem to support having a chart group as an attribute. I wrote a local fix for it but I don't know if it breaks the default case or has other vulnerabilities to it. Also, following your pattern from dcChart I used iAttrs parameter but since I had to reference it in the callback I am accessing it directly to pass in the argurment to dc.redraw() which feels messy. Here is the modification as I have it (I marked where I modified things with double asterisk comments):

/* Another directive, responsible of integration angular's select directive with dc.

    <dc-select dc-dimension="fooDimension", all-label="All foos"/>

   This directive helps to filter by arbitrary dimensions without need for another graph.

   Note that if there is a graph on the same dimension as the select, changing the select value
   will not update the graph's own selection. This is also the case if you make 2 graphs
   with same dimension. This is a limitation of the underlying lib dc.js
*/

angularDc.directive('dcSelect', [
    function() {
        return {
            restrict: 'E',
            scope: {
                dcDimension: '=',
                allLabel: '@'
            },
            template: '<select class="form-control" ng-model="selectModel" ' + 'ng-options="d.key for d in selectOptions">',
            link: function(scope, iElement, iAttrs) {
                scope.$watch('dcDimension', function(dimension) {
                    /**adding chartGroup parameter here**/
                    var allkeys, chart
                    , chartGroupName = iAttrs.dcChartGroup;
                    if (dimension !== null) {
                        // we make a fake chart so that the dimension is known by dc.filterAll()
                        chart = dc.baseMixin({});
                        chart.dimension(dimension);
                        chart.group(dimension);
                        /**need to add chart to group here and use same param as other directives for chart groups
                        to have selections update other charts in the same group. **/
                        dc.registerChart(chart, chartGroupName)
                        chart._doRender = function() {};
                        chart._doRedraw = function() {};
                        scope.selectModel = {
                            key: scope.allLabel
                        };
                        allkeys = dimension.group().orderNatural().all();
                        scope.selectOptions = [scope.selectModel].concat(allkeys);
                    }
                });
                return scope.$watch('selectModel', function(sel) {
                    if (scope.dcDimension !== null) {
                        if (sel !== null && sel.key !== scope.allLabel) {
                            scope.dcDimension.filter(function(d) {
                                return d === sel.key;
                            });
                        } else {
                            scope.dcDimension.filter(null);
                        }
                        /** Have to pass the chartGroup to dc's redraw function or it will use the default chartGroup**/
                        dc.redrawAll(iAttrs.dcChartGroup);
                    }
                });
            }
        };
    }
]);

Thanks again for publishing this repo and maintaining it. Keep up the good work!

Taylor

Thanks for a great library. I've figured out most of what I've needed to do from the examples and just playing around. However I was wondering if tick formatting was possible. In regular dc.js you can do something like this to format the axis:

var axis_format = d3.time.format("%x");
over_time.width(1050)
.height(350)
.dimension(times)
.group(time_counts)
.xAxis().tickFormat(function(d) { return axis_format(d); });

However, I can't seem to work out specifying axis and format with angular-dc.

Thanks,
Dean

Trying out the 30 second view

i get the following error

gainOrLoss is undefined at http://localhost/bower_components/angular-dc/dist/angular-dc.js:143:43 at Function.Rt (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:23:525) at Q.o.(anonymous function) [as map] (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:29:469) at http://localhost/bower_components/angular-dc/dist/angular-dc.js:137:28 at Scope.$digest (http://localhost/bower_components/angular/angular.js:16219:34) at Scope.$apply (http://localhost/bower_components/angular/angular.js:16492:24) at http://localhost/bower_components/angular/angular.js:18277:36 at completeOutstandingRequest (http://localhost/bower_components/angular/angular.js:5764:10) at http://localhost/bower_components/angular/angular.js:6041:7 (anonymous) @ angular.js:12808 (anonymous) @ angular.js:9555 $digest @ angular.js:16246 $apply @ angular.js:16492 (anonymous) @ angular.js:18277 completeOutstandingRequest @ angular.js:5764 (anonymous) @ angular.js:6041 angular-dc.js:148 unable to evaldcDimension:gainOrLoss angular.js:12808 Error: gainOrLoss is undefined at http://localhost/bower_components/angular-dc/dist/angular-dc.js:143:43 at Function.Rt (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:23:525) at Q.o.(anonymous function) [as map] (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:29:469) at http://localhost/bower_components/angular-dc/dist/angular-dc.js:137:28 at Scope.$digest (http://localhost/bower_components/angular/angular.js:16219:34) at http://localhost/bower_components/angular/angular.js:16423:26 at completeOutstandingRequest (http://localhost/bower_components/angular/angular.js:5764:10) at http://localhost/bower_components/angular/angular.js:6041:7 (anonymous) @ angular.js:12808 (anonymous) @ angular.js:9555 $digest @ angular.js:16246 (anonymous) @ angular.js:16423 completeOutstandingRequest @ angular.js:5764 (anonymous) @ angular.js:6041 angular-dc.js:148 unable to evaldcDimension:gainOrLoss angular.js:12808 Error: gainOrLoss is undefined at http://localhost/bower_components/angular-dc/dist/angular-dc.js:143:43 at Function.Rt (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:23:525) at Q.o.(anonymous function) [as map] (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:29:469) at http://localhost/bower_components/angular-dc/dist/angular-dc.js:137:28 at Scope.$digest (http://localhost/bower_components/angular/angular.js:16219:34) at Scope.$apply (http://localhost/bower_components/angular/angular.js:16492:24) at http://localhost/assets/js/directives/scroll-spy.js:7:17 at dispatch (http://localhost/bower_components/jquery/dist/jquery.min.js:3:7537) at r.handle (http://localhost/bower_components/jquery/dist/jquery.min.js:3:5620) at r._wrapped.r._wrapped (http://localhost/:184:38) (anonymous) @ angular.js:12808 (anonymous) @ angular.js:9555 $digest @ angular.js:16246 $apply @ angular.js:16492 (anonymous) @ scroll-spy.js:7 dispatch @ jquery.min.js:3 r.handle @ jquery.min.js:3 r._wrapped.r._wrapped @ (index):184 angular-dc.js:148 unable to evaldcDimension:gainOrLoss angular.js:12808 Error: gainOrLoss is undefined at http://localhost/bower_components/angular-dc/dist/angular-dc.js:143:43 at Function.Rt (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:23:525) at Q.o.(anonymous function) [as map] (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:29:469) at http://localhost/bower_components/angular-dc/dist/angular-dc.js:137:28 at Scope.$digest (http://localhost/bower_components/angular/angular.js:16219:34) at Scope.$apply (http://localhost/bower_components/angular/angular.js:16492:24) at http://localhost/assets/js/directives/scroll-spy.js:7:17 at dispatch (http://localhost/bower_components/jquery/dist/jquery.min.js:3:7537) at r.handle (http://localhost/bower_components/jquery/dist/jquery.min.js:3:5620) at r._wrapped.r._wrapped (http://localhost/:184:38) (anonymous) @ angular.js:12808 (anonymous) @ angular.js:9555 $digest @ angular.js:16246 $apply @ angular.js:16492 (anonymous) @ scroll-spy.js:7 dispatch @ jquery.min.js:3 r.handle @ jquery.min.js:3 r._wrapped.r._wrapped @ (index):184 angular-dc.js:148 unable to evaldcDimension:gainOrLoss angular.js:12808 Error: gainOrLoss is undefined at http://localhost/bower_components/angular-dc/dist/angular-dc.js:143:43 at Function.Rt (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:23:525) at Q.o.(anonymous function) [as map] (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:29:469) at http://localhost/bower_components/angular-dc/dist/angular-dc.js:137:28 at Scope.$digest (http://localhost/bower_components/angular/angular.js:16219:34) at Scope.$apply (http://localhost/bower_components/angular/angular.js:16492:24) at http://localhost/assets/js/directives/scroll-spy.js:7:17 at dispatch (http://localhost/bower_components/jquery/dist/jquery.min.js:3:7537) at r.handle (http://localhost/bower_components/jquery/dist/jquery.min.js:3:5620) at r._wrapped.r._wrapped (http://localhost/:184:38) (anonymous) @ angular.js:12808 (anonymous) @ angular.js:9555 $digest @ angular.js:16246 $apply @ angular.js:16492 (anonymous) @ scroll-spy.js:7 dispatch @ jquery.min.js:3 r.handle @ jquery.min.js:3 r._wrapped.r._wrapped @ (index):184 angular-dc.js:148 unable to evaldcDimension:gainOrLoss angular.js:12808 Error: gainOrLoss is undefined at http://localhost/bower_components/angular-dc/dist/angular-dc.js:143:43 at Function.Rt (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:23:525) at Q.o.(anonymous function) [as map] (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:29:469) at http://localhost/bower_components/angular-dc/dist/angular-dc.js:137:28 at Scope.$digest (http://localhost/bower_components/angular/angular.js:16219:34) at Scope.$apply (http://localhost/bower_components/angular/angular.js:16492:24) at http://localhost/assets/js/directives/scroll-spy.js:7:17 at dispatch (http://localhost/bower_components/jquery/dist/jquery.min.js:3:7537) at r.handle (http://localhost/bower_components/jquery/dist/jquery.min.js:3:5620) at r._wrapped.r._wrapped (http://localhost/:184:38) (anonymous) @ angular.js:12808 (anonymous) @ angular.js:9555 $digest @ angular.js:16246 $apply @ angular.js:16492 (anonymous) @ scroll-spy.js:7 dispatch @ jquery.min.js:3 r.handle @ jquery.min.js:3 r._wrapped.r._wrapped @ (index):184 angular-dc.js:148 unable to evaldcDimension:gainOrLoss angular.js:12808 Error: gainOrLoss is undefined at http://localhost/bower_components/angular-dc/dist/angular-dc.js:143:43 at Function.Rt (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:23:525) at Q.o.(anonymous function) [as map] (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:29:469) at http://localhost/bower_components/angular-dc/dist/angular-dc.js:137:28 at Scope.$digest (http://localhost/bower_components/angular/angular.js:16219:34) at Scope.$apply (http://localhost/bower_components/angular/angular.js:16492:24) at http://localhost/assets/js/directives/scroll-spy.js:7:17 at dispatch (http://localhost/bower_components/jquery/dist/jquery.min.js:3:7537) at r.handle (http://localhost/bower_components/jquery/dist/jquery.min.js:3:5620) at r._wrapped.r._wrapped (http://localhost/:184:38) (anonymous) @ angular.js:12808 (anonymous) @ angular.js:9555 $digest @ angular.js:16246 $apply @ angular.js:16492 (anonymous) @ scroll-spy.js:7 dispatch @ jquery.min.js:3 r.handle @ jquery.min.js:3 r._wrapped.r._wrapped @ (index):184 angular-dc.js:148 unable to evaldcDimension:gainOrLoss angular.js:12808 Error: gainOrLoss is undefined at http://localhost/bower_components/angular-dc/dist/angular-dc.js:143:43 at Function.Rt (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:23:525) at Q.o.(anonymous function) [as map] (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:29:469) at http://localhost/bower_components/angular-dc/dist/angular-dc.js:137:28 at Scope.$digest (http://localhost/bower_components/angular/angular.js:16219:34) at Scope.$apply (http://localhost/bower_components/angular/angular.js:16492:24) at http://localhost/assets/js/directives/scroll-spy.js:7:17 at dispatch (http://localhost/bower_components/jquery/dist/jquery.min.js:3:7537) at r.handle (http://localhost/bower_components/jquery/dist/jquery.min.js:3:5620) at r._wrapped.r._wrapped (http://localhost/:184:38) (anonymous) @ angular.js:12808 (anonymous) @ angular.js:9555 $digest @ angular.js:16246 $apply @ angular.js:16492 (anonymous) @ scroll-spy.js:7 dispatch @ jquery.min.js:3 r.handle @ jquery.min.js:3 r._wrapped.r._wrapped @ (index):184 angular-dc.js:148 unable to evaldcDimension:gainOrLoss angular.js:12808 Error: gainOrLoss is undefined at http://localhost/bower_components/angular-dc/dist/angular-dc.js:143:43 at Function.Rt (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:23:525) at Q.o.(anonymous function) [as map] (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:29:469) at http://localhost/bower_components/angular-dc/dist/angular-dc.js:137:28 at Scope.$digest (http://localhost/bower_components/angular/angular.js:16219:34) at Scope.$apply (http://localhost/bower_components/angular/angular.js:16492:24) at http://localhost/assets/js/directives/scroll-spy.js:7:17 at dispatch (http://localhost/bower_components/jquery/dist/jquery.min.js:3:7537) at r.handle (http://localhost/bower_components/jquery/dist/jquery.min.js:3:5620) at r._wrapped.r._wrapped (http://localhost/:184:38) (anonymous) @ angular.js:12808 (anonymous) @ angular.js:9555 $digest @ angular.js:16246 $apply @ angular.js:16492 (anonymous) @ scroll-spy.js:7 dispatch @ jquery.min.js:3 r.handle @ jquery.min.js:3 r._wrapped.r._wrapped @ (index):184 angular-dc.js:148 unable to evaldcDimension:gainOrLoss angular.js:12808 Error: gainOrLoss is undefined at http://localhost/bower_components/angular-dc/dist/angular-dc.js:143:43 at Function.Rt (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:23:525) at Q.o.(anonymous function) [as map] (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:29:469) at http://localhost/bower_components/angular-dc/dist/angular-dc.js:137:28 at Scope.$digest (http://localhost/bower_components/angular/angular.js:16219:34) at Scope.$apply (http://localhost/bower_components/angular/angular.js:16492:24) at http://localhost/assets/js/directives/scroll-spy.js:7:17 at dispatch (http://localhost/bower_components/jquery/dist/jquery.min.js:3:7537) at r.handle (http://localhost/bower_components/jquery/dist/jquery.min.js:3:5620) at r._wrapped.r._wrapped (http://localhost/:184:38) (anonymous) @ angular.js:12808 (anonymous) @ angular.js:9555 $digest @ angular.js:16246 $apply @ angular.js:16492 (anonymous) @ scroll-spy.js:7 dispatch @ jquery.min.js:3 r.handle @ jquery.min.js:3 r._wrapped.r._wrapped @ (index):184 angular-dc.js:148 unable to evaldcDimension:gainOrLoss angular.js:12808 Error: gainOrLoss is undefined at http://localhost/bower_components/angular-dc/dist/angular-dc.js:143:43 at Function.Rt (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:23:525) at Q.o.(anonymous function) [as map] (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:29:469) at http://localhost/bower_components/angular-dc/dist/angular-dc.js:137:28 at Scope.$digest (http://localhost/bower_components/angular/angular.js:16219:34) at Scope.$apply (http://localhost/bower_components/angular/angular.js:16492:24) at http://localhost/assets/js/directives/scroll-spy.js:7:17 at dispatch (http://localhost/bower_components/jquery/dist/jquery.min.js:3:7537) at r.handle (http://localhost/bower_components/jquery/dist/jquery.min.js:3:5620) at r._wrapped.r._wrapped (http://localhost/:184:38)

Hi,

on change of data graphs and table data are not re rendering..however data is changing in cross-filter

below is the plunker is for the same

plunker : https://plnkr.co/edit/BPHdeLYlvZQ6e8AOVgoG?p=preview

click on Click button to get different data

I trying generate a lineChart with multiple lines, but I couldn't. On example of Nasdaq don't have a multiple line, but on example of dc.js exist.

It's possible?

I was wondering if there is any way to add 'range' filter on Line Chart. DC.js mentions about

chart.rangeChart

however there seems to be no way to parse another chart (bar) to that method.

e.g. http://dc-js.github.io/dc.js/#monthly-move-chart

Hi,

I am having trouble trying to resize charts on window resize:

angular.element($window).bind('resize', function(){
$scope.width = $window.innerWidth;
$log.log('new windows size ' + $scope.width);
var list = dc.chartRegistry.list();
for (var i in list){
var chartS = list[i];
if (typeof chartS.rescale === 'function'){
chartS.width($window.innerWidth);
chartS.rescale();
chartS.redraw();
}
}
});

This seems to be only rescaling the data displayed, but not the axis (both on line chart and range-bar chart).

Is there a proper way to do this?

hi,

I see that you do the following in your code module.exports = require("./crossfilter").crossfilter
but I'm using some gulp tasks to create one vendor.js that contains all code

so could you change it that it doens't look for the file, but for the code being loaded?

Line charts no longer appear to work, including your example NASDAQ line charts. They throw the following error: Error: An invalid or illegal string was specified. The issue appears to have been introduced in dc.js 2.0.0-alpha.3, as it works fine with dc.js 2.0.0-alpha.2.

Thanks,

Dean

please upload tags for bower, so that we can see proper bower versions instead of

angular-dc#052cd51729

Anyone have luck getting this working with webpack and NPM?

With the following code:

require('angular-dc');
angular.module('app', ['angularDc'])

I get the following error

angular.js:68Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module angularDc due to:
Error: [$injector:nomod] Module 'angularDc' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=angularDc
    at http://localhost:3000/index.js:8421:12
    at http://localhost:3000/index.js:10435:17
    at ensure (http://localhost:3000/index.js:10359:38)

i would like refresh crossfilter dataset and render the chart once in a while.

the crossfilter is initialized and after some new data arrives, i tried to

          ndx.remove();
          ndx = crossfilter(new_dataset);

plus redefine dimensions & groups...

and then

dc.renderAll(1);

but it doesn't seem to reset crossfilter, but i can see the chart redraw.

what's the proper way to do it ?

I was trying to use angular-dc with angularjs 1.6.9 and it wasn't working, just showing this error: [$controller:ctrlreg] The controller with the name 'myController' is not registered, so I changed to angular 1.2.15 and it works perfectly.

Many thanks for a great library! Noticed one small issue with the stock demo:

After selecting a date range to zoom in from the view finder (barChart below the Monthly Index areaChart), you may click 'reset' on top of the areaChart, but it does not reset the view finder.

Hello,
I'm new on angular + dc and after searching a lot on the web, I finally decide myself to post this question.

Is it possible, and how, to call a composite chart using one dimension and two differents groups with angular+Dc?

Thanks a lot for yours answers !!

        <div dc-Chart="compositeChart" id="chart-line-date"
            dc-width="800" dc-height="215"

            dc-margins="{top: 30, right: 100, bottom: 25, left: 50}"                


            dc-group="" <!--????? this is where i'm stuck. I can't pass more than one group.-->

            dc-legend="dc.legend().x(680).y(0).itemHeight(12).gap(4)"
            dc-mouse-zoomable="false" dc-brush-on="false" dc-render-area="true" dc-elastic-y="true"
            dc-range-chart="rangeChart"
            dc-post-setup-chart="lineDatePS">

                 <a style="display: none;" class="reset">reset</a> 
        </div>

$scope.lineDatePS = function(chart){
var width = chart.width();

    chart.transitionDuration(1000)

        .mouseZoomable(true)

        .x(d3.time.scale()
            .domain(d3.extent($scope.volumeByDate.all(), function(d) { return d.key; }))
            .range([0, width])
            )
        .xAxis().tickFormat(function(h) {return customTimeFormat(h);}).ticks(5); // utilisation de customTimeFormat pour afficher le temps sur l'axe X suivant l'échelle
            chart.colors("#286d03")
            .elasticY(true)
            .renderHorizontalGridLines(true)

            .brushOn(false)
             .compose([
                dc.lineChart(chart)
                        //.group(volumeByDate1ex, "Monthly Index Average")
                     /*   .valueAccessor(function (d) {
                            return d.value;

                        })*/
                        .colors('#286d03')  
                        ,

                dc.lineChart(chart)
                        //.group(volumeByDate1ex, "Monthly Index Move")
                       /* .valueAccessor(function (d) {
                        console.log(d);
                            return Math.sqrt(d.value);
                        })*/
                        .colors('#F07D00')
                        .title(function (d) {
                            var value = d.data.value.avg ? d.data.value.avg : d.data.value;
                            if (isNaN(value)) value = 0;
                            return dateFormat(d.data.key) + "\n" + numberFormat(value);
                        })
                        //.ordinalColors(["orange"])
                        .useRightYAxis(true)
            ]) 

            .yAxisLabel("Monthly Index Average")
            .rightYAxisLabel("Monthly Index Move")
            .renderHorizontalGridLines(true);


        };

When using Browserify to load in angular-dc, I'm getting a "cannot read property 'module' of undefined" error. I'm loading angular-dc as follows:

require('angular-dc');

var app = angular.module('MyApp', ['angularDc']);

The issue is, with Browerify-style imports, we get into this branch of the module logic at the beginning of angular-dc.js:

    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like enviroments that support module.exports,
        // like Node.
        module.exports = factory();

This calls the factory function with no arguments, so angular, dc, _, and d3 are all undefined.

It should be fixable by changing to module.exports = factory; (don't call factory, just export the function). Then we could load the module using browserify as follows:

require('angular');

var _ = require('underscore')
  , d3 = require('d3')
  , dc = require('dcjs');

require('angular-dc')(angular, dc, _, d3);

var app = angular.module('MyApp', ['angularDc']);

I'm new on D3 world and angular-dc.
How would I do this using angular-dc?

Where would be the point where I can style the Graph?

Getting this error when upgrading to lodash 3.5

dc.errors.InvalidStateException {message: "Mandatory attribute chart.dimension is missing on chart[#dc-chart1]", toString: function}angular.js?body=1:9938 (anonymous function)angular.js?body=1:7284 $getangular.js?body=1:12415 $get.Scope.$digestangular.js?body=1:12661 $get.Scope.$applyangular.js?body=1:8273 doneangular.js?body=1:8478 completeRequestangular.js?body=1:8417 xhr.onreadystatechange

Lodash recently released their 3+ version which causes issues with a project I am working on.

It appears that the dimension and group attributes do not bind properly when using lodash version 3+

A proposed solution would be to changed the current bower.json dependency to something using the tilde (~2 should be sufficient assuming lodash do not insert any breaking changes later).

A workaround I am using is to specfically give a dependency version in our projects bower.json:
"lodash": "2.4.1"

For legal reasons, please provide a license on your angular module in the github project

The type of chart seriesChart has an attribute chart. This clashes with the definition of the chart type (dc-chart).

Hi guys,

I'm trying to render the barChart via angular-dc and I'm running into the following issue:

Error: Mandatory attribute chart.x is missing on chart

I'm using the same rundimension and grouping from the pieChart example:

$scope.runDimension = ndx.dimension(function(d) {return "run-"+d.Run;}) $scope.speedSumGroup = $scope.runDimension.group().reduceSum(function(d) {return d.Speed * d.Run;});

I've also tried to manually set the "dc-x" attribute and I have also tried to override the data within the angular-dc.js script to no avail.

I've seen someone on stackoverflow use the following with success:
<div dc-chart="barChart" dc-width="990" dc-height="180" dc-x="volumeScale" dc-x-units="d3.time.months" dc-dimension="ticketVolumeDim" dc-group="ticketVolumeGroup" dc-gap="4" class="dc-chart" dc-margins="{top: 0, right: 50, bottom: 20, left: 40}" dc-gap="1" dc-ordinal-colors="ordinalColors" dc-centerBar="true"> </div>

Can you tell me which of the above I have to include to get the bar chart to render - and if possible some of the value formats.

My pieCharts work perfectly. Can you guys let me know what I should be doing differently?

Any help is appreciated and I'd be willing to contribute my fixed version (along with the other charts I plan to work on) as angular-dc examples.

Thanks

@TomNeyland @webmaven @tardyp

Hi,

I tried angular-dc implementation with a factory, but it won't work. I checked all properties on success and valid values, but it doesn't show a graph, but also no console errors. Since I request the files via the $http service the $scope.$apply() is by AngularJS documentation not necessary (also I'm not able to use it there). Maybe you find an error.

Here is the code of my controller:

(function() {
    var controller = function($scope, $http, jobsChartsFactory) {

        var onSuccess = function(data) {
            var jobsCharts = jobsChartsFactory(data);

            $scope.jobsPie = {
                width: 400,
                height: 400,
                innerRadius: 100,
                chart: "jobs-pie-chart",
                dimension: jobsCharts.dimension,
                group: jobsCharts.group
            };
        };

        $http.get("lsf.json")
            .success(onSuccess)
            .error(function() {
                console.log("Error");
            });
    };

    angular.module("elp")
        .controller("jobsChartsController", controller);
}());

And here is the jade template:

.container
    h1 Jobs
    div.dc-chart(dc-chart="jobsPie.chart",
                 dc-width="jobsPie.width",
                 dc-height="jobsPie.height",
                 dc-dimension="jobsPie.dimension",
                 dc-group="jobsPie.group")

Anyone got this to work with the mean.js stack?
My code works fine standalone, but when I try to put it into mean.js stack I get this error:

Error: osverDim is undefined
at Error (native)
at http://localhost:3000/lib/angular-dc/dist/angular-dc.js:143:61
at Function.map (http://localhost:3000/lib/angular-dc/dist/lodash.js:3509:27)
at lodash.ctor.(anonymous function) as map
at Object. (http://localhost:3000/lib/angular-dc/dist/angular-dc.js:137:28)
at Scope.$get.Scope.$digest (http://localhost:3000/lib/angular/angular.js:12642:40)
at Scope.$get.Scope.$apply (http://localhost:3000/lib/angular/angular.js:12915:24)
at http://localhost:3000/lib/angular/angular.js:14426:36
at completeOutstandingRequest (http://localhost:3000/lib/angular/angular.js:4411:10)
at http://localhost:3000/lib/angular/angular.js:4725:7

It looks to be a chart.render() call is executing before the data is set on the scope for it to use. What's really strange is it is loading the data remotely, and I can verify that it is not until the data returns that the error is thrown. So it must be some sort of race condition where it is trying to render at the same time the data is being processed to put on the scope.

Any suggestions?

Its not possible to create a composite chart because you can't properly use compose property in config - you need access to chart.

.compose([
    dc.lineChart(composite) // composite must be chart parent
      .dimension(dim)
      .colors('red')
      .group(grp1, "Top Line")
      .dashStyle([2, 2]),
    dc.lineChart(composite) // composite must be chart parent
      .dimension(dim)
      .colors('blue')
      .group(grp2, "Bottom Line")
      .dashStyle([5, 5])
  ])
  .brushOn(false)
  .render();

Bower reference to master dc.js which has changed and now angular-dc doesn't work.
It would be better to refer to the specific latest version angular-dc was tested:
"dcjs": "2.0.0-alpha.2"

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.

Hi,

I am trying to create a "seriesChart" but one of the paramters dc is expecting is "chart", which is exactly the same as the directive name.

Is there a way to go around it?

Thanks,
Pedro

Hi,

I have a very similar issue as #23. The optional value you can pass to .group([value,[name]]) isn't available via angular as far as I can see. I do not mean legend like in #23 or chart group, but I think he was talking about 'name' and not 'legend'. My problem is how do you pass a group name to the chart via angular? dc-group only accepts one value and not the second optional parameter.

Thanks,
Sergio