AngularJS-nvd3-directives error in scatterplot

I've worked with Angular and AngularJS-nvd3 directives ( https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives ). I need to plot a scatter chart and this is my code (basically copied from http://angularjs-nvd3-directives.github.io/angularjs-nvd3-directives/scatter.chart.html ):

<nvd3-line-chart
  data="exampleData1"
  width="500"
  height="400"
  showXAxis="true"
  showYAxis="true"
  tooltips="true"
  interactive="true">
</nvd3-line-chart>

<nvd3-scatter-chart
  data="exampleData2"
  id="exampleId"
  width="550"
  height="400"
  yAxisTickFormat="yAxisTickFormatFunction()"
  xAxisTickFormat="xAxisTickFormatFunction()">
  <svg></svg>
</nvd3-scatter-chart>

      

Controller:

angular.module('DataDisplayPrototypeApp')
.controller('ProjectionsController', function ($scope) {
$scope.exampleData1 = [
  {
      "key": "Series 1",
      "values": [
        [ 1025409600000 , 0],
        [ 1028088000000 , -6.3382185140371],
        [ 1030766400000 , -5.9507873460847]
      ]
  }];

$scope.exampleData2 = [
    {"key":"Group 0",
      "values":[
      {"x":0.1905653578931545,"y":0.8115218253543552,"size":0.3461829945445061},{"x":-0.47275546081985614,"y":-0.21250610156481783,"size":0.7597237343434244},{"x":-0.5943608400643436,"y":0.48326260219425793,"size":0.02735756477341056}]
    },
    {"key":"Group 1",
      "values":[
        {"x":1.4653418686067552,"y":0.7410516592097678,"size":0.9255829956382513},
        {"x":-0.02877491536521995,"y":0.5971477723050743,"size":0.20799188618548214},
        {"x":0.39933969151296006,"y":-0.16091907790207202,"size":0.5916927580256015}
      ]
    },
    {"key":"Group 2",
      "values":[
        {"x":0.0013830897746349158,"y":0.8497943642692461,"size":0.9310796288773417},
        {"x":-0.9537010017212795,"y":-1.1938008511904343,"size":0.05539561901241541},
        {"x":-1.0580424236734207,"y":2.139854471729741,"size":0.48268040106631815}
      ]
    },
    {"key":"Group 3",
        "values":[
          {"x":0.08977024155251706,"y":-1.4315520281419063,"size":0.6179190273396671},
          {"x":0.11861503770586883,"y":0.23955359638861132,"size":0.25821112329140306},
          {"x":-1.0237018995145157,"y":-0.5612582258175013,"size":0.1404807132203132}
        ]
    }
 ];
});

      

The above code generates a line chart just fine, but for whatever reason I am getting this error for a scatter chart.

Uncaught TypeError:     nv.models.scatterChart(...).width(...).height(...).margin(...).x(...).y(...).size is not a function

      

I have no idea what I am doing wrong, any help is appreciated.

+3


source to share





All Articles