Menu
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
481
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.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
