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>

Actual problem is with representation of 'src' attribute of 'img' tag,because...it loads the image using 'base64' format — Trikarandas, Feb 08 '12 at 07:20
hey, have you found any solution..? have a look at this question/answers: http://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem — Asad Malik, Feb 14 '12 at 14:58

Tsvetomir Tsonev · Answer 1 · 2017-01-16T11:33:37.780

7

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

edited Jan 16 '17 at 11:33

answered Mar 01 '12 at 17:10

Tsvetomir Tsonev

105,726
5
27
34

This is not accurate. You can get the svg of a chart via `CHART.svg()`, convert it to canvas and there are plenty of canvas to png libraries (https://code.google.com/p/canvg/). Canvas gets converted to base64 via `toDataUrl()`. – carter Nov 14 '13 at 18:41
The information is actually outdated. The chart now offers direct image export in browsers that support Canvas. See Update above. – Tsvetomir Tsonev Nov 15 '13 at 13:17
One thing not mentioned here is that the imageDataURL() method should be called from the chart's databound event, as it should not be called until the chart has finished loading. Also - I found a simple solution for the Save As issue is to simply wrap the entire chart in an anchor tag, and set the href to imageDataURL(). Of course that also necessitates setting the css text-decoration property to none, otherwise all the text in the chart is underlined. – DanO May 06 '14 at 22:05

score 0 · Answer 2 · edited Jan 16 '15 at 01:12

U can do like this. For this approach u need svg.dll U can download from this link.

http://svg.codeplex.com/releases/view/18884

Javascript:

var chart = $("#chart").data("kendoChart");
var svgString = escape(chart.svg());
    $.ajax({
        url: "/MyController/Sample",
        data: { svg: svgString },
        async: false,
        type: 'Post',
        success: function (data) {
            window.location = "/MyController/getPdf";
        }
    });

Controller:

    [HttpPost]
    [ValidateInput(false)]
    public void Sample(string svg)
    {
        var svgText = System.Web.HttpUtility.UrlDecode(svg);
        Session["chrtData"] = svgText;
    }

    public void getPdf()
    {
        string svgText = Session["chrtData"].ToString();

        var byteArray = Encoding.ASCII.GetBytes(svgText);
        using (var stream = new MemoryStream(byteArray))
        {
            var svgDocument = Svg.SvgDocument.Open(stream);
            //First Way

            var bitmap = svgDocument.Draw();
            MemoryStream docMemStream = new MemoryStream();
            bitmap.Save("D:\\hi.png", System.Drawing.Imaging.ImageFormat.Png);

        }
     }

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

2 Answers2