[FIXED] How to convert Pie chart to image using convasjs

Issue

I am trying to convert below pie chart to image using canvasjs library. But it is not converting. I did not see any error. Please help me where i am doing error.I have converted other charts to image using canvasja but this pie chart is not converting to image.

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     1],
          ['Eat',      1],
        ]);

        var options = {
          title: 'My Daily Activities'
        };

		
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
		

        chart.draw(data, options);
      }
	  
    
  
    $(function() { 
    $("#divclick").click(function() { 
        html2canvas($("#map-canvas"), {
            useCORS: true,
			onrendered: function (canvas) {
				console.log(canvas);
		  $("#show_img").append(canvas);
			
            }
        });
    });
});
    
 

<script src="https://cdn.jsdelivr.net/npm/2cs-canvas2image@0.0.2/canvas2image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Base64/1.1.0/base64.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" id="divclick" value="Convert to image" />
<div id="show_img">
<div id="map-canvas">
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  
  </div>

Solution

You can use getImageURI() from google charts

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 1],
    ['Eat', 1],
  ]);

  var options = {
    title: 'My Daily Activities'
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);

  $("#divclick").click(function() {
    var imgUri = chart.getImageURI();

    // downloads the base64 img
    var a = document.createElement("a");
    a.href = imgUri
    a.download = "Image.png";
    a.click();
  });
}

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<input type="button" id="divclick" value="Convert to image" />
<div id="piechart" style="width: 900px; height: 500px;"></div>

Answered By - User863

Answer Checked By - Mary Flores (PHPFixing Volunteer)