How to export kendoui dataviz chart to (.png) or (.jpg) image format by poping up Save-As window?

Question

I am using kendoui dataviz charts, and I need to export those charts into (.png) or (.jpg) image format. Basically kendoui dataviz chart has a built-in method called 'svg()'.

'svg()' Returns the SVG representation of the current chart. The returned string is a self-contained SVG document.

Example

var chart = $("#chart").data("kendoChart");
var svgText = chart.svg();

Now svgText contains details of chart image..can anybody tell me how to convert these data to actual image format and pop up a Save As prompt ???

code example: I tried this, but it doesn't prompt any 'SaveAs' popup

     <div id="example" class="k-content">
              <div class="chart-wrapper">
                  <div id="chart"></div>
                     <center>
                        <div>
                          <input type="button" value="click" onclick="disp();" />
                        </div>
                     </center>
                  <div>
      <canvas id="canvas"></canvas>
      </div>
        </div>
           </div>


          <script type="text/javascript">

            function disp() {
                var chart = $("#chart").data("kendoChart");
                var svgText = chart.svg();
                var c = document.getElementById('canvas');
                canvg(c,svgText);
                var img    = c.toDataURL("image/png");
                document.write('<img src="' + img + '"/>');
                window.win = open(imgOrURL);
                setTimeout('win.document.execCommand("SaveAs")', 100);
                }

              function createChart() {
                $("#chart").kendoChart({
                    theme: $(document).data("kendoSkin") || "default",
                    title: {
                        text: "Internet Users"
                    },
                    legend: {
                        position: "bottom"
                    },
                    chartArea: {
                        background: ""
                    },
                    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 () {
                    createChart();

                },100);


                $(document).bind("kendo:skinChange", function (e) {
                    createChart();
                  });
             });
    <script>                     

Answer 1

UPDATE 2

The Chart now includes various export options - PNG, SVG and a vector PDF. See the Export demo for reference.

UPDATE

The Chart now has built-in method for obtaining the exported image (base64 encoded):

var img = chart.imageDataURL();

I'm not aware of a cross-browser way to display a "Save As" dialog.

See also: API Reference

Original response follows:

Exporting the Chart image in-browser is not possible. We have prepared a demo that shows how to convert the SVG document to PNG/PDF on the server using Inkscape.

The demo application is implemented in ASP.NET MVC, but does not depend on any of its features and can be ported to other frameworks.

You can find the demo on GitHub:

https://github.com/telerik/kendo-examples-asp-net/tree/master/chart-inkscape-export