JSFiddle - React, Tailwind, and code Playground

by kwangkung1

HTML

<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/pablojim/highcharts-ng/master/dist/highcharts-ng.js"></script>
<div ng-app="sampleapp">
    <div ng-controller="samplecontoller">
        <button ng-click="saveAsBinary()">Save as Image</button>
        <highchart id="highchartContainer" config="highchartsNG"></highchart>
        <img id="binaryImage" />
    </div>
</div>

JavaScript

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);

    }

});