Como imprimir gráficos PNG

Visão geral

Os gráficos do Google podem ser impressos diretamente do seu navegador ou do JavaScript usando a função print(). Se você quiser conceder acesso a uma imagem PNG de um gráfico, use o método getImageURI(). No momento, isso funciona nos principais gráficos e gráficos geográficos.

Se o gráfico (do tipo ChartType, como ColumnChart ou PieChart) for chamado de my_gráfico e o div que o exibe for my_div, veja como acessá-lo como um arquivo PNG:

    var my_div = document.getElementById('chart_div');
    var my_chart = new google.visualization.ChartType(chart_div);

    google.visualization.events.addListener(my_chart, 'ready', function () {
      my_div.innerHTML = '<img src="' + my_chart.getImageURI() + '">';
    });

    my_chart.draw(data);

Observação: aguarde o evento ready, como mostrado nos exemplos desta página, para garantir que o gráfico tenha concluído a renderização.

Observação: isso só funcionará em navegadores que oferecem suporte ao elemento <canvas> HTML5. Portanto, não funcionará no Internet Explorer 9 ou anterior.

Veja um exemplo completo:

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Element', 'Density', { role: 'style' }],
        ['Copper', 8.94, '#b87333', ],
        ['Silver', 10.49, 'silver'],
        ['Gold', 19.30, 'gold'],
        ['Platinum', 21.45, 'color: #e5e4e2' ]
      ]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        bar: {groupWidth: '95%'},
        legend: 'none',
      };

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

      // Wait for the chart to finish drawing before calling the getImageURI() method.
      google.visualization.events.addListener(chart, 'ready', function () {
        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
        console.log(chart_div.innerHTML);
      });

      chart.draw(data, options);

  }
  </script>

<div id='chart_div'></div>

Quando o programa é executado, chart_div.innerHTML é definido como essa codificação PNG do gráfico e exibido no Console JavaScript:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA...

Quando esse URI é colocado diretamente em uma barra de endereço do navegador, os navegadores modernos renderizam a imagem:

É possível incluir um link para a versão para impressão com a seguinte linha de JavaScript:

  document.getElementById('png').outerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';

seguido por esta linha no HTML:

  <div id='png'></div>

Seleção de snapshots

Como criador de gráficos, você pode fazer tudo nos gráficos de maneira programática que os usuários podem fazer nos navegadores deles. Então, se você quiser criar uma imagem estática do gráfico com uma dica mostrando ou com miras em um ponto específico, você pode fazer isso chamando setSelection() antes de getImageURI(), como mostrado abaixo.

Veja um gráfico de dispersão com 100 pontos aleatórios, um com dica e mira pré-selecionados:

Atualize a página para ver outro ponto selecionado. O código, com as principais linhas em negrito:

<script type="text/javascript">
  google.charts.load("current", {packages:['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number');
    data.addColumn('number');
    for (var i = 0; i < 100; i++)
      data.addRow([Math.floor(Math.random() * 100),
                   Math.floor(Math.random() * 100)]);

    var options = {
      legend: 'none',
      crosshair: { trigger: 'both' },   // Display crosshairs.
      tooltip: { trigger: 'selection' } // Display tooltips on selection.
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('scatter_setselection'));

    google.visualization.events.addListener(chart, 'ready', function () {
      chart.setSelection([{row:99, column:1}]); // Select one of the points.
      png = '<a href="' + chart.getImageURI() + '">Printable version</a>';
      console.log(png);
    });

    chart.draw(data, options);
  }