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
No one has answered this question yet
Check out similar questions: