PhantomJs to save png image of google chart's API GeoChart
google-visualization, javascript, phantomjs
Solution
Try delaying your rendering:
page.open(address, function (status) {
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 1000);
});
This will delay it by 1000ms (1 second), and should be enough time for your chart to load properly.
Problem
I am trying save the chart generated by google charts as a png image. The code works fine for all charts except GeoChart.The image sometimes does appears but often its just blank. Here is the code . render.js ``` var system = require('system'); var page = require('webpage').create(); page.open('chart.html, function () { page.paperSize = { format: 'A4', orientation: 'landscape'}; page.render(system.args[1]); phantom.exit(); }); ``` chart.html ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Chart Generation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type='text/javascript'> google.load('visualization', '1', {'packages': ['geochart']}); google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = { width: 400, height: 200 }; var chart = new google.visualization .GeoChart(document.getElementById('chart_div')); chart.draw(data, options); }; </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html> ``` Usgae in Terminal : ``` phantomjs render.js chart.png ```