I'm trying to render different charts from an array named $scope.dataset
with ng-repeat but it is not happening.
<div ng-repeat="data in dataset">
<nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
</div>
But I get this in firefox console-
Error: a.map is not a function
So I tried to put the same code in their plunkr - linechart-nvd3, and that did not work either. However the graph renders when I use the whole array i.e. $scope.dataset
rather than using ng-repeat
. Any help would be appreciated. Thank you.
Try this code in your sinAndCos() method:
//Line chart data should be sent as an array of series objects.
return [
[{
values: sin, //values - represents the array of {x,y} data points
key: 'Sine Wave', //key - the name of the series.
color: '#ff7f0e', //color - optional: choose your own line color.
strokeWidth: 2,
classed: 'dashed'
}],
[{
values: cos,
key: 'Cosine Wave',
color: '#2ca02c'
}],
[{
values: sin2,
key: 'Another sine wave',
color: '#7777ff',
area: true //area - set to true if you want this line to turn into a filled area chart.
}]
];
So put the same code in your plunkr - http://plnkr.co/edit/lBKFld?p=preview.
Note: Angular-nvD3 chart you have to send array of object. Here I send each element as a array of object. Now if you use ng-repeat then it will work perfectly.