Javascript Implementation

Google provides a large collection of charts that can be drawn with their visualization library. These can be processed through the @cloudformatter by making one minor change in JS code. Google Chart API does not deliver the charts back to the browser with the SVG namespace. The namespace is required for @cloudformatter to process as an SVG. We also change the default google CSS style for overflow to visible. This is because to the @cloudformatter, overflow applies to the whole SVG. Not setting this, some charts can disappear in PDF output if the charts are a fraction of a pixel off.

To accomplish this, a simple change can be made to your JS to add an event handler to fire after the chart is drawn to add this namespace. For example, you may do the following adding the AddNamespaceHandler to process when the chart is "ready".

google.setOnLoadCallback(drawRegionsMap);
function AddNamespaceHandler(){
  var svg = jQuery('#regions_div svg');
  svg.attr("xmlns", "http://www.w3.org/2000/svg");
  svg.css('overflow','visible');
}
function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Germany', 200],
    ['United States', 300],
    ['Brazil', 400],
    ['Canada', 500],
    ['France', 600],
    ['RU', 700]
  ]);
  var options = {};
  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
  google.visualization.events.addListener(chart, 'ready', AddNamespaceHandler);             
  chart.draw(data, options);
}