imageDataURL

Returns a PNG image of the chart encoded as a Data URL.

This method is deprecated and replaced by exportImage.

Returns

String A data URL with image/png MIME type. Will be null if the browser does not support the canvas element.

Example - show a snapshot of the Chart

<div id="stock-chart"></div>
<a download="export.png" id="export" class="k-button">Export PNG</a>
<script>
$("#stock-chart").kendoStockChart({
    series: [{
      type: "line",
      field: "value",
      categoryField: "date",
      data: [
        { value: 1, date: new Date(2012, 1, 1) },
        { value: 2, date: new Date(2012, 1, 2) }
      ]
    }]
});

$("#export").on("click", function() {
  var chart = $("#stock-chart").data("kendoStockChart");
  var imageDataURL = chart.imageDataURL();

  if (navigator.msSaveBlob) {
    var blob = toBlob(imageDataURL, "image/png");
    navigator.msSaveBlob(blob, this.getAttribute("download"));
  } else {
    this.href = imageDataURL;
  }
});

// See: https://goo.gl/qlg5dd
function toBlob(base64, type) {
  var rawData = base64.substring(base64.indexOf("base64,") + 7);
  var data = atob(rawData);
  var arr = new Uint8Array(data.length);

  for (var i = 0; i < data.length; ++i) {
    arr[i] = data.charCodeAt(i);
  }

  return new Blob([ arr.buffer ], { type: type });
}
</script>
In this article
Not finding the help you need? Improve this article