JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<div id="visualization"></div>
Right-click this image to save it:<br />
<img id="chartImg" />
JavaScript
function drawVisualizationDaily() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Daily', 'Sales'],
['Mon', 4],
['Tue', 6],
['Wed', 6],
['Thu', 5],
['Fri', 3],
['Sat', 7],
['Sun', 7]
]);
// Create and draw the visualization.
var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'ready', function () {
var imgUri = chart.getImageURI();
// do something with the image URI, like:
document.getElementById('chartImg').src = imgUri;
});
chart.draw(data, {
title:"Daily Sales",
width:500,
height:400,
hAxis: {title: "Daily"}
});
$("[fill='#3366cc']").each(function( index, element ) {
var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS(null,'x',element.x.baseVal.value);
svgimg.setAttributeNS(null,'y',element.y.baseVal.value);
svgimg.setAttributeNS(null,'width',element.width.baseVal.value);
svgimg.setAttributeNS(null,'height',element.height.baseVal.value);
svgimg.setAttributeNS(null,'preserveAspectRatio','none');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', 'http://fc03.deviantart.net/fs27/i/2011/193/9/f/texture_1a_by_jakezdaniel-d1b6lmo.jpg');
$(element).parent().append(svgimg);
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualizationDaily});