Here is an example of using D3 inside an Angular application.
Click here for live demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
No comments:
Post a Comment