1

I'm using the "Multichart" with the Angular Nvd3 directive, and I keep getting this error saying:

Error: Invalid value for attribute transform="translate(0,NaN)"

and I have no idea why this happens.

My HTML-code looks like this:

<nvd3 options="options" data="data"></nvd3>

My JavaScript looks like this:

  $scope.options = {
             chart: {
                 type: 'multiChart',
                 height: 450,
                 margin : {
                     top: 30,
                     right: 60,
                     bottom: 50,
                     left: 70
                 },
                 color: d3.scale.category10().range(),
                 //useInteractiveGuideline: true,
                 transitionDuration: 500,
                 xAxis: {
                     tickFormat: function(d){
                         return d3.format(',f')(d);
                     }
                 },
                 yAxis1: {
                     tickFormat: function(d){
                         return d3.format(',.1f')(d);
                     }
                 },
                 yAxis2: {
                     tickFormat: function(d){
                         return d3.format(',.1f')(d);
                     }
                 }
             }
         };

         $scope.data = [
           {
             key: "Stream0",
             originalKey: "Stream0",
             type: "area",
             yAxis: 1,
             seriesIndex: 0,
             values: [
               {
                 x:0,
                 y:1000,
                 index: 0,
                 seriesIndex: 0,
                 series: 0
               },
               {
                 x:1,
                 y:300,
                 index: 1,
                 seriesIndex: 0,
                 series: 0
               },
               {
                 x:2,
                 y:4000,
                 index: 2,
                 seriesIndex: 0,
                 series: 0
               },
               {
                 x:3,
                 y:5000,
                 index: 3,
                 seriesIndex: 0,
                 series: 0
               }
             ]
           }
         ];

Please help me solve this problem, any suggestions would be appreciated.

martin
  • 1,894
  • 4
  • 37
  • 69
  • could you please add a link to plunker/jsfiddle/.. ? – Jossef Harush Kadouri Aug 28 '15 at 19:51
  • 1
    I can't reproduce this using the latest Angular, D3, nvd3 and angular-nvd3 libraries. Which versions of these libraries are you using? – Luke Woodward Aug 28 '15 at 20:42
  • @LukeWoodward I'm using NVD3 - v1.1.15-beta – martin Aug 29 '15 at 09:18
  • @martin: and the rest? I'm using AngularJS 1.4.4, d3 version 3.5.6, nvd3 v1.8.1-dev and angular-nvd3 1.0.0-rc2. – Luke Woodward Aug 29 '15 at 09:41
  • @LukeWoodward AngularJS v1.4.3 and Angular nvd3 0.1.0, I was not able to find the d3 version, do you know where I can find it? – martin Aug 29 '15 at 11:30
  • @martin: d3.js (the non-minified file) has the version number right at the top of the script. To find it in the minified file d3.min.js, search for 'version'. Besides, I'd recommend updating to the latest versions of all these libraries instead of faffing around trying to get older versions working. – Luke Woodward Aug 29 '15 at 14:12
  • @LukeWoodward I'm using version 3.3.13 of D3.js. I've done quite some editing to the source code of NVD3 now and I'm not very eager to replace all of it. – martin Aug 29 '15 at 15:13
  • @martin: in that case, is it possible that the problem is in your modifications to nvd3? Nowhere before have you mentioned this, and it could be very relevant to your problem. Because of these modifications (which nobody else has) I would doubt that anybody on StackOverflow could help you. It's too much to upload your modified nvd3 somewhere and expect someone else to help debug it. You're on your own with this one, good luck. – Luke Woodward Aug 29 '15 at 20:33

0 Answers0