How to get an image link for a png of my Google chart

Question

I am using a bar chart from Google charts and want to add a link to my page for an image version of the chart.

I tried the following code:

google.visualization.events.addListener(chart, 'ready', function() {
      document.getElementById('png').innerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
    });

But this says: chart.getImageURI is not a function . How can I fix that?

Here is a jsfiddle: https://jsfiddle.net/js8o2nrL/

Answer 1

you're using a material bar chart...

google.charts.Bar
packages: ['bar']

material charts do not support the getImageURI method.

instead, you can use a classic chart...

google.visualization.BarChart
packages: ['corechart']

with the following option...

theme: 'material'

for other options not supported by material charts,
see --> Tracking Issue for Material Chart Feature Parity #2143

---

-- OR --

---

if you want to use a material chart,
you can create the image manually, using --> createObjectURL
then draw the svg image on a canvas,
to get the png, use --> canvas.toDataURL('image/png')

see following working snippet...

 google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Vraag', '2019', '2020'], ['Zijn medewerkers op de hoogte van de algemene VGM instructies?', 5, 2], ['Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?', 1, 3], ['Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?', 1, 3] ]); var options = { chart: { title: 'Afwijkingen per vraag', }, colors: ['#169183','#105f44'], bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar(document.getElementById('barchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); google.visualization.events.addListener(chart, 'ready', function() { var canvas; var domURL; var imageNode; var imageURI; var svgParent; // add svg namespace to chart svgParent = chart.getContainer().getElementsByTagName('svg')[0]; svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); // create image URI domURL = window.URL || window.webkitURL || window; imageNode = chart.getContainer().cloneNode(true); imageURI = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'})); image = new Image(); image.onload = function() { canvas = document.createElement('canvas'); canvas.setAttribute('width', parseFloat(svgParent.getAttribute('width'))); canvas.setAttribute('height', parseFloat(svgParent.getAttribute('height'))); canvas.getContext('2d').drawImage(image, 0, 0); document.getElementById('png').innerHTML = '<a href="' + canvas.toDataURL('image/png') + '">Printable version</a>'; } image.src = imageURI; }); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="barchart_material"></div> <div id='png'></div>