How to print/export (pdf, xls, printer) the graphics from google Chart?

Question

How to print/export (pdf, xls, printer) the graphics from google Chart?

Asked 9 years, 10 months ago

Viewed 1,198 times

2

I created a screen with several graphics using google Charts, but I need to print/export to pdf, xls, printer, only from everything I searched on the net I haven’t found anything yet, does anyone know somehow how I could do it?

From the most basic example, can anyone give me a light?!

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.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'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Do you want to print #piechart only? You’ve tried "@media" and window.print?

– Guilherme Nascimento

2015/02/08 at 13:09
I need to print both the #piechart and other elements that have as titles and texts, but in this example that I passed would be only the graphics generated. And I haven’t tried using @media yet, do you have an example for the case? Valew

– Marcelo Diniz

2015/02/08 at 15:22

1 answer

Browser other questions tagged google-charts export

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2015-02-09T20:38:50+00:00

You say export to "printer", it doesn’t really make sense to me, but I’ll assume you just want to print with Ctrl + P or that the browser print dialog is called directly.

If that’s really it, then you can just call window.print():

google.load("visualization", "1", {packages:["corechart"]});
google.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'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
}

document.getElementById("print").onclick = function() {
    window.print();
};

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<button id="print">Imprimir</button>

You can also use the @media to hide all elements (if your Chart is on a page with "several things") and print. It would look something like:

@media print {
    body {
         visibility: hidden;
    }

    #piechart {
         visibility: visible;
    }
}

But I can also assume that maybe you want to say something else like "export to printer", maybe you just really wanted to export with the intention of generating a document as PDF, even in the part you talk about printer, then the solution would be the jsPDF.

To use jsPDF with SVG (your Chart is an SVG :) ) you probably need to use the plugin sillysvgrenderer (is in the repository itself). An example of how to add SVG with the plugin would be:

var doc = new jsPDF();
var chart = document.querySelector("#piechart svg");
var sourcecode = new XMLSerializer().serializeToString(chart);

//Adiciona o SVG
doc.addSVG(sourcecode, 15, 15);

//Download do arquivo
doc.save("sample-file.pdf");