title: Angular-NVD3 Chart not Rendering
body: <p>Title says it all: the chart simply doesn't render. I am trying to implement the example given <a href="http://krispo.github.io/angular-nvd3/#/quickstart" rel="nofollow">here</a>.</p>
  
  <p>All of the scripts and stylesheets are accessible (no 404's). I'm sure this is something glaringly obvious, but I can't quite see what it is. I'm using Google Chrome V49, and don't have a problem with charts on other websites.</p>
  
  <p>Here is the page source:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Monitoring - Integration Hub&lt;/title&gt;
          &lt;link href="/Content/bootstrap.css" rel="stylesheet"/&gt;
          &lt;link href="/Content/site.css" rel="stylesheet"/&gt;
          &lt;link href="/Content/nv.d3.css" rel="stylesheet"/&gt;
          &lt;script src="/Scripts/modernizr-2.8.3.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="/"&gt;Integration Hub&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;&lt;a href="/Monitoring"&gt;Monitoring&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Settings"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Credentials"&gt;Credentials&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Logs"&gt;Logs&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Mappings"&gt;Mappings&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Home/About"&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Home/Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;p class="nav navbar-text navbar-right"&gt;Hello, User!&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container body-content"&gt;
              &lt;div ng-app="monitoringApp"&gt;
                  &lt;h2&gt;Monitoring&lt;/h2&gt;
                  &lt;p&gt;
                      The information presented on this page has a sample resolution of 5 seconds.
                  &lt;/p&gt;
                  &lt;div ng-controller='OverviewCtrl'&gt;
                      &lt;nvd3 options='options' data='data'&gt;&lt;/nvd3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;hr /&gt;
              &lt;footer&gt;
                  &lt;p&gt;&amp;copy; Some Org, 2016.&lt;/p&gt;
              &lt;/footer&gt;
          &lt;/div&gt;
          &lt;script src="/Scripts/jquery-2.2.2.js"&gt;&lt;/script&gt;
          &lt;script src="/Scripts/bootstrap.js"&gt;&lt;/script&gt;
          &lt;script src="/Scripts/respond.js"&gt;&lt;/script&gt;
          &lt;script src="/Scripts/angular.js"&gt;&lt;/script&gt;
          &lt;script src="/Scripts/d3/d3.min.js"&gt;&lt;/script&gt;
          &lt;script src="/Scripts/nv.d3.js"&gt;&lt;/script&gt;
          &lt;script src="/Scripts/angular-nvd3.js"&gt;&lt;/script&gt;
          &lt;script src="/Scripts/Apps/monitoring-app.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here are the contents of monitoring-app.js:</p>
  
  <pre><code>var settingsApp = angular.module('monitoringApp', []);
  settingsApp.controller('OverviewCtrl', function ($scope, $http) {
      $scope.options = {
          chart: {
              type: 'discreteBarChart',
              height: 450,
              margin: {
                  top: 20,
                  right: 20,
                  bottom: 60,
                  left: 55
              },
              x: function (d) { return d.label; },
              y: function (d) { return d.value; },
              showValues: true,
              valueFormat: function (d) {
                  return d3.format(',.4f')(d);
              },
              transitionDuration: 500,
              xAxis: {
                  axisLabel: 'X Axis'
              },
              yAxis: {
                  axisLabel: 'Y Axis',
                  axisLabelDistance: 30
              }
          }
      };
  
      $scope.data = [{
          key: "Cumulative Return",
          values: [
              { "label": "A", "value": -29.765957771107 },
              { "label": "B", "value": 0 },
              { "label": "C", "value": 32.807804682612 },
              { "label": "D", "value": 196.45946739256 },
              { "label": "E", "value": 0.19434030906893 },
              { "label": "F", "value": -98.079782601442 },
              { "label": "G", "value": -13.925743130903 },
              { "label": "H", "value": -5.1387322875705 }
          ]
      }];
  });
  </code></pre>