stevenh77 · May 29, 2015 11:15
diff --git a/angular-d3 b/angular-d3
 <!doctype html>
 <html>
 <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.1/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

  <script>
    'use strict';

    var app = angular.module('app', []);

    app.directive('ngSparkline', function () {
      return {
        restrict: 'A',
        require: '^ngCity',
        scope: {
          ngCity: '@'
        },
        template: '<div class="sparkline">' +
                    '<input type="text" data-ng-model="ngCity">' +
                    '<button ng-click="showTemp()">Update</button>' +
                    '<div class="graph"></div>' +
                  '</div>',
        controller: ['$scope', '$http', function ($scope, $http) {

          var url = "http://api.openweathermap.org/data/2.5/forecast/daily?mode=json&units=imperial&cnt=7&callback=JSON_CALLBACK&q="

          $scope.showTemp = function () {
            $scope.getTemp($scope.ngCity);
          };

          $scope.getTemp = function (city) {
            $http({
              method: 'JSONP',
              url: url + city
            }).success(function (data) {
              var weather = [];
              angular.forEach(data.list, function (value) {
                weather.push(value);
              });

              $scope.weather = weather;
            });
          }
        }],
        link: function (scope, iElement, iAttrs, ctrl) {
          scope.getTemp(iAttrs.ngCity);
          scope.$watch('weather', function (newVal) {
            if (newVal) {
              var highs = [];

              angular.forEach(scope.weather, function (value) {
                highs.push(value.temp.max);
              });

              chartGraph(iElement, highs, iAttrs);
            }
          });
        }
      }
    });

    var chartGraph = function (element, data, opts) {
      var width = opts.width || 200,
          height = opts.height || 80,
          padding = opts.padding || 30;

      //Remove svg element if it exists.
      d3.select("svg").remove();

      var svg = d3.select(element[0])
                      .append('svg:svg')
                      .attr('width', width)
                      .attr('height', height)
                      .attr('class', 'sparkline')
                      .append('g')
                      .attr('transform', 'translate(' + padding + ', ' + padding + ')');

      svg.selectAll('*').remove();

      var maxY = d3.max(data),
          x = d3.scale.linear()
                      .domain([0, data.length])
                      .range([0, width]),
          y = d3.scale.linear()
                      .domain([0, maxY])
                      .range([height, 0]),
          yAxis = d3.svg.axis().scale(y)
                        .orient('left')
                        .ticks(5);

      svg.append('g')
          .attr('class', 'axis')
          .call(yAxis);

      var line = d3.svg.line()
                      .interpolate('linear')
                      .x(function (d, i) { return x(i); })
                      .y(function (d, i) { return y(d); }),
          path = svg.append('svg:path')
                        .data([data])
                        .attr('d', line)
                        .attr('fill', 'none')
                        .attr('stroke-width', '1')
                            .attr('stroke', 'black');
    }

    app.directive('ngCity', function () {
      return {
        controller: function ($scope) {
        }
      }
    });
  </script>
  <!-- my application styles -->
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #333;
    }

    .ng-hide {
      display: none !important;
    }
  </style>
 </head>
 <body ng-app="app">
  <h2>Angular chart example</h2>

  <div ng-sparkline ng-city="London" width='400'></div>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.1/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	<script>
	'use strict';

	var app = angular.module('app', []);

	app.directive('ngSparkline', function () {
	return {
	restrict: 'A',
	require: '^ngCity',
	scope: {
	ngCity: '@'
	},
	template: '<div class="sparkline">' +
	'<input type="text" data-ng-model="ngCity">' +
	'<button ng-click="showTemp()">Update</button>' +
	'<div class="graph"></div>' +
	'</div>',
	controller: ['$scope', '$http', function ($scope, $http) {

	var url = "http://api.openweathermap.org/data/2.5/forecast/daily?mode=json&units=imperial&cnt=7&callback=JSON_CALLBACK&q="

	$scope.showTemp = function () {
	$scope.getTemp($scope.ngCity);
	};

	$scope.getTemp = function (city) {
	$http({
	method: 'JSONP',
	url: url + city
	}).success(function (data) {
	var weather = [];
	angular.forEach(data.list, function (value) {
	weather.push(value);
	});

	$scope.weather = weather;
	});
	}
	}],
	link: function (scope, iElement, iAttrs, ctrl) {
	scope.getTemp(iAttrs.ngCity);
	scope.$watch('weather', function (newVal) {
	if (newVal) {
	var highs = [];

	angular.forEach(scope.weather, function (value) {
	highs.push(value.temp.max);
	});

	chartGraph(iElement, highs, iAttrs);
	}
	});
	}
	}
	});

	var chartGraph = function (element, data, opts) {
	var width = opts.width \|\| 200,
	height = opts.height \|\| 80,
	padding = opts.padding \|\| 30;

	//Remove svg element if it exists.
	d3.select("svg").remove();

	var svg = d3.select(element[0])
	.append('svg:svg')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'sparkline')
	.append('g')
	.attr('transform', 'translate(' + padding + ', ' + padding + ')');

	svg.selectAll('*').remove();

	var maxY = d3.max(data),
	x = d3.scale.linear()
	.domain([0, data.length])
	.range([0, width]),
	y = d3.scale.linear()
	.domain([0, maxY])
	.range([height, 0]),
	yAxis = d3.svg.axis().scale(y)
	.orient('left')
	.ticks(5);

	svg.append('g')
	.attr('class', 'axis')
	.call(yAxis);

	var line = d3.svg.line()
	.interpolate('linear')
	.x(function (d, i) { return x(i); })
	.y(function (d, i) { return y(d); }),
	path = svg.append('svg:path')
	.data([data])
	.attr('d', line)
	.attr('fill', 'none')
	.attr('stroke-width', '1')
	.attr('stroke', 'black');
	}

	app.directive('ngCity', function () {
	return {
	controller: function ($scope) {
	}
	}
	});
	</script>
	<!-- my application styles -->
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #333;
	}

	.ng-hide {
	display: none !important;
	}
	</style>
	</head>
	<body ng-app="app">
	<h2>Angular chart example</h2>

	<div ng-sparkline ng-city="London" width='400'></div>
	</body>
	</html>