var myapp = angular.module('sampleapp', ["highcharts-ng"]);
myapp.controller('samplecontoller', function ($scope) {
$scope.highchartsNG = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'bar chart'
},
loading: false
}
$scope.saveAsBinary = function( ){
var svg = document.getElementById('highchartContainer')
.children[0].innerHTML;
var base_image = new Image();
svg = "data:image/svg+xml,"+svg;
base_image.src = svg;
$('#binaryImage').attr('src', svg);
}
});
<div ng-app="sampleapp">
<div ng-controller="samplecontoller">
<button ng-click="saveAsBinary()">Save as Binary</button>
<highchart id="highchartContainer" config="highchartsNG"></highchart>
<img id="binaryImage"/>
</div>
</div>
External resources loaded into this fiddle: