Search code examples
javascriptpie-chart

How to convert Pie chart to image using convasjs


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>