JSFiddle - React, Tailwind, and code Playground
by damiantt
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input id="Draw" type="button" value="Draw" onclick="drawChart()" />
<div id="chart_div" style="height: 600px; width: 100%;"></div>
<div id="chart_div2" style="height: 600px; width: 100%;"></div>
<div id="info_div" style="margin-top: 15px; font-size: 12px; "></div>
JavaScript
google.charts.load('current', {packages: ['corechart', 'bar']});
$('#info_div').empty();
function toImg() {
var chartArea = document.getElementById('chart_div').getElementsByTagName('svg')[0].parentNode;
var svg = new XMLSerializer().serializeToString(document.getElementById('chart_div').getElementsByTagName('svg')[0]);
var doc = document.getElementById('chart_div').ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
function isIE() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
var ua = window.navigator.userAgent;
//Internet Explorer | if | 9-11
if (isIE() == 9 || isIE() == 8) {
$('#info_div').empty().html("Kliknij prawym klawiszem na poniższy wykres a następnie wybierz opcję ,,Zapisz obraz jako...''<br><br>");
$('#info_div').append($('<img/>', {
src: imgData
}));
} else if (isIE() == 10 || ua.indexOf("Trident/7.0") > 0) {
//alert("Shut down this junk! | IE 10 v 11");
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, 'wykres.png');
} else {
//alert("Thank god it's not IE!");
var download = document.createElement('a');
download.href = imgData;
download.download = 'wykres.png';
function fireEvent(obj, evt) {
var fireOnThis = obj;
if (document.createEvent) {
var evObj = document.createEvent('MouseEvents');
evObj.initEvent(evt, true, false);
fireOnThis.dispatchEvent(evObj);
} else if (document.createEventObject) {
...