how to export kendo chart to JPG, PNG, BMP, GIF

2.3k Views Asked by At

Is there any way to export the kendo chart to the JPG, PNG, BMP, GIF.With the format type selection using drop downlist.

function createChart() {
                $("#chart").kendoChart({
                    theme: $(document).data("kendoSkin") || "default",
                    title: {
                        text: "Internet Users"
                    },
                    legend: {
                        position: "bottom"
                    },
                    chartArea: {
                        //It's important that your background NOT be transparent for proper exporting
                        //of some file types - most noticeably Jpeg
                        background: "white"
                    },
                    seriesDefaults: {
                        type: "bar"
                    },
                    series: [{
                        name: "World",
                        data: [15.7, 16.7, 20, 23.5, 26.6]
                    }, {
                        name: "United States",
                        data: [67.96, 68.93, 75, 74, 78]
                    }],
                    valueAxis: {
                        labels: {
                            format: "{0}%"
                        }
                    },
                    categoryAxis: {
                        categories: [2005, 2006, 2007, 2008, 2009]
                    },
                    tooltip: {
                        visible: true,
                        format: "{0}%"
                    }
                });


            }

            $(document).ready(function () {
                setTimeout(function () {
                    // Initialize the chart with a delay to make sure
                    // the initial animation is visible
                    createChart();


                }, 400);
            });
2

There are 2 best solutions below

0
On

this might help.

http://www.kendoui.com/code-library/dataviz/chart/kendo-ui-chart-export.aspx

found this on kendo site itself

0
On

To my knowledge Kendo doesn't offer the possibility to export the chart to a file, you need to use a third-party solution.

Server-side

If you can use a server for the export, you can choose from many tools that can export svg to bitmap.

For example if you use PHP, see this question for a detailed discussion.

Or install Inkscape on your server and than call inkscape inputfile.svg --export-png=exportfile.png, independent of what language or framework you use on the server (it need to have the possibility to execute external programs, however).

In both cases, all you need to send to the server is the actual SVG markup of the chart (note that SVG is actually a XML document). This you can get from the containing HTML element with Javascript.

If you are using the ASP.NET MVC the best course of action for you is to go with the link provided by vinbhai4u which can simplify matters considerably.

Browser-side

If you don't want or can't use the server, there is the Javascript (https://github.com/eligrey/FileSaver.js) library (Demo: http://eligrey.com/demos/FileSaver.js/ ). I think that the library can only export to PNG, though, and has some browser version limitations. Further reading: http://eligrey.com/blog/post/saving-generated-files-on-the-client-side.