title: How to create downloadable link of google chart in image file
body: <p>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?</p>
  
  <p><a href="https://codepad.remoteinterview.io/KOURCFTBEG" rel="nofollow noreferrer">https://codepad.remoteinterview.io/KOURCFTBEG</a></p>
  
  <p>As I viewed a lot of examples, most of them put</p>
  
  <pre><code>google.visualization.events.addListener(chart, 'ready',function() {
  console.log(chart.getChart().getImageURI());
  document.getElementById('png').innerHTML = '&lt;a href="' + 
  chart.getChart().getImageURI() + '"&gt;Printable version&lt;/a&gt;';
  });
  </code></pre>
  
  <p>It seems to me that this would create a downloadable link to an image of the google chart on the <code>&lt;div id=png&gt;</code>But in my case, no link or clickable button is created.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = '&lt;a href="' + chart.getChart().getImageURI() + '"&gt;Printable version&lt;/a&gt;';
          }); 
          chart.draw(data, options);
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;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']}]}"&gt;&lt;/script&gt;
  
  &lt;div id="chart_div" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
  &lt;div id='png'&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I followed the online source as similar as I can, but still get error like <strong>chart.getURI() is not function.</strong>
  Here is the online source I referred most. <a href="https://jsfiddle.net/kujxsn7z/ManyThanks" rel="nofollow noreferrer">Here is Fiddle.</a></p>