Merge pull request #15 from Ecodev/master

Could not render chart without renderTo

sample/js/controllers.js

@@ -2,6 +2,7 @@
 
 angular.module('chartsExample.controllers',[]).controller('MainCtrl', ['$scope','$http', 
 	function($scope,$http) {
+	    $scope.chartObj; // this will contain a reference to the highcharts' chart object
  		$http.get("charts/basicAreaChart.json").success(function(data) {
     		$scope.basicAreaChart = data;
 		});

sample/views/main.html

@@ -1,4 +1,4 @@
 <div>
-	<chart value='basicAreaChart' type="area" height="400">
+	<chart value='basicAreaChart' type="area" height="400" chart-obj='chartObj'>
 	</chart>
 </div>

src/directives/highchart.js

@@ -7,30 +7,25 @@ angular.module('chartsExample.directives',[])
     restrict: 'E',
     template: '<div></div>',
     scope: {
-        chartData: "=value"
+        chartData: "=value",
+        chartObj: "="
     },
     transclude:true,
     replace: true,
 
     link: function (scope, element, attrs) {
-      var chartsDefaults = {
-        chart: {
-          renderTo: element[0],
-          type: attrs.type || null,
-          height: attrs.height || null,
-          width: attrs.width || null
-        }
-      };
-
+
         //Update when charts data changes
         scope.$watch(function() { return scope.chartData; }, function(value) {
           if(!value) return;
-            // We need deep copy in order to NOT override original chart object.
-            // This allows us to override chart data member and still the keep
-            // our original renderTo will be the same
-            var newSettings = {};
-            angular.extend(newSettings, chartsDefaults, scope.chartData);
-            var chart = new Highcharts.Chart(newSettings);
+
+            // use default values if nothing is specified in the given settings
+            scope.chartData.chart.renderTo = scope.chartData.chart.renderTo || element[0];
+            if (attrs.type) scope.chartData.chart.type = scope.chartData.chart.type || attrs.type;
+            if (attrs.height) scope.chartData.chart.height = scope.chartData.chart.height || attrs.height;
+            if (attrs.width) scope.chartData.chart.width = scope.chartData.chart.type || attrs.width;
+
+            scope.chartObj = new Highcharts.Chart(scope.chartData);
         });
       }
     };