Conflict between Google Analytics Embed API and Google Charts

Question

There seems to be a conflict when I load Google Analytics Embed API and Google Charts on the same page, more specifically when I use Embed API to draw charts, too.

To make it more interesting, the problem only occurs when the charts are of different type, e.g. Embed API: TABLE and Charts: LINE

Embed API chart is loaded first and works as expected. Charts LINE chart is loaded second and returns this error:

You called the draw() method with the wrong type of data rather than a DataTable or DataView

I have a feeling that Embed API charts override this function:

google.charts.load('current', {
    packages: ['corechart', 'line', 'table']
});

UPDATE

Answer for this question: Google Charts draw() method wrong type when given DataTable suggests removing the reference to http://www.google.com/jsapi, but then Google Embed API charts stop working because window.google.load is no longer defined, instead there is window.google.charts.load which is needed for Google Charts but seems not to work work Embed API charts.

Possible duplicate of Google Charts draw() method wrong type when given DataTable — DaImTo

Drew H Drew H · Accepted Answer · 2017-06-07T17:50:30

I ran into the same problem and fixed the script loading conflicts. The solution is to only include the newer chart loader.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Then, before loading the google charts api, run the extra code suggested by Daniel LaLiberte:

//Handles differences in load functions
google.load = google.load || google.charts.load;
google.setOnLoadCallback = google.setOnLoadCallback || google.charts.setOnLoadCallback;

//Loads the google analytics API
(function (w, d, s, g, js, fs) {
            //if ($('#googleCache').length > 0) return;
            g = w.gapi || (w.gapi = {});
            g.analytics = {
                q: [],
                ready: function (f) {
                    this.q.push(f);
                }
            };
            js = d.createElement(s);
            fs = d.getElementsByTagName(s)[0];
            js.src = 'https://apis.google.com/js/platform.js';
            js.id = "googleCache";
            fs.parentNode.insertBefore(js, fs);
            js.onload = function () {
                g.load('analytics');
            };
}(window, document, 'script'));

//Load the charts you want
google.charts.load('current', { packages: ['corechart', 'table', 'line', 'geochart'] });

Conflict between Google Analytics Embed API and Google Charts

1 Answers