Code Example: Google Charts Geo Chart Documentation

Code Example: Google Charts Geo Chart

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

<html>
  <head>
    <!--Load the AJAX API-->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
     var data;
     var chart;

      // Load the Visualization API and the geochart package.
      google.load('visualization', '1', {'packages':['corechart','geochart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create our data table.
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        // Set chart options
        var options = {'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

      function markAsDone() {
        window.status = 'done';
      }

      window.docraptorJavaScriptFinished = function() {
        return window.status == 'done';
      }
      var renderTime = 2000;
      setTimeout(markAsDone, renderTime)
    </script>
  </head>
  <body>
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

Code Example: Google Charts Geo Chart

Ready to get started? Try DocRaptor for free with unlimited test documents.