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);
});
var svg = $("svg").attr({
"xmlns": "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink"
})[0];
var dataURI = "data:image/svg+xml;charset=utf-8;base64," + btoa(svg.outerHTML.trim());
$.post("/echo/html/", {
html: dataURI
}, "html")
.then(function (data) {
console.log(data);
// var _svg = window.open(data, "_svg");
}, function...