background for https://github.com/EpiphanyMachine/d3AngularIntegration/issues/6

d3line.html

<div class="row, controller" ng-controller="D3LineController">
    <h2>{{title}}</h2>
    <p>{{d3DataLine}}</p>
    <div class="col-md-6 col-md-offset-3">
        <d3-linechart label="name"></d3-linechart>
    </div>
</div>

d3linecontroller.js

(function () {
  'use strict';

  angular.module('dronzeApp.controllers')
    .controller('D3LineController', ['$scope', '$http', function($scope, $http){
        $scope.title = "D3 Line";

        var url = 'data/linechart.json';

        $http.get(url, {})
        .then(function(data) {
            $scope.data = data.data.table.data;
        });

    }]);

}());

d3linedirective.js

(function () {
  'use strict';

  angular.module('dronzeApp.directives')
    .directive('d3Linechart', ['d3', function(d3) {
      return {
        restrict: 'EA',
        scope: {
          data: "=",
          label: "@",
          onClick: "&"
        },
        link: function(scope, iElement, iAttrs) {
          var svg = d3.select(iElement[0])
              .append("svg")
              .attr("width", "100%");

          // on window resize, re-render d3 canvas
          window.onresize = function() {
            return scope.$apply();
          };
          scope.$watch(function(){
              return angular.element(window)[0].innerWidth;
            }, function(){
              return scope.render(scope.data);
            }
          );

          // watch for data changes and re-render
          scope.$watch('data', function(newVals, oldVals) {
            return scope.render(newVals);
          }, true);

          var parseDate = d3.time.format("%Y-%m-%d").parse;

          // define render function
          scope.render = function(error,data){

            if (error) throw error;

              data.forEach(function(d) {
                d.date = parseDate(d[7]);
                d.close = +d[2];
              });

              x.domain(d3.extent(data, function(d) { return d.date; }));
              y.domain(d3.extent(data, function(d) { return d.close; }));

              svg.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis);

              svg.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                .append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 6)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text("Price ($)");

              svg.append("path")
                  .datum(data)
                  .attr("class", "line")
                  .attr("d", line);

          };
        }
      };
    }]);

}());

linechart.json

{
  "table": {
    "columns": ["Adj. Close", "Low", "Open", "Volume", "Ex-Dividend", "Adj. Open", "Close", "Date", "Adj. Volume", "Adj. Low", "High", "Split Ratio", "Adj. High"],
    "data": [
      [35.270216825688, 35.05, 35.21, 318875.0, 0.0, 35.130532798656, 35.35, "2014-06-25", 318875.0, 34.970893910619, 35.43, 1.0, 35.350036269707],
      [35.02078106313, 34.83, 35.07, 249294.0, 0.0, 34.990848771623, 35.1, "2014-06-26", 249294.0, 34.751390439568, 35.34, 1.0, 35.260239395186],
      [35.529630018748, 34.75, 34.75, 1047370.0, 0.0, 34.671570995549, 35.61, "2014-06-27", 1047370.0, 34.671570995549, 35.73, 1.0, 35.649359184776],
      [30.701222675286, 29.99, 30.35, 1734002.0, 0.0, 30.262491334685, 30.79, "2014-05-06", 1734002.0, 29.903529328738, 30.92, 1.0, 30.8308478441],
      [30.202664333693, 29.9, 30.23, 1281949.0, 0.0, 30.142837332702, 30.29, "2014-05-05", 1281949.0, 29.813788827251, 30.8401, 1.0, 30.751178221114],
      [30.302376002012, 29.36, 29.4, 1291142.0, 0.0, 29.315230485658, 30.39, "2014-05-02", 1291142.0, 29.275345818331, 30.49, 1.0, 30.402087670331],
      [29.504682655463, 29.38, 29.41, 1720517.0, 0.0, 29.32520165249, 29.59, "2014-05-01", 1720517.0, 29.295288151994, 29.77, 1.0, 29.684163658437],
      [29.385028653481, 29.005, 29.11, 822230.0, 0.0, 29.026066647534, 29.47, "2014-04-30", 822230.0, 28.9213693958, 29.58, 1.0, 29.494711488632],
      [29.026066647534, 28.96, 29.29, 2617734.0, 0.0, 29.205547650508, 29.11, "2014-04-29", 2617734.0, 28.876499145057, 29.39, 1.0, 29.305259318826],
      [29.185605316844, 28.6225, 28.7, 1599238.0, 0.0, 28.617248807428, 29.27, "2014-04-28", 1599238.0, 28.539972264481, 29.56, 1.0, 29.474769154968],
      [28.587335306933, 28.57, 29.84, 1913972.0, 0.0, 29.75396182626, 28.67, "2014-04-25", 1913972.0, 28.487623638614, 30.52, 1.0, 30.432001170826],
      [29.803817660419, 29.25, 29.49, 1567311.0, 0.0, 29.404970987145, 29.89, "2014-04-24", 1567311.0, 29.16566298318, 29.98, 1.0, 29.893558161906],
      [29.494711488632, 29.56, 30.18, 1089763.0, 0.0, 30.092981498543, 29.58, "2014-04-23", 1089763.0, 29.474769154968, 30.26, 1.0, 30.172750833198],
      [30.043125664384, 29.99, 30.04, 1090517.0, 0.0, 29.953385162897, 30.13, "2014-04-22", 1090517.0, 29.903529328738, 30.29, 1.0, 30.202664333693],
      [29.793846493587, 29.61, 29.91, 1561984.0, 0.0, 29.823759994083, 29.88, "2014-04-21", 1561984.0, 29.524624989127, 30.927, 1.0, 30.837827660883],
      [29.32520165249, 28.49, 29.87, 1470389.0, 0.0, 29.783875326755, 29.41, "2014-04-17", 1470389.0, 28.407854303959, 30.11, 1.0, 30.02318333072],
      [29.75396182626, 29.29, 29.5, 1014060.0, 0.0, 29.414942153977, 29.84, "2014-04-16", 1014060.0, 29.205547650508, 29.95, 1.0, 29.86364466141],
      [29.16566298318, 27.95, 28.7, 3878963.0, 0.0, 28.617248807428, 29.25, "2014-04-15", 3878963.0, 27.869411295039, 29.865, 1.0, 29.77888974334],
      [30.382145336667, 30.265, 30.4, 407658.0, 0.0, 30.312347168844, 30.47, "2014-04-14", 407658.0, 30.177736416614, 30.54, 1.0, 30.45194350449],
      [32.755283042649, 32.4, 32.65, 348950.0, 0.0, 32.555859706012, 32.85, "2014-05-29", 348950.0, 32.306580535215, 32.87, 1.0, 32.775225376312],
      [32.745311875817, 32.78, 32.81, 779493.0, 0.0, 32.715398375321, 32.84, "2014-05-30", 779493.0, 32.685484874826, 32.98, 1.0, 32.884908211463],
      [32.81511004364, 32.79, 32.92, 457260.0, 0.0, 32.825081210472, 32.91, "2014-05-27", 457260.0, 32.695456041658, 33.15, 1.0, 33.054418047604],
      [32.54588853918, 32.535, 32.95, 392854.0, 0.0, 32.854994710967, 32.64, "2014-05-28", 392854.0, 32.441191287445, 33.035, 1.0, 32.939749629038]
    ]
  }
}