Google chart Download and save PNG file

Question

Here's my google pie chart. Right now, I can right click and save image as PNG. However I need the image download to happen automatically on a specified folder when the page loads.

I tried various canvas options however couldn't get anything to work.

Download SVG as a PNG image

save google gauge chart as a png

Can someone help?

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<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>

    <script type="text/javascript">
        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 src=' +  chart.getImageURI() + '>';
            });
            chart.draw(data, options);
        }
    </script>
</head>
<body>

    <div id="JSFiddle">
        <div id="piechart_3d" style="width: 1100px; height: 500px;"></div>
    </div>
</body>
</html>

score 2 · Accepted Answer · 2020-05-31T08:15:41.393

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)

Google chart Download and save PNG file

1 Answers1