Skip to main content
All CollectionsPDF Code Examples
Code Example: Google Charts Bar Chart
Code Example: Google Charts Bar Chart
Jonathon Fruchte avatar
Written by Jonathon Fruchte
Updated over 7 years ago

Here's a functioning code example of how to make a PDF that uses a Google Chart Bar Chart:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      var didWait = false;
      docraptorJavaScriptFinished = function() {
        return didWait;
      }


      google.charts.load('current', {packages: ['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawBasic);

      function drawBasic() {

        var data = google.visualization.arrayToDataTable([
          ['City', '2010 Population',],
          ['New York City, NY', 8175000],
          ['Los Angeles, CA', 3792000],
          ['Chicago, IL', 2695000],
          ['Houston, TX', 2099000],
          ['Philadelphia, PA', 1526000]
        ]);

        var options = {
          title: 'Population of Largest U.S. Cities',
          chartArea: {width: '50%'},
          hAxis: {
            title: 'Total Population',
            minValue: 0
          },
          vAxis: {
            title: 'City'
          }
        };

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

        google.visualization.events.addListener(chart, 'ready', function(){
          didWait = true;
        });

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart" style="width: 500px; height: 400px;"></div>
  </body>
</html>
Did this answer your question?