Why doesn't Zombie.js work with Google Charts?

Question

I have a simple web page that loads the Google Chart API:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    console.log("load() called");
</script>

It works fine when I hit it with my browser. In Chrome, the load() call requests a bunch of external resources:

In Zombie, only one external resource is requested:

zombie Opened window http://localhost/graph  +7s
zombie GET http://localhost/graph => 200 +17ms
zombie Loaded document http://localhost/graph +15ms
zombie GET https://www.gstatic.com/charts/loader.js => 200 +71ms
load() called
zombie Event loop is empty +135ms

Here is my simple Zombie code, for reference:

Browser.visit('http://localhost/graph', function (err, browser) {
    if (browser.errors.length > 0)
        return console.log(browser.statusCode, browser.errors);
});

No errors are reported. I have also tried waiting for several seconds, browser.wait(), as well as a full web page that actually loads a chart. Zombie never loads the other resources and, naturally, never calls any of the Google Charts callbacks.

Why does Zombie seem to be unable to use the Google Charts API?

Answer 1

One possible reason you are encountering this issue is that you may not have properly created callbacks/timeouts that are waiting for the charts to be rendered, though that is just a guess.

To accomplish what you are trying to do, I highly recommend using PhantomJS instead. There are several documented cases of issues with ZombieJS and the Google Charts API simply not playing well together.

With PhantomJS, you would make an html file with the chart as well as a javascript file with your code. Finally, you'd execute your javascript file with PhantomJS:

phantomjs chart.js

A more in-depth description of how to do this with PhantomJS can be found here.