google.visualization.DataTable not a constructor

Chris Randall

unread,

Oct 30, 2016, 1:31:53 PM10/30/16

to Google Visualization API

Given the following code, my call to google.visualization.DataTable() returns "Uncaught TypeError: google.visualization.DataTable is not a constructor(…)"

I'm creating the chart by adding drawGooglePieChart as an onLoad script to it's parent Div.

I do add https://www.gstatic.com/charts/loader.js to the src of the page.

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

google.charts.setOnLoadCallback(drawGooglePieChart);

function drawGooglePieChart(parentID, width, height, json) {

var pcd = JSON.parse(json);

var wedges = pcd.Wedges;

var data = new google.visualization.DataTable();

data.addColumn('string', 'Name');

data.addColumn('number', 'Fraction');

data.addColumn({ type: 'string', role: 'style' });

var colors = [];

for (var i = 0; i < wedges.length; ++i) {

data.addRow([

wedges[i].Name,

wedges[i].Fraction,

rgbToHex(wedges[i].Color.R, wedges[i].Color.G, wedges[i].Color.B)

]);

var c = rgbToHex(wedges[i].Color.R, wedges[i].Color.G, wedges[i].Color.B);

colors.push(c);

}

// Set chart options

var options = {

width: width,

height: height,

colors: colors,

//pieHole: 0.3

};

// Instantiate and draw our chart, passing in some options.

var chart = new google.visualization.PieChart(document.getElementById(parentID));

chart.draw(data, options);

}

Daniel LaLiberte

unread,

Oct 31, 2016, 10:37:11 AM10/31/16

to Google Visualization API

Hi Chris,

The code you show looks fine. So the problem is likely to be in how you load the loader.js. Could you point us to a page?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2b90496c-e824-411a-b2ca-1dfe30dab022%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com 5CC, Cambridge MA

Chris Randall

unread,

Oct 31, 2016, 11:39:51 AM10/31/16

to Google Visualization API

Hey Daniel,

Thanks for the reply, I've attached the page that it's being loaded in to. The chart should be getting attached to div with id "resppie_1".

Cheers

Overview.html

Daniel LaLiberte

unread,

Oct 31, 2016, 11:50:12 AM10/31/16

to Google Visualization API

I can't tell from what you attached exactly what is going on. There are many changes in the URLs and we didn't get the js files, so this doesn't help figure out what is going on. Could you point to the page itself? Private email to me if you would prefer not to make it public.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/6d4e9350-b27d-4a8c-89d5-f9c9932e9a76%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Ville Kontturi

unread,

Nov 28, 2016, 1:15:14 AM11/28/16

to Google Visualization API

Hello,

I'd like to add my two cents on this matter.

I had the same error message on my code, when I was trying to use a line chart library. I had attached the line drawing into a link, so if the user clicked the link twice, the chart would get drawn twice... What was weird in this, was that on the first click I got the error and no chart, but on the second click the page would display the chart correctly without any errors.

After a long(ish) debugging I managed to pinpoint the problem into following lines:

google.charts.load('current', {packages: ['corechart', 'line']);
google.charts.setOnLoadCallback( drawChart(loc) );

And the drawChart-function started as follows:

function drawChart(loc) {

What I found out was that the line google.charts.setOnloadCallback doesn't accept parameters to the function for some reason... So to correct my problem I changed the code as follows:

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

And the drawChart -function start:

function drawChart() {

After this the page didn't give the 'Uncaught TypeError: google.visualization.DataTable is not a constructor(…)' text anymore.

Hope this helps someone else, troubling with the same issue.

On Monday, 31 October 2016 17:50:12 UTC+2, Daniel LaLiberte wrote:

I can't tell from what you attached exactly what is going on. There are many changes in the URLs and we didn't get the js files, so this doesn't help figure out what is going on. Could you point to the page itself? Private email to me if you would prefer not to make it public.

On Mon, Oct 31, 2016 at 11:39 AM, Chris Randall <paladi...@gmail.com> wrote:

Hey Daniel,
Thanks for the reply, I've attached the page that it's being loaded in to. The chart should be getting attached to div with id "resppie_1".

Cheers

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/6d4e9350-b27d-4a8c-89d5-f9c9932e9a76%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
Daniel LaLiberte
dlali...@Google.com 5CC, Cambridge MA

Daniel LaLiberte

unread,

Nov 28, 2016, 10:51:53 AM11/28/16

to Google Visualization API

This makes since. By naming your callback function and giving it parameters, you are actually calling it at that time and only the result of that function call will be passed in to the setOnLoadCallback. If you call your draw function before the library is loaded, then many things will be undefined, such as the DataTable constructor. By just naming the callback function (e.g. just drawChart), you are passing in a reference to that function. So if you want to pass parameters to your drawChart function, you need to wrap that call in another function declaration, like this:

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

google.charts.setOnLoadCallback( function() { drawChart(loc) });

function drawChart(loc) { ... }

On Mon, Nov 28, 2016 at 1:15 AM, Ville Kontturi <ville.k...@gmail.com> wrote:

Hello,
I'd like to add my two cents on this matter.

I had the same error message on my code, when I was trying to use a line chart library. I had attached the line drawing into a link, so if the user clicked the link twice, the chart would get drawn twice... What was weird in this, was that on the first click I got the error and no chart, but on the second click the page would display the chart correctly without any errors.

After a long(ish) debugging I managed to pinpoint the problem into following lines:
google.charts.load('current', {packages: ['corechart', 'line']);
google.charts.setOnLoadCallback( drawChart(loc) );

And the drawChart-function started as follows:
function drawChart(loc) {

What I found out was that the line google.charts.setOnloadCallback doesn't accept parameters to the function for some reason... So to correct my problem I changed the code as follows:
google.charts.load('current', {packages: ['corechart', 'line']);
google.charts.setOnLoadCallback( drawChart );

And the drawChart -function start:
function drawChart() {

After this the page didn't give the 'Uncaught TypeError: google.visualization.DataTable is not a constructor(…)' text anymore.

Hope this helps someone else, troubling with the same issue.

On Monday, 31 October 2016 17:50:12 UTC+2, Daniel LaLiberte wrote:

I can't tell from what you attached exactly what is going on. There are many changes in the URLs and we didn't get the js files, so this doesn't help figure out what is going on. Could you point to the page itself? Private email to me if you would prefer not to make it public.

On Mon, Oct 31, 2016 at 11:39 AM, Chris Randall <paladi...@gmail.com> wrote:

Hey Daniel,
Thanks for the reply, I've attached the page that it's being loaded in to. The chart should be getting attached to div with id "resppie_1".

Cheers

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/6d4e9350-b27d-4a8c-89d5-f9c9932e9a76%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
Daniel LaLiberte
dlali...@Google.com 5CC, Cambridge MA

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/9692da2e-b9bf-4ec0-b229-96d7b0f4123e%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com 5CC, Cambridge MA

Komaleswari C

unread,

Feb 26, 2020, 4:43:06 AM2/26/20

to Google Visualization API

Hi Daniel,

Thank you..You saved my time.Works great.

Before i used : google.charts.setOnLoadCallback(drawChart(loc));

Currently i changed to : google.charts.setOnLoadCallback( function() { drawChart(loc) });

Steve Robinson

unread,

May 31, 2021, 8:41:09 PM5/31/21

to Google Visualization API

Komaleswari C - Your comment here is what fixed it for me. The problem only manifested when using a caching plugin and js minification together - so hard to trouble-shoot. THANK YOU!!

Reply all

Reply to author

Forward