Q:

How to create downloadable link of google chart in image file

In the code, I am trying to add a hyperlink below the chart. As I click it, it will take me to a new tab with a google chart image for download.Any helps?
https://codepad.remoteinterview.io/KOURCFTBEG
As I viewed a lot of examples, most of them put
google.visualization.events.addListener(chart, 'ready',function() {
console.log(chart.getChart().getImageURI());
document.getElementById('png').innerHTML = '<a href="' + 
chart.getChart().getImageURI() + '">Printable version</a>';
});

It seems to me that this would create a downloadable link to an image of the google chart on the <div id=png>But in my case, no link or clickable button is created.

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

      function drawBar() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2013', 1001, 401, 201],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales,  Expenses, and Profit: 2014-2017',
          }
        };
 //---------------------------//
        var chart = new google.charts.Bar(document.getElementById('chart_div'));
  
  // Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function() {
            console.log(chart.getChart().getImageURI());
                document.getElementById('png').innerHTML = '<a href="' + chart.getChart().getImageURI() + '">Printable version</a>';
        }); 
        chart.draw(data, options);
      }
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']},{'name':'visualization','version':'1.0','packages':['controls']}]}"></script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id='png'></div>
</body>

I followed the online source as similar as I can, but still get error like chart.getURI() is not function.
Here is the online source I referred most. Here is Fiddle.

A:

By removing getChart() in chart.getChart().getImageURI()and
,in package, by modifying bar to corechart can do the work.

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

      function drawBar() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2013', 1001, 401, 201],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales,  Expenses, and Profit: 2014-2017',
          }
        };
 //---------------------------//
   var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  
  // Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function() {
           // console.log(chart.getImageURI());
                document.getElementById('png').innerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
        }); 
        chart.draw(data, options);
      }
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']},{'name':'visualization','version':'1.0','packages':['controls']}]}"></script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id='png'></div>
</body>

