Utilizing nvd3.js to construct a basic stacked bar chart as detailed here
I inserted the code provided in the link into an Angular directive like this:
app.directive('stackBar', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
/*.transitionDuration(350)*/
.reduceXTicks(true) //If 'false', every single x-axis tick label will be rendered.
/*.rotateLabels(0) */ //Angle to rotate x-axis labels.
.showControls(true) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.1); //Distance between each group of bars.
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
d3.select(element[0])
.datum(exampleData())
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
//Generate some nice data.
function exampleData() {
return stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
return {
key: 'Stream #' + i,
values: data
};
});
}
}
}
});
Below is my HTML:
<td class="centered" colspan="5">
<div stack-bar>
</div>
</td>
However, I am encountering the following error:
Uncaught ReferenceError: stream_layers is not defined
Any suggestions on where I might be mistaken?
In addition, 'transitonDuration' was not functional so I deactivated it. Initially, I presumed this could be due to a d3 version issue, but even with the latest version, the problem persists.
UPDATE:
The answer from Huang Feng assisted me in eliminating the error. Nonetheless, instead of receiving a chart, I'm seeing an abundance of text. Here's a screenshot:
https://i.stack.imgur.com/p6K7c.png
Any thoughts why this is happening?
Also, the directive is within an ng-repeat, which explains the multiple rows shown in the screenshot.