stevenh77 · May 29, 2015 10:49
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()">Check {{ngCity}}</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="San Francisco" width='400'>
 		<h3>A custom view of the weather in San Francisco</h3>
 	</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()">Check {{ngCity}}</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="San Francisco" width='400'>
	<h3>A custom view of the weather in San Francisco</h3>
	</div>

	</body>
	</html>