fix(angular-chartist): Watch chartType for changes

Fixes #25

Author: willsoto

dist/angular-chartist.js

@@ -27,7 +27,11 @@
         }, this);
     };
 
-    AngularChartistCtrl.prototype.renderChart = function (element) {
+    AngularChartistCtrl.prototype.renderChart = function (element, chartType) {
+        if (chartType) {
+            this.chartType = chartType;
+        }
+
         return Chartist[this.chartType](element, this.data, this.options, this.responsiveOptions);
     };
 
@@ -53,11 +57,22 @@
                 Ctrl.bindEvents(chart);
 
                 // Deeply watch the data and create a new chart if data is updated
-                scope.$watch(scope.data, function (newData, oldData) {
+                scope.$watchGroup(['data', 'chartType'], function (newDataArray, oldDataArray) {
+                    // new data object
+                    var newData = newDataArray[0];
+                    var oldData = oldDataArray[0];
+
+                    // new chart type
+                    var newChartType = newDataArray[1];
+                    var oldChartType = oldDataArray[1];
+
                     // Avoid initializing the chart twice
                     if (newData !== oldData) {
                         chart.update(newData);
+                    } else if (newChartType !== oldChartType) {
+                        chart = Ctrl.renderChart(elm, newChartType);
                     }
+
                 }, true);
             }
         };

dist/angular-chartist.min.js

@@ -27,7 +27,11 @@
         }, this);
     };
 
-    AngularChartistCtrl.prototype.renderChart = function (element) {
+    AngularChartistCtrl.prototype.renderChart = function (element, chartType) {
+        if (chartType) {
+            this.chartType = chartType;
+        }
+
         return Chartist[this.chartType](element, this.data, this.options, this.responsiveOptions);
     };
 
@@ -53,11 +57,22 @@
                 Ctrl.bindEvents(chart);
 
                 // Deeply watch the data and create a new chart if data is updated
-                scope.$watch(scope.data, function (newData, oldData) {
+                scope.$watchGroup(['data', 'chartType'], function (newDataArray, oldDataArray) {
+                    // new data object
+                    var newData = newDataArray[0];
+                    var oldData = oldDataArray[0];
+
+                    // new chart type
+                    var newChartType = newDataArray[1];
+                    var oldChartType = oldDataArray[1];
+
                     // Avoid initializing the chart twice
                     if (newData !== oldData) {
                         chart.update(newData);
+                    } else if (newChartType !== oldChartType) {
+                        chart = Ctrl.renderChart(elm, newChartType);
                     }
+
                 }, true);
             }
         };

example/lib/angular-chartist.js

@@ -17,11 +17,16 @@ AngularChartistCtrl.prototype.bindEvents = function(chart) {
     }, this);
 };
 
-AngularChartistCtrl.prototype.renderChart = function(element) {
+AngularChartistCtrl.prototype.renderChart = function(element, chartType) {
+    if (chartType) {
+        this.chartType = chartType;
+    }
+
     return Chartist[this.chartType](element, this.data, this.options, this.responsiveOptions);
 };
 
 angularChartist.directive('chartist', [
+
     function() {
         return {
             restrict: 'EA',
@@ -45,11 +50,22 @@ angularChartist.directive('chartist', [
                 Ctrl.bindEvents(chart);
 
                 // Deeply watch the data and create a new chart if data is updated
-                scope.$watch(scope.data, function(newData, oldData) {
+                scope.$watchGroup(['data', 'chartType'], function(newDataArray, oldDataArray) {
+                    // new data object
+                    var newData = newDataArray[0];
+                    var oldData = oldDataArray[0];
+
+                    // new chart type
+                    var newChartType = newDataArray[1];
+                    var oldChartType = oldDataArray[1];
+
                     // Avoid initializing the chart twice
                     if (newData !== oldData) {
                         chart.update(newData);
+                    } else if (newChartType !== oldChartType) {
+                        chart = Ctrl.renderChart(elm, newChartType);
                     }
+
                 }, true);
             }
         };