I was using nvd3.js to create a simple stacked bar chart as described here

I added the code mentioned in the link in an angular directive as follows:

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
                        };
                });
            }
        }
    }   
});

Here's my HTML:

<td class="centered" colspan="5">
      <div stack-bar>

      </div>
</td>

But, I am getting the following error:

Uncaught ReferenceError: stream_layers is not defined

Any idea where I am going wrong?

Also, 'transitonDuration' was also not working so I mented it out. I initially thought, this maybe some problem related to the version of d3, but I am using the latest version and still the problem persists.

EDIT:

Huang Feng's answer helped me get rid of the error. But instead of getting any chart I am getting a lot of text. Here's a screenshot:

Any idea why?

Also, the directive is in an ng-repeat, and thats why there are multiple rows as in the screenshot.

I was using nvd3.js to create a simple stacked bar chart as described here

I added the code mentioned in the link in an angular directive as follows:

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
                        };
                });
            }
        }
    }   
});

Here's my HTML:

<td class="centered" colspan="5">
      <div stack-bar>

      </div>
</td>

But, I am getting the following error:

Uncaught ReferenceError: stream_layers is not defined

Any idea where I am going wrong?

Also, 'transitonDuration' was also not working so I mented it out. I initially thought, this maybe some problem related to the version of d3, but I am using the latest version and still the problem persists.

EDIT:

Huang Feng's answer helped me get rid of the error. But instead of getting any chart I am getting a lot of text. Here's a screenshot:

Any idea why?

Also, the directive is in an ng-repeat, and thats why there are multiple rows as in the screenshot.

• javascript
• angularjs
• d3.js
• angularjs-directive
• nvd3.js

2 Answers 2

This is because you don't define the stream_layers function, and it's also not a function in nvd3 lib. It's defined here:

http://nvd3/assets/js/data/stream_layers.js

If you want to use it, you should include this lib in the html like:

<script src="../stream_layers.js"></script>

If you want a detail example, here is one for your reference:

http://bl.ocks/mbostock/3943967

I encountered similar output (and errors), and there were 3 things needed to fix this:

1. Add stream_layers.js to path

As mentioned by huan feng, you need to include the stream_layers.js function to generate fake data for the example. I downloaded the source code from nvd3, and the stream_layers.js file was located in novus-nvd3-8ceb270/test/stream_layers.js (you'll most likely need to update at least that first part of your path based on the latest shortened git hash.

2. Replace transitionDuration with duration

Another issue is that the API has changed for NVD3. After inspecting the source code (line 456 in novus-nvd3-8ceb270/src/models/multiBarChart.js), the transitionDuration method has been replaced with just duration. Here is a snippet from your code above with the duration option corrected:

var chart = nv.models.multiBarChart()
  .duration(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.

3. Create an SVG

Lastly, your screen shot is only showing text. I think the reason for this is because you were trying to append your chart to a div when it needs to be appended to an SVG element. One way of correcting this is by appending an svg to element[0], and then selecting that svg to use with your vizualization:

var svg = d3.select(element[0])
  .append('svg')
  .attr('id', 'my-bar-chart-svg')

d3.select('#my-bar-chart-svg')
   .datum(exampleData())
   .call(chart);

If you're still not seeing anything, you might need to fiddle with the width and height of the SVG element you created to append your chart to. Here's one quick hack for testing:

var svg = d3.select(element[0])
  .append('svg')
  .attr('id', 'my-bar-chart-svg')
  .attr('width', 800)
  .attr('height', 400)

d3.select('#my-bar-chart-svg')
   .datum(exampleData())
   .call(chart);