How to print / export (pdf, xls, printer) the graphs of google chart?

Navigation
2

I created a screen with various graphics using google charts, but I need to print / export to pdf, xls, printer, but of everything I searched on the net I still did not find anything, does anyone know of any way I could do that?

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

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script><scripttype="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>
    
asked by anonymous 06.02.2015 / 14:55

1 answer

1

You talk about exporting to "printer", this really does not make sense to me, but I'll assume you simply want to print with Ctrl + P or the browser print is called directly.

If this is really so, 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><divid="piechart" style="width: 900px; height: 500px;"></div>
<button id="print">Imprimir</button>

You can also use @media to hide all elements (perhaps your chart is on a "multi-page" page) and print. It would look something like: 

@media print {
    body {
         visibility: hidden;
    }

    #piechart {
         visibility: visible;
    }
}

But I can also assume that you might 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 speak of printer, then the solution would be or jsPDF .

To use jsPDF with SVG (your Chart is an SVG :)) you will probably have to use the

09.02.2015 / 21:38
Insert table data with foreign key URL Friendly by title