title: Angular + d3 + Json data
body: <p>I'm trying to build a simple visualization using d3 and angular. The viz should be based on JSON data from a DashDB request. I cannot achieve the result but I don't know why. I started from an example that use data hard coded in javascript : <a href="https://www.sitepoint.com/creating-charting-directives-using-angularjs-d3-js/" rel="nofollow noreferrer">https://www.sitepoint.com/creating-charting-directives-using-angularjs-d3-js/</a>. I would like dashdb requested data instead.
  Here is my code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;AngularJS + D3.js&lt;/title&gt;
      &lt;script src="http://d3js.org/d3.v3.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="app.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-app="chartApp" ng-controller="tempController"&gt;
          &lt;h1&gt;Today's temperatures&lt;/h1&gt;
          &lt;div linear-chart chart-data="tempData"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript :</p>
  
  <pre><code>var app = angular.module('chartApp', []);
  app.controller('tempController', ['$scope', function($scope){
  d3.json('https://mynoderedstarter.eu-gb.mybluemix.net/test1', function(err, temps){
      if(err) throw err;
  
          $scope.tempData = temps;
  
  });
  }]);
  
  app.directive('linearChart', function($window){
     return{
    restrict:'EA',
    template:"&lt;svg width='850' height='200'&gt;&lt;/svg&gt;",
     link: function(scope, elem, attrs){
         console.log(scope.tempData);
         var tempDataToPlot=scope[attrs.chartData];
         var padding = 20;
         var pathClass="path";
         var xScale, yScale, xAxisGen, yAxisGen, lineFun;
  
         var d3 = $window.d3;
         var rawSvg=elem.find('svg');
         var svg = d3.select(rawSvg[0]);
  
         function setChartParameters(){
  
             xScale = d3.scale.linear()
                 .domain([tempDataToPlot[0].HOURS, tempDataToPlot[tempDataToPlot.length-1].HOURS])
                 .range([padding + 5, rawSvg.attr("width") - padding]);
  
             yScale = d3.scale.linear()
                 .domain([0, d3.max(tempDataToPlot, function (d) {
                     return d.TEMP;
                 })])
                 .range([rawSvg.attr("height") - padding, 0]);
  
             xAxisGen = d3.svg.axis()
                 .scale(xScale)
                 .orient("bottom")
                 .ticks(tempDataToPlot.length - 1);
  
             yAxisGen = d3.svg.axis()
                 .scale(yScale)
                 .orient("left")
                 .ticks(5);
  
             lineFun = d3.svg.line()
                 .x(function (d) {
                     return xScale(d.HOURS);
                 })
                 .y(function (d) {
                     return yScale(d.TEMP);
                 })
                 .interpolate("basis");
         }
  
       function drawLineChart() {
  
             setChartParameters();
  
             svg.append("svg:g")
                 .attr("class", "x axis")
                 .attr("transform", "translate(0,180)")
                 .call(xAxisGen);
  
             svg.append("svg:g")
                 .attr("class", "y axis")
                 .attr("transform", "translate(20,0)")
                 .call(yAxisGen);
  
             svg.append("svg:path")
                 .attr({
                     d: lineFun(tempDataToPlot),
                     "stroke": "blue",
                     "stroke-width": 2,
                     "fill": "none",
                     "class": pathClass
                 });
         }
  
         drawLineChart();
     }
     };
  });
  </code></pre>
  
  <p>There is no result at all (nothing displayed). I got this error in console :
      Error: undefined is not an object (evaluating 'tempDataToPlot[0]')</p>
  
  <p>scope.tempData is undefined but scope contain a tempData object well populated with an array containing my data.</p>
  
  <p>Any help would be appreciated.
  Thanks</p>