how to get imageUri for google chart - charts

Question

This is my sample material bar graph and i want the image uri for the plotted graph
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'vertical', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
console.log(chart.getImageURI());
};
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
But the console giving me error like
chart.getImageURI is not a function

Answer 1

you can use html2canvas
you'll need the following two files from the build
<script src="html2canvas.js"></script>
<script src="html2canvas.svg.js"></script>
then on the chart's 'ready' event...
google.visualization.events.addListener(chart, 'ready', function () {
// add svg namespace to chart
$(chartContainer).find('svg').attr('xmlns', 'http://www.w3.org/2000/svg');
// get image uri
html2canvas(chartContainer, {
allowTaint: true,
taintTest: false
}).then(function(canvas) {
console.log(canvas.toDataURL('image/png'));
});
});
UPDATE
another method is to convert the svg to an image and draw it on a canvas,
then pull the uri from the canvas...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'vertical', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chartContainer = document.getElementById('dual_x_div');
var chart = new google.charts.Bar(chartContainer);
google.visualization.events.addListener(chart, 'ready', function () {
var canvas;
var domURL;
var imageNode;
var imageURL;
var svgParent;
// add svg namespace to chart
domURL = window.URL || window.webkitURL || window;
svgParent = chartContainer.getElementsByTagName('svg')[0];
svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
imageNode = chartContainer.cloneNode(true);
imageURL = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'}));
image = new Image();
image.onload = function() {
canvas = document.getElementById('canvas');
canvas.setAttribute('width', parseFloat(svgParent.getAttribute('width')));
canvas.setAttribute('height', parseFloat(svgParent.getAttribute('height')));
canvas.getContext('2d').drawImage(image, 0, 0);
console.log(canvas.toDataURL('image/png'));
}
image.src = imageURL;
});
chart.draw(data, options);
});
.hidden {
display: none;
visibility: hidden;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div"></div>
<canvas class="hidden" id="canvas"></canvas>

Answer 2

I noticed this question was posted three years ago. Google Charts probably have had quite a few updates since then. According to Google Charts though, getImageURI should work for all core charts and geocharts. The chart in question is a bar chart, which is one of the core charts of Google Charts. So, getImageURI should work. Looking at your first line of codes, you specify bar as the packages. You need to change it to say corechart. So, you will have like the following line
google.charts.load('current', {packages: ['corechart']});
And then further down, change the chart definition to var chart = new google.visualization.BarChart(document.getElementById('dual_x_div'));
After making these changes, chart.getImageURI() should return what you want. I recently did a bar chart myself and that's how I got mine to work.