Print Chart using toDataurl & Iframe - CanvasJS

Print Chart using toDataurl & Iframe - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<button id="printChart">
Print Chart
</button>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Print Chart using toDataurl"
  },
  data: [
    {
      type: "spline",
      dataPoints: [ 
        { x: 10, y: 4 }, 
        { x: 20, y: 7 },
        { x: 30, y: 2 },
        { x: 40, y: 3 },
        { x: 50, y: 5 }
      ]
    }
  ]
});
chart.render();

document.getElementById("printChart").addEventListener("click", function(){
  printChart(chart);
});

function printChart(chart){
  var canvas = $("#chartContainer .canvasjs-chart-canvas").get(0);
  var dataURL = canvas.toDataURL();
  var _chart = chart;

  var printFrame = document.createElement("iframe");
  printFrame.setAttribute("class", "canvasjs-chart-print-frame");
  printFrame.setAttribute("style", "position:absolute; width:100%; border: 0px; margin: 0px 0px 0px 0px; padding 0px 0px 0px 0px;");
  printFrame.style.height = chart.height + "px";
  chart._canvasJSContainer.appendChild(printFrame);

  var printDoc = printFrame.contentWindow || printFrame.contentDocument.document || printFrame.contentDocument;

  printDoc.document.open();
  printDoc.document.write('<!DOCTYPE HTML>\n<html><body style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"><img src="' + dataURL + '"/><body/></html>');
  printDoc.document.close();

  setTimeout(function () {
    printDoc.focus();
    printDoc.print();
    setTimeout(function () {
      _chart._canvasJSContainer.removeChild(printFrame);
    }, 1000);
  }, 500);
}