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

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

Answer 2

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);
}
}