Auto Export chart on render using mouse event- CanvasJS JavaScript Charts

Auto Export chart on render using mouse event- CanvasJS JavaScript Charts

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>

JavaScript

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

$.when(chart.render()).then(function	()	{						
      var canvas = $("#chartContainer .canvasjs-chart-canvas").get(0);
      var dataURL = canvas.toDataURL('image/png');              
			//console.log(dataURL);
    	//Save Image creating an element and clicking it
      var save = document.createElement('a');
      save.href = dataURL;
      save.download = 'CanvasJS.png';//Save as CanvasJS.png-File Name
      var event = document.createEvent("MouseEvents");
      event.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0
        , false, false, false, false, 0, null
      );
      save.dispatchEvent(event);

  });