CODEWITHSUNDEEP
angularjskendo-uikendo-chart
GOPAL SHARMA
GOPAL SHARMA

Reputation: 687

Export Kendo chart to pdf with a logo in angularJS

Here is my code of angularjs to export only pdf but i want to export with a custom logo. Any help on this question? My Kendo Chart HTML Code is here:

<div kendo-chart="vm.chart"
                 k-options="vm.chartOptions"
                 k-data-source="vm.chartOptions.datasource">
            </div>

And Export Button code is here..

vm.saveAsPdf = function (event) {
    var elem ;
    if (navigator.userAgent.indexOf("Chrome") !== -1) {
        elem = event.toElement;
    }
    else {
        elem = event.currentTarget;
    }
    //$(elem).parent().next().find('.k-chart').getKendoChart().saveAsPDF();
    debugger;
    var chart = $(".k-chart").getKendoChart();

    var fileName = $(elem).closest('li').children().find('.ng-binding').text().trim();
    chart.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
        kendo.saveAs({
            dataURI: data,
            fileName: fileName + ".pdf"
        });
    });
}

Upvotes: 0

Views: 1011

Answers (1)

ezanker
ezanker

Reputation: 24738

Use the render event of the chart to draw on its surface once the chart has been rendered.

Then use the Kendo Drawing Image to add the logo.

render: function(e){
    var chart = e.sender;
    var draw = kendo.drawing;
    var geom = kendo.geometry;

    var rect = new geom.Rect(
        [50, 0],  // Position of the top left corner
        [400, 60] // Size of the rectangle
    );
    var image = new draw.Image("https://www.w3.org/Icons/SVG/svg-logo-h.svg", rect);
    chart.surface.draw(image);
}

DEMO

In the demo I am adding a random image near the top left of the chart.

Upvotes: 0

Related Questions