download chart option

app/directives/chart.html

@@ -28,6 +28,7 @@
           <input type="checkbox" ng-model="$parent.showChildren"> Show children
         </label>
         <a class="button small" ng-click="applyOptions();$close()">Apply</a>
+        <a class="button small" ng-click="downloadChart();$close()">Download Chart</a>
       </pane>
     </dropdown-toggle>
   </div>

app/directives/chart.js

@@ -22,6 +22,36 @@ angular
         scope.applyOptions = function(){
           that.drawChart(scope);
         };
+
+        scope.downloadChart = function() {
+          if (!scope.termBoxHeight) {
+            return;
+          }
+
+          if (!scope.termBoxWidth) {
+            return;
+          }
+
+          // Requesting a larger chart from the service
+          var chartPromise = chartService.getChart(
+            scope.ids,
+            scope.showIds,
+            scope.showKey,
+            Math.round(scope.termBoxWidth * 2.5),
+            Math.round(scope.termBoxHeight * 2.5),
+            Math.round(scope.fontSize * 2.5),
+            scope.showSlimColours,
+            scope.showChildren,
+          );
+
+          chartPromise.then(function(d) {
+            var a = document.createElement("a");
+            a.href = "data:image/png;base64," + d.data;
+            a.download = scope.title + ".png";
+            a.click();
+          });
+        }
+
         this.drawChart(scope);
       },
       drawChart: function(scope) {