nvd3.js pie chart export to Excel in angular js

Question

I am using nvd3.js to create a pie chart. I would like to export this chart to Excel. For export I am using FileSaver.js

My HTML looks like:

<body ng-controller="MainCtrl">
<button ng-click="exportData()">click</button>
<div id="charts">
   <nvd3  options="options" data="data"></nvd3>
</div>    
</body>

My code looks like:

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {

$scope.exportData = function () {
    alert("function call");
    var blob = new Blob([document.getElementById('charts').innerHTML ], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    saveAs(blob, "Report.xls");
};

$scope.options = {
        chart: {
            type: 'pieChart',
            height: 500,
            x: function(d){return d.key;},
            y: function(d){return d.y;},
            showLabels: true,
            transitionDuration: 500,
            labelThreshold: 0.01,
            legend: {
                margin: {
                    top: 10,
                    right: 35,
                    bottom: 5,
                    left: 0
                }
            },   
        }
    };

    $scope.data = [
        {
            key: "suraj",
            y: 5
        },
        {
            key: "darshan",
            y: 2
        },
        {
            key: "kapil",
            y: 9
        },
        {
            key: "Four",
            y: 7
        },
        {
            key: "Five",
            y: 4
        },
        {
            key: "Six",
            y: 3
        },
        {
            key: "Seven",
            y: .5
        }
    ];
});

Thanks for your help!

nvd3.js pie chart export to Excel in angular js

0 Answers0