nvd3 and angularjs multi bar chart

Question

I am trying to plot a multi bar chart with angular and nvd3. The html part is

<div class="box-body">
          <nvd3-multi-bar-chart
            data="dashCtrl.thumbsUpDown"
            id="noDataExample"
            width="550"
            height="300"
            showXAxis="true"
            showLegend="true">
            <svg></svg>
          </nvd3-multi-bar-chart>
        </div>
      </div>

and the data is

[{"key":"5","values":[{"up":0,"down":1}]},{"key":"6","values":[{"up":0,"down":1}]},{"key":"7","values":[{"up":0,"down":1}]}]

that is set in this function on the controller

vm.getThumbsUpDownChartData = function(){
      projectFactory.getThumsUpDownChartData(vm.project.id).success(function(response){
          console.log(JSON.stringify(response));
          vm.thumbsUpDown = response;
      });
    };

No errors are shown on the console, and on the page I get nothing.

EDIT:

My bower.json looks like this

{
  "name": "client",
  "version": "1.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "bootstrap": "^3.3.4",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-touch": "^1.3.0",
    "angular-ui-router": "~0.2.15",
    "angular-nvd3": "~0.1.1",
    "admin-lte": "~2.2.0",
    "adminlte-bower": "2.1.1.2",
    "angularjs-nvd3-directives": "~0.0.7",
    "font-awesome": "4.3.0"
  },
  "devDependencies": {
    "angular-mocks": "^1.3.0"
  },
  "appPath": "app",
  "moduleName": "app",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    }
  },
  "resolutions": {
    "angular": "1.4.3",
    "d3": "~3.4.1",
    "jquery": "~2.1.4",
    "components-font-awesome": "^4.3"
  }
}

dhavalcengg · Answer 1 · 2015-07-28T13:05:24.023

0

Change you controller code to following

 vm.thumbsUpDown = [];

...
...

    vm.getThumbsUpDownChartData = function(){
          projectFactory.getThumsUpDownChartData(vm.project.id).success(function(response){
              console.log(JSON.stringify(response));
              Array.prototype.push.apply(vm.thumbsUpDown, response);
          });
        };

edited Jul 28 '15 at 13:05

answered Jul 28 '15 at 12:36

dhavalcengg

4,678
1
17
25

Tried it. Same result. No errors on the console and blank space on screen – Kelly Goedert Jul 28 '15 at 12:42
can you create plnkr for the same – dhavalcengg Jul 28 '15 at 12:46
I did a clean on bower cache, updated it and now I get Uncaught TypeError: undefined is not a function (anonymous function) (anonymous function) d3_selection_each d3_transitionPrototype.each chart d3_selectionPrototype.call checkElementID angular.module.directive.directive.directive.directive.controller.$scope.d3Call angular.module.directive.directive.directive.directive.link.scope.$watch.nv.addGraph.generate (anonymous function) – Kelly Goedert Jul 28 '15 at 13:12

nvd3 and angularjs multi bar chart

1 Answers1