How to export google chart in pdf?

Question

How to export google chart in pdf?

33.9k Views Asked by joun At 18 April 2025 at 10:30

I have draw google chart. Now, I want to put button to save the chart in pdf format. I do look from here Save google charts as pdf and other questions available in stack but it doesn't work.

Print png image by google chart already used but it just open a new tab with the png image but it doesnt open the save as pdf window for user.

Do anyone knows any ways to do it?

Original Q&A

There are 2 best solutions below

Ghanshyam Nakiya On 06 May 2019 at 04:48

You can use Mpdf to create pdf of google chart with store images,

Step 1. create.php

Use google method chart.getImageURI() to get image url then store into the variable after using jquery to submit form.

      <html>
      <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <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',
            };
        // google chart 1
             var g_chart_1 = document.getElementById('g_chart_1');
             var g_chart_1 = new google.visualization.ColumnChart(g_chart_1);
                g_chart_1.draw(data, options);

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

            google.visualization.events.addListener(chart, 'ready', function () {
             chart_div.innerHTML = '<img style="display:none" src="' + chart.getImageURI() + '" class="img-responsive">';
             console.log(chart_div.innerHTML);
            });

            chart.draw(data, options);

        // google chart 2
        var g_chart_2 = document.getElementById('g_chart_2');
              var g_chart_2 = new google.visualization.LineChart(g_chart_2);
        g_chart_2.draw(data, options);

        var chart_div1 = document.getElementById('chart_div1');
            var chart1 = new google.visualization.LineChart(chart_div1);
            google.visualization.events.addListener(chart1, 'ready', function () {

              chart_div1.innerHTML = '<img style="display:none" src="' + chart1.getImageURI() + '" class="img-responsive">';

              console.log(chart_div1.innerHTML);
            });

            chart1.draw(data, options);

        }
        </script>

      <div class="container" id="Chart_details">
          <div id='chart_div'></div><div id='g_chart_1'></div>
          <div id='chart_div1'></div><div id='g_chart_2'></div>
      </div>
          <div align="center">
             <form method="post" id="new_pdf" action="createchartpdf.php">
              <input type="hidden" name="hidden_div_html" id="hidden_div_html" />
              <button type="button" name="create_pdf" id="create_pdf" class="btn btn-danger btn-xs">Create PDF</button>
             </form>
            </div>

      <script>
      $(document).ready(function(){
       $('#create_pdf').click(function(){
        $('#hidden_div_html').val($('#Chart_details').html());
        $('#new_pdf').submit();
       });
      });
      </script>

      </body>
      </html>

step 2. createchartpdf.php

Get HTML data to get images url and store into the images folder, and then retrieve images and content.

print into pdf using mpdf. This is work with live server to print images.

        <?php

        if(isset($_POST["hidden_div_html"]) && $_POST["hidden_div_html"] != '')
        {

            $html = $_POST["hidden_div_html"];
            $doc = new DOMDocument();
            @$doc->loadHTML($html);
            $tags = $doc->getElementsByTagName('img');
            $i=1;
            $result='';
            foreach ($tags as $tag) {
                $file_name = 'images/google_chart'.$i.'.png';
                    $img_Src=$tag->getAttribute('src');
                        file_put_contents($file_name, file_get_contents($img_Src));
                $res= '<img src="images/google_chart'.$i.'.png">';
                $result.=$res;
              $i++;
            }

            //include make_pdf
            include("mpdf60/mpdf.php");
            $mpdf=new mPDF();

            $mpdf->allow_charset_conversion = true;
            $mpdf->SetDisplayMode('fullpage');

            $mpdf->list_indent_first_level = 0; // 1 or 0 - whether to indent the first level of a list
            $mpdf->WriteHTML($result);
            $mpdf->Output();
        }

        ?>

**WhiteHat** · Accepted Answer

you can use jsPDF to create a PDF

use method addImage to add the chart's image uri to the pdf

see following working snippet...

google.charts.load('current', {
  packages: ['controls', 'corechart', 'table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'y0');
  data.addRows([
    [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
    [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
    [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
    [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
    [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
    [66, 70], [67, 72], [68, 75], [69, 80]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  var btnSave = document.getElementById('save-pdf');

  google.visualization.events.addListener(chart, 'ready', function () {
    btnSave.disabled = false;
  });

  btnSave.addEventListener('click', function () {
    var doc = new jsPDF();
    doc.addImage(chart.getImageURI(), 0, 0);
    doc.save('chart.pdf');
  }, false);

  chart.draw(data, {
    chartArea: {
      bottom: 24,
      left: 36,
      right: 12,
      top: 48,
      width: '100%',
      height: '100%'
    },
    height: 600,
    title: 'chart title',
    width: 600
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<input id="save-pdf" type="button" value="Save as PDF" disabled />
<div id="chart_div"></div>

How to export google chart in pdf?

There are 2 best solutions below

Related Questions in PDF

Related Questions in CHARTS

Related Questions in GOOGLE-VISUALIZATION

Related Questions in PYGOOGLECHART

Trending Questions

Popular # Hahtags

Popular Questions