I'm getting some deep nvd3 error when I try to configure a simple line chart using angular-nvd3.
I edited the example plunker given and it seems it might be my data that is malformatted, since swapping the options only still works.
Here is an malfunctioning plunkr: http://plnkr.co/edit/fznNKBw6hwNYavfZ3Nvi?p=preview
the options:
$scope.options = {
"chart": {
"type": "lineChart",
"height": 450,
"useInteractiveGuideline": true,
"dispatch": {},
"xAxis": {
"axisLabel": "Months"
},
"yAxis": {
"axisLabel": "Team size",
}
}
};
the data:
$scope.data = {
"key": "Monthly",
"values": [{
"x": 0,
"y": 2
}, {
"x": 1,
"y": 6
}, {
"x": 2,
"y": 10
}]
}
Anybody who can spot the issue?
I replaced your scope.data with a sample one from the nvd3 site:
$scope.data = sinAndCos();
/*Random Data Generator */
function sinAndCos() {
var sin = [],sin2 = [],
cos = [];
//Data is represented as an array of {x,y} pairs.
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10)});
sin2.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) *0.25 + 0.5});
cos.push({x: i, y: .5 * Math.cos(i/10+ 2) + Math.random() / 10});
}
//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.
},
{
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.
}
];
};
And that works in this plunkr:
So this means something is wrong with the data component of what you are trying to do. Experiment by adding/subtracting from your data element and see if that helps.
Edit: Your data object was badly formed: it should be in this format:
$scope.data = [{
"key" : "Monthly",
values : [{
"x" : 1,
"y" : 6,
"color" : 'blue'
}, {
"x" : 2,
"y" : 10,
"color" : 'red'
}
]
}
];
So from the docs the data object expects an array and then the values are a further array of value objects: