Save google chart as image
That method is no longer necessary to get an image of the chart. You can call the chart's getImageURI method instead to get a URL string for generating the image:
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:
window.open(imgUri);
});
chart.draw(data, {
title:"Daily Sales",
width:500,
height:400,
hAxis: {title: "Daily"}
});
If you open the image URI, you can right-click the image to save it.
Google chart Download and save PNG file
You can achiev a download with the download html-attribute.
example:
<a href="/image.png" download>
To achiev that in your app do this:
add a download link
<a id="download_link" href="/" download="">download</a>
and change its href attribute as soon as the chart loaded
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
});
if you want to download to happen automatically as soon as the page loaded:
make the a tag invisible
<a style="display:none" id="download_link" href="/" download="">download</a>
and fire a click event directly on it
document.getElementById("download_link").click();
so the google.visualization.events.addListener function should look like this:
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
document.getElementById("download_link").click();
});
the whole code should look like this: (auto-download)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="piechart_3d"></div>
<a style="display:none" id="download_link" href="/" download>download</a>
</body>
<script>
google.charts.load("current", { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
document.getElementById("download_link").click();
});
chart.draw(data, options);
}
</script>
</html>
selecting a folder to put in the download is not possible (for security reasons)
Export Google visualization as picture
first, in order to generate an image of the chart,
you need to wait for the chart's 'ready' event.
in order to wait for the 'ready' event,
you need access to the chart object.
you will not be able to use the google.visualization.drawChart method,
because it does not return a handle to the chart.
next, the WordTree chart, does not have a method for getImageURI,
so you will need to create the image manually, from a blob.
see following working snippet...
google.charts.load('current').then(function () { // get chart container var container = document.getElementById('mywordtree');
// create chart var chart = new google.visualization.ChartWrapper({ chartType: 'WordTree', containerId: container.id, dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1vi-YzV7s7eZ25938Q57DbZvT0iqggiCqRvDgxeZtP6c/edit?usp=sharing', options: { wordtree: { format: 'implicit', //alt type is 'suffix', 'prefix' type: 'suffix', word: 'prescription' } } });
// listen for ready event google.visualization.events.addListener(chart, 'ready', function () { var domUrl; // object url var image; // chart image var imageUrl; // chart image url var svg; // svg element
// add svg namespace to chart svg = container.getElementsByTagName('svg')[0]; svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
// create image url from svg domUrl = window.URL || window.webkitURL || window; imageUrl = domUrl.createObjectURL(new Blob([svg.outerHTML], {type: 'image/svg+xml'}));
// create chart image image = new Image(); image.onload = function() { // replace chart with image container.innerHTML = image.outerHTML; } image.src = imageUrl; });
// draw chart chart.draw();});<script src="https://www.gstatic.com/charts/loader.js"></script><div id="mywordtree"></div>save google Chart as image when using the visualization ChartEditor;
change chartSave as follows, to correct Column1...
function chartSave(){
chartWrap = chartEd.getChartWrapper();
chartWrap.draw();
}
see following working snippet...
var chartEd = null; var chartWrap = null; var chartEditorDiv = null; // Populates the chart div on startup and initiates global vars. Called on page load. function chartDraw(){ // Initialize Chart editor handle chartEd = new google.visualization.ChartEditor(); google.visualization.events.addListener(chartEd, 'ok', chartSave); chartEditorDiv = document.getElementById('chartEditorDiv');
// Add the chart to the page chartWrap = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', 'query':'SELECT A,D WHERE D > 100 ORDER BY D', 'options': {'title':'Population Density (people/km^2)', 'legend':'none'} }); chartWrap.draw(chartEditorDiv); }
// User clicked 'ok' to save chart function chartSave(){ chartWrap = chartEd.getChartWrapper(); chartWrap.draw(); }
// Onclick handler, opens the editor function chartLoadEditor() { chartEd.openDialog(chartWrap, {}); } function chartPNG(){ var sIMG = chartWrap.getChart().getImageURI(); //var sIMG = chartEd.getChartWrapper().getChart().getImageURI(); // this way not working. document.getElementById('imagePrint').innerHTML = '<img src=' + sIMG + '>' } google.setOnLoadCallback(chartDraw);
// Chart 2 var chart2Ed; var chart2Wrap = null; var chart2EditorDiv = null; var chart2Object = null; // Populates the chart div on startup and initiates global vars. Called on page load. function chart2Draw(){ // Initialize Chart editor handle chart2Ed = new google.visualization.ChartEditor(); google.visualization.events.addListener(chart2Ed, 'ok', chart2Save); google.visualization.events.addListener(chart2Ed, 'print', chart2PNG); chart2EditorDiv = document.getElementById('chart2EditorDiv');
// Add the chart to the page chart2Wrap = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', 'query':'SELECT A,D WHERE D > 100 ORDER BY D', 'options': {'title':'Population Density (people/km^2)', 'legend':'none'} }); chart2Object = chart2Wrap.draw(chart2EditorDiv); }
// User clicked 'ok' to save chart function chart2Save(){ var sT = chart2Ed.getChartWrapper(); chart2Object = sT.draw(chart2EditorDiv); document.getElementById('image2Print').innerHTML = '<img src=' + sT.getChart().getImageURI() + '>' }
// Onclick handler, opens the editor function chart2LoadEditor() { chart2Ed.openDialog(chart2Wrap, {}); } function chart2PNG(){ var chIMG = chart2Ed.getChartWrapper().getChart().getImageURI(); document.getElementById('image2Print').innerHTML = '<img src=' + chIMG + '>' } google.setOnLoadCallback(chart2Draw);<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['table, charteditor']}]}"></script><div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em"> <table class="columns" width="100%"> <tr> <td>Col 1</td> <td>Col 2</td> <tr> <td> <input type="submit" name="loadcharteditor" id="chartLoadeditor" value="Edit me!" onClick="chartLoadEditor()" style="font-size:18px;"> </td> <td> <input type="submit" name="loadcharteditor2" id="chart2Loadeditor" value="Edit - also gets render of new chart!" onClick="chart2LoadEditor()" style="font-size:18px;"> </td> </tr> <tr> <td> <div id="chartEditorDiv"></div> </td> <td> <div id="chart2EditorDiv"></div> </td> </tr> <tr> <td> <input type="submit" name="PNGChart" value="PNG - only does original chart" onClick="chartPNG()" style="font-size:18px;"> </td> <td> <input type="submit" name="PNGChart2" value="PNG 2. Any ideas?" onClick="chart2PNG()" style="font-size:18px;"> </td> </tr> <tr> <td> IMG1:<div id=imagePrint></div> </td> <td> IMG:<div id=image2Print></div> </td> </tr> </table> </div>Save Google charts as a image
When you visit the site, paste this in the console (overwriting the malfunctioning function).
function getImgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
var doc = chartContainer.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);
return imgData;
}
In JS it was searching for an iframe bla bla to get the svg.
To automatically save the image, you can just let the method being invoked programmatically.
document.body.addEventListener("load", function() {
saveAsImg( document.getElementById("pie_div")); // or your ID
}, false );
For saving images serverside, this post could be helpful save a PNG image server-side
Update
Posting images to PHP (index.js)
function saveToPHP( imgdata ) {
var script = document.createElement("SCRIPT");
script.setAttribute( 'type', 'text/javascript' );
script.setAttribute( 'src', 'save.php?data=' + imgdata );
document.head.appendChild( script );
}
function save() {
var canvas = document.getElementById("canvas"), // Get your canvas
imgdata = canvas.toDataURL();
saveToPHP( imgdata );
}
function drawOnCanvas() {
var canvas = document.getElementById("canvas"), // Get your canvas
ctx = canvas.getContext("2d");
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#FFFF00";
ctx.beginPath();
ctx.arc(100,99,50,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
drawOnCanvas(); // Test
save();
save.php
<?php
// Get the request
$data = $_GET['data'];
// Save to your DB.
?>
Google Charts as Image
It is possible to generate a url that will render an image of a chart using the Google Chart Wizard. However, that service recently (April I believe) because deprecated. It still works fine, but for a long term solution, you may have to come up with another method.
Edit
Another method would be to generate the image and save it to your server before sending the email. You can do this by having a page on your server dedicated to generating the chart by parsing a given slug, and when the chart is loaded send a POST request with the image data. You can access the data URI by using a hidden canvas (HTML5 is required) and the canvg javascript plugin:
chart_area = document.getElementById("chart_div").getElementsByTagName('iframe')[0].contentDocument.getElementById("chartArea");
svg = chart_area.innerHTML;
canvas = document.getElementById("hidden_canvas");
canvas.setAttribute('width', chart_area.offsetWidth);
canvas.setAttribute('height', chart_area.offsetHeight);
canvg(canvas, svg);
image_data_uri = canvas.toDataURL("image/png");
How to export google chart in pdf?
you can use jsPDF to create a PDF
use method addImage to add the chart's image uri to the pdf
see following working snippet...
google.charts.load('current', { packages: ['controls', 'corechart', 'table']}).then(function () { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'y0'); data.addRows([ [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48], [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57], [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53], [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65], [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65], [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70], [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70], [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68], [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69], [66, 70], [67, 72], [68, 75], [69, 80] ]);
var container = document.getElementById('chart_div'); var chart = new google.visualization.LineChart(container); var btnSave = document.getElementById('save-pdf');
google.visualization.events.addListener(chart, 'ready', function () { btnSave.disabled = false; });
btnSave.addEventListener('click', function () { var doc = new jsPDF(); doc.addImage(chart.getImageURI(), 0, 0); doc.save('chart.pdf'); }, false);
chart.draw(data, { chartArea: { bottom: 24, left: 36, right: 12, top: 48, width: '100%', height: '100%' }, height: 600, title: 'chart title', width: 600 });});<script src="https://www.gstatic.com/charts/loader.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script><input id="save-pdf" type="button" value="Save as PDF" disabled /><div id="chart_div"></div>Related Topics
What Do Two Colons Mean in PHP
How to Receive a File via Http Put with PHP
Strange Behavior When Overriding Private Methods
How to Log into Joomla Through an External Script
Oracle 11G Xe Greek Character Set Not Displaying
Phpmailer Sending Mail to Spam in Hotmail. How to Fix
In PHP, How to Add an Object Element to an Array
PHP Checkbox Set to Check Based on Database Value
Type Hinting in PHP 7 - Array of Objects
Place PHP Results Inside HTML Page
Advantages/Inconveniences of Heredoc VS Nowdoc in PHP
Convert Epoch Time to Date PHP
How to Display Woocommerce Category Image
Why Are Escape Characters Being Added to the Value of the Hidden Input
Avoid Add to Cart for Specific Product Categories If User Is Unlogged in Woocommerce
How to Post a Large Amount of Data Within PHP Curl Without Memory Overhead