├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── sample
    ├── charts
    │   └── basicAreaChart.json
    ├── index.html
    ├── js
    │   ├── app.js
    │   └── controllers.js
    └── views
    │   └── main.html
├── screenshot_sample.png
└── src
    └── directives
        └── highchart.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) 2013 Gal Bracha. http://www.galbracha.com
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Angular Highcharts Directive
 2 | ============================
 3 | 
 4 | An [angular](http://angularjs.org/) directive that wraps around [highcharts](http://www.highcharts.com).
 5 | 
 6 | See the code below for this convenient and modelar integration.
 7 | 
 8 | ![USing this directive along with some of the code](https://raw.github.com/rootux/angular-highcharts-directive/master/screenshot_sample.png "Using angular highcharts directive")
 9 | 
10 | 
11 | ### HTML
12 | ```html
13 | <div>
14 |     <chart value="basicAreaChart" type="area" height="400"></chart>
15 | </div>
16 | ```
17 | 
18 | ### Angular
19 | ```javascript
20 | 'use strict';
21 | 
22 | angular.module('chartsExample.controllers', []).controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
23 |     $http.get("charts/basicAreaChart.json").success(function(data) {
24 |         $scope.basicAreaChart = data;
25 |     });
26 | }]);
27 | ```
28 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "angular-highcharts-directive",
 3 |     "version": "0.4.0",
 4 |     "homepage": "https://github.com/rootux/angular-highcharts-directive",
 5 |     "authors": [
 6 |         "Gal Bracha <galbra@gmail.com>"
 7 |     ],
 8 |     "description": "An angular(http://angularjs.org/) directive that wraps around http://www.highcharts.com charts, and allows easily and modular integration of angular and highcharts",
 9 |     "main": "src/directives/highchart.js",
10 |     "keywords": [
11 |         "angular",
12 |         "highcharts",
13 |         "directive"
14 |     ],
15 |     "license": "MIT",
16 |     "dependencies": {
17 |         "angular": ">=1.1.4"
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/sample/charts/basicAreaChart.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "title": {
 3 |     "text": "Israel love Iran"
 4 |   },
 5 |   "subtitle": {
 6 |     "text": "Source: <a href=\"https://www.facebook.com/israellovesiran\">Israel loves iran on fb</a>"
 7 |   },
 8 |   "xAxis": {
 9 |     "labels": {}
10 |   },
11 |   "tooltip": {},
12 |   "plotOptions": {
13 |     "area": {
14 |       "pointStart": 1940,
15 |       "marker": {
16 |         "enabled": false,
17 |         "symbol": "circle",
18 |         "radius": 2,
19 |         "states": {
20 |           "hover": {
21 |             "enabled": true
22 |           }
23 |         }
24 |       }
25 |     }
26 |   },
27 |   "series": [
28 |     {
29 |       "name": "Israel",
30 |       "data": [
31 |         400,
32 |         194,
33 |         301,
34 |         130,
35 |         300
36 |       ]
37 |     },
38 |     {
39 |       "name": "Iran",
40 |       "data": [
41 |         123,
42 |         325,
43 |         120,
44 |         300,
45 |         300
46 |       ]
47 |     }
48 |     ]
49 | }


--------------------------------------------------------------------------------
/sample/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" ng-app="chartsExample">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Charts Example</title>
 6 | </head>
 7 | <body>
 8 |   <div ng-view></div>
 9 |   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
10 |   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>  
11 |   <script src="http://code.highcharts.com/highcharts.js"></script>
12 |   <script src="js/app.js"></script>
13 |   <script src="js/controllers.js"></script>
14 |   <script src="../src/directives/highchart.js"></script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/sample/js/app.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | angular.module('chartsExample', ['chartsExample.directives','chartsExample.controllers'],
 4 | 	function($routeProvider, $locationProvider) {
 5 | 		$routeProvider.when('/', { 
 6 | 			templateUrl: 'views/main.html',
 7 | 			controller: 'MainCtrl',
 8 | 		}).otherwise({ //for example when running locally (No '/' at the url), this will be loaded
 9 | 			templateUrl: 'views/main.htm',
10 | 			controller: 'MainCtrl',
11 | 		});
12 | 	});


--------------------------------------------------------------------------------
/sample/js/controllers.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | angular.module('chartsExample.controllers',[]).controller('MainCtrl', ['$scope','$http', 
4 | 	function($scope,$http) {
5 | 	    $scope.chartObj; // this will contain a reference to the highcharts' chart object
6 |  		$http.get("charts/basicAreaChart.json").success(function(data) {
7 |     		$scope.basicAreaChart = data;
8 | 		});
9 | }]);


--------------------------------------------------------------------------------
/sample/views/main.html:
--------------------------------------------------------------------------------
1 | <div>
2 | 	<chart value='basicAreaChart' type="area" height="400" chart-obj='chartObj'>
3 | 	</chart>
4 | </div>


--------------------------------------------------------------------------------
/screenshot_sample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootux/angular-highcharts-directive/b3f271762119957112e9c29aefb29726ef47fba3/screenshot_sample.png


--------------------------------------------------------------------------------
/src/directives/highchart.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | angular.module('angularHighcharts', []).directive('chart', function() {
 4 |     return {
 5 |         restrict: 'AE',
 6 |         template: '<div></div>',
 7 |         scope: {
 8 |             chartData: "=value",
 9 |             chartObj: "=?"
10 |         },
11 |         transclude: true,
12 |         replace: true,
13 |         link: function($scope, $element, $attrs) {
14 | 
15 |             //Update when charts data changes
16 |             $scope.$watch('chartData', function(value) {
17 |                 if (!value)
18 |                     return;
19 | 
20 |                 // Initiate the chartData.chart if it doesn't exist yet
21 |                 $scope.chartData.chart = $scope.chartData.chart || {};
22 | 
23 |                 // use default values if nothing is specified in the given settings
24 |                 $scope.chartData.chart.renderTo = $scope.chartData.chart.renderTo || $element[0];
25 |                 if ($attrs.type)
26 |                     $scope.chartData.chart.type = $scope.chartData.chart.type || $attrs.type;
27 |                 if ($attrs.height)
28 |                     $scope.chartData.chart.height = $scope.chartData.chart.height || $attrs.height;
29 |                 if ($attrs.width)
30 |                     $scope.chartData.chart.width = $scope.chartData.chart.type || $attrs.width;
31 | 
32 |                 $scope.chartObj = new Highcharts.Chart($scope.chartData);
33 |             });
34 |         }
35 |     };
36 | 
37 | });
38 | 


--------------------------------------------------------------------------------