getImageURI() returning a big url that won't o

Question

I'm currently converting my google column chart into a png, and then getting the url using chart_div.innerHTML, paste it into browser (Firefox).

My error is : 413. That’s an error. Your client issued a request that was too large

Is there any way to reduce the size of the url ? or any possible solution around it ? my goal is to be able to convert all of my 4 charts to pngs and print each, or at least 1.

Answer 1

send the image to a new window,
this will allow you to right click and save as, print, etc...

window.open(chart.getImageURI(), '_blank');

the above creates a "pop-up" and may be blocked,
you can also change the location of the current page...

location.href = chart.getImageURI();

see following fiddle for an example...

https://jsfiddle.net/7qtuhwaw/

EDIT

an option for chrome is to create a download link,
see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', '2015');
    data.addColumn('number', '2016');
    data.addRows([
       [new Date('01/01/2016'), 200, 210],
       [new Date('02/01/2016'), 190, 220],
       [new Date('03/01/2016'), 205, 200],
       [new Date('04/01/2016'), 220, 230],
       [new Date('05/01/2016'), 212, 210],
       [new Date('06/01/2016'), 185, 193],
       [new Date('07/01/2016'), 196, 207]
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function () {
      downloadLink = document.createElement('a');
      downloadLink.href = chart.getImageURI();
      downloadLink.download = 'chart.png';
      downloadLink.click();
    });

    chart.draw(data, {
      hAxis: {
        format: 'MMM'
      },
      height: 400
    });
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="image_div"></div>

Answer 2

Example solution from google developpers as seen on the issues page of google charts.

Links:

Tutorial : https://developers.google.com/chart/interactive/docs/printing

Answer 3

Unless you have access to Google Servers, you will need to grab the charts in chunks. HTTP 413 means that the server declined your request, because it's just too big. Try splitting your chart into multiple charts and then either put it back together locally or just display the chunks.