Bug: Google Charts will not load today.

[orwant]

What steps will reproduce the problem? Please provide a link to a
demonstration page if at all possible, or attach code.
1. Attached you can see the table will not load.  But the data is when viewing source
the info is there, just not showing on the page.
2. I will add the code below

else {
                        ttNotes = jsonObj.ttNotes.ttNotesRow;
                        ShapID = "Shapiro ID: " + jsonObj.ShapID;
                        AgentID = "Agent ID: " +jsonObj.AgntID;

                        google.load('visualization', '1.0', {packages:['table']});

                        //Create a row that will be the column headers.
                        listing = new Array();
                        listing.push(['Date', 'Time', 'Login', 'Note']);
                        if (ttNotes){

                          var i = ttNotes.length;

                          if (i){
                          }
                          else{
                            ttNotes = new Array(jsonObj.ttNotes.ttNotesRow);
                            i = 1;
                          }

                           var index;

                           for (index = 0; index < i; ++index) {

                                //Change all the dates for read ability
                                var holder = ttNotes[index]['noteDate'];
                                var m = holder.split('-');
                                ttNotes[index]['noteDate'] = m[1]+"-"+ m[2]+"-"+ m[0];

                                var noteRow = new Array();
                                noteRow.push(ttNotes[index]['noteDate']);
                                noteRow.push(ttNotes[index]['noteTime']);
                                noteRow.push(ttNotes[index]['noteLogin']);
                                noteRow.push(ttNotes[index]['noteText']);           

                                listing.push(noteRow);
                            }
                         tableData2 = google.visualization.arrayToDataTable(listing);

                        var pageSize = 10;
                        var total = ttNotes.length;
                        var pageCnt = Math.ceil(total/pageSize);
                        var options = {
                            allowHtml: true,
                            alternatingRowStyle: true,
                            page: 'enable',
                            pageSize: pageSize,
                            pagingSymbols: {prev: 'prev', next: 'next'},
                            pagingButtonsConfiguration: 'auto',
                            sort: 'enable',
                            cssClassNames: {
                                headerRow: 'tracking-header',
                                oddTableRow: 'tracking-odd-row',
                                hoverTableRow: 'tracking-row-hover',
                                tableRow: 'container',
                                tableCell: 'main-container'
                            }
                        }

                        table = new google.visualization.Table(document.getElementById('visualization2'));

                        google.visualization.events.addListener(table, 'page', function (e) {
                            document.getElementById('visualization2_pageNum').innerHTML = e.page + 1;
                        });
                        document.getElementById('visualization2_pageNum').innerHTML = 1;
                        document.getElementById('visualization2_pageCnt').innerHTML = pageCnt;

                        table.draw(tableData2, options);

                        // override the pixel setting google loads
                        $(".google-visualization-table-table").css("width", "100%");

                        document.getElementById("CommentsShapID").innerHTML = ShapID;
                        document.getElementById("CommentsAgentID").innerHTML = AgentID;

                        $('#modalParty').modal({close: false, persist: true, focus: false});
                        }

                        else{
                           //alert when no notes are found
                           alert("No Comments");

                        }
                    }

What component is this issue related to (PieChart, LineChart, DataTable,
Query, etc)?

Are you using the test environment (version 1.1)?
(If you are not sure, answer NO)

No

What operating system and browser are you using?

FireFox, Chrome, IE 11

*********************************************************
For developers viewing this issue: please click the 'star' icon to be
notified of future changes, and to let us know how many of you are
interested in seeing it resolved.
*********************************************************

Original issue reported on code.google.com by erik.m.hoffman on 2015-02-19 15:25:30

[orwant]

This is a problem with Table Chart

Original issue reported on code.google.com by erik.m.hoffman on 2015-02-19 15:26:34

[orwant]

I have a similar issue. My ColumnChart uses a DataView as its data source which returns
a 'g is undefined' message in Firefox. If I revert to using the underlying DataTable
(used in the constructor of the DataView) the ColumnChart will load fine.

Original issue reported on code.google.com by chrissloan247 on 2015-02-19 16:18:49

[orwant]

Chris, your problem appears from the symptoms to be very different. Could you post a
link to your page, or reproduce a minimal case (e.g. with jsfiddle).  Thanks.

We are rolling back the v41 change, but please test by loading 1.1 so we can be sure
that we fix your problems before the next version we roll out.

Original issue reported on code.google.com by dlaliberte@google.com on 2015-02-19 16:23:43

[orwant]

Thanks for getting back to me. My simplified version I was building on
JSFiddle has resolved what ever the problem was.
So now I guess I need to go back through what was removed to make the
simpler example and work out what causes the issue.

On 19 February 2015 at 16:23, <
google-visualization-api-issues@googlecode.com> wrote:

Original issue reported on code.google.com by chrissloan247 on 2015-02-19 17:17:17

[orwant]

when are you rolling back the version.  I was able to fix the problem by changing the
width.  But does not solve all my problems.  One the site there are a few too many
places to change.

Original issue reported on code.google.com by erik.m.hoffman on 2015-02-19 17:24:22

[orwant]

The rollback is in progress.  Just FYI, the change has been submitted, but then it goes
through a deployment process that could take 4 or more hours before it succeeds. 

Original issue reported on code.google.com by dlaliberte@google.com on 2015-02-19 17:27:45

[orwant]

So I have managed to pinpoint my issue directly to the following setting 

animation: {
    startup: true,
    duration: 1000,
    easing: 'in'
},

When loading the chart with the DataView and this setting present in the options the
chart returns g is undefined. 
Removing this option and loading with the DataView loads the chart fine.
Using the DataTable and the animation the chart loads - and animates.
Removing the animation option obviously stops the animation as expected. 

It therefore appears that the animation option causes the DataView class to fail somehow.

Hope this helps.

Original issue reported on code.google.com by chrissloan247 on 2015-02-19 17:33:28

[orwant]

We are using the google visualization api to display the grid in one of the application.
It was working fine till yesterday and it stopped working since morning. Is there any
change happened last night? Can you please brief about the change? 

We are getting "Object doesn't support property or method 'querySelector'"? Any advice
on this?

Original issue reported on code.google.com by arunprasath.ramachandran on 2015-02-19 18:54:39

[orwant]

Some users using IE are getting the "Object doesn't support property or method 'querySelector'"
error.

Where can we find updates?  I only saw that a update on October of last year listed....

Original issue reported on code.google.com by erik.m.hoffman on 2015-02-19 19:00:04

[orwant]

Chris,

The startup animation is a new feature, and could well be broken in situations we have
not anticipated.  I do see a problem with using a DataView which doesn't occur without
the DataView, but I get a different error than you did though probably for the same
reason.  So thanks for reporting this.

Original issue reported on code.google.com by dlaliberte@google.com on 2015-02-19 19:00:56

[orwant]

The querySelector problem will be fixed in the next candidate release.  We are rolling
back the broke version now.

Original issue reported on code.google.com by dlaliberte@google.com on 2015-02-19 19:12:34

[orwant]

Thank you, When will the rollback gets completed? Any ETA to my users?

Original issue reported on code.google.com by arunprasath.ramachandran on 2015-02-19 19:24:59

[orwant]

The querySelector issue has been resolved but tables are still not displaying as they
did 2 days ago. Was there a complete rollback or select portions?

Original issue reported on code.google.com by jimintheberkshires on 2015-02-20 11:12:45

[orwant]

Our charts are still not working correctly after the rollback. Please advise on whether
a full rollback will be done or if we should start looking for alternatives to fix
the problem on our end.

Original issue reported on code.google.com by Vectorl33t2 on 2015-02-20 14:27:58

[orwant]

The rollback actually failed, so we applied several fixes instead which are now live
if you load "1.0" (not yet in "1.1").  Table changes were not part of those fixes since
we didn't have enough evidence of what needed to be fixed or how to fix it.  

The table chart element and css have changed, so if you have local css that relied
on the internal css, you will have to update that accordingly, or better, use the cssClassNames
option so your custom classes will be used.

Please provide a link to a page that shows the behavior you are seeing so we can look
into it and hopefully find a fix or suggest work arounds.

Original issue reported on code.google.com by dlaliberte@google.com on 2015-02-20 14:34:19

[orwant]

It's an internal page with highly sensitive data so unfortunately sharing the page is
not an option. The code is as follows:

var chartData = {DATA_PAIRS};
    google.setOnLoadCallback(function () {
      google.load('visualization', '1', { 'packages': ['corechart'], 'callback': function
() {
        chart.render(chartData);
      }});
    });

function SalesByPeriodChart(domId, color, loadingContent) {
  this.domId = domId;
  this.color = color;
  this.loadingContent = loadingContent;
}

SalesByPeriodChart.prototype.render = function (responseObj) {
  var data = responseObj.data;
  var total = responseObj.total;
  var chart = new google.visualization.LineChart(document.getElementById(this.domId));
  var chartData = new google.visualization.DataTable({
    cols: [
      {id: 'date', label: 'Date', type: 'string'},
      {id: 'amount', label: 'Sales', type: 'number'}
    ],
    rows: data
  });
  var dataView = new google.visualization.DataView(chartData);
  dataView.setColumns([
    {
      calc: function (data, row) {
        return data.getFormattedValue(row, 0);
      },
      type: 'string'},
    1
  ]);
  var options = {
    colors: [this.color],
    legend: { position: "none" },
    pointSize: 5,
    title: 'Sales by Period: ' + total,
    titleTextStyle: { fontSize: 16 },
    hAxis: {
      slantedText: false,
      format: 'MMM `yy'
    },
    backgroundColor: { fill: 'transparent' }
  };
  chart.draw(chartData, options);
};

SalesByPeriodChart.prototype.loading = function (state) {
  var loadingDom = this.getLoadingDom();
  if (state) {
    if (loadingDom != null) {
      loadingDom.style.display = "";
    } else {
      var loadingDom = document.createElement("div");
      loadingDom.id = this.getLoadingId();
      loadingDom.className = "loading";
      loadingDom.innerHTML = this.loadingContent;
      document.getElementById(this.domId).appendChild(loadingDom);
    }
  } else if (loadingDom != null) {
    loadingDom.style.display = "none";
  }
};

SalesByPeriodChart.prototype.getLoadingDom = function () {
  return document.getElementById(this.getLoadingId());
};

SalesByPeriodChart.prototype.getLoadingId = function () {
  return this.domId + "_loading";
};

Original issue reported on code.google.com by Vectorl33t2 on 2015-02-20 14:45:48

[orwant]

If there was someway for me to email you, or you to email me, I could give you the page
url with the credentials for a demo account where you could see that error. Unfortunately
I don't feel comfortable posting it on the thread, nor can I get to your email address
as there are just dots.

vectorl33t2@gmail.com

Original issue reported on code.google.com by Vectorl33t2 on 2015-02-20 15:14:33

[orwant]

Hi Vector, the email of the original poster is dlaliberte <at> google.com. Please link
him to your page so that we can figure out the issues =)

Original issue reported on code.google.com by grabks@google.com on 2015-02-20 15:50:37

[orwant]

I'll leave this on the other thread I'm in as well, thanks to dlalibe...@google.com
for reaching out and diagnosing the problem.

Turns out, we had another legacy library that had an implementation of Array.prototype.filter
defined there, so that the charts would not work correctly when it also used our incorrect
implementation of Array.prototype.filter.

Simply removing the defined method fixed the problem, our charts load, and turns out
we only implemented that method for legacy browsers which we no longer support.

Figured it might save somebody else some time to know about this, as I was unaware.

Original issue reported on code.google.com by Vectorl33t2 on 2015-02-20 18:28:41

[orwant]

I have a similar problem with Table chart that uses a dataview as data source.  It worked
fine until a few days ago. Now the table chart simply does not display. It uses the
v1.0 library. 

Original issue reported on code.google.com by arbeiv on 2015-02-23 19:14:34

[orwant]

arbeiv, can you link us to a page showing the problem you are seeing?

Original issue reported on code.google.com by dlaliberte@google.com on 2015-02-24 14:56:20

[orwant]

Hi dlalibe,

I resolved my problem by adding height and width parameters in the Table chart options.
Before I only passed data to the Table chart drawing method [i.e, table.draw(data)],
and it worked fine. Now it seems that height and width options need to be specified
explicitly in the options to draw the Table chart [i.e, table.draw(data, options)].

Original issue reported on code.google.com by arbeiv on 2015-02-24 17:58:03

[orwant]

I'm suddenly getting this issue too on any chart that uses a DataView. I get this error
on all charts:
Unable to get property '1' of undefined or null reference
Tried it in IE and Chrome. Here's the script for a BarChart. If I pass the data over
as a DataView, I get this error. If I pass it as a DataTable, it displays fine. But,
this was again all working fine a last week, and now nothing with a DataView works
correctly when nothing was changed.

var data = google.visualization.arrayToDataTable([
  ['Week', 'New Desktop (D)', 'New Mobile (M)', 'Mail Opt-Ins (D)', 'Mail Opt-Ins (M)','eMail
Opt-Ins (D)','eMail Opt-Ins (M)', 'Unique Opt-ins (D)', 'Unique Opt-ins (M)', 'Dual
Opt-Ins (D)', 'Dual Opt-Ins (M)', 'Snus User Regs (D)', 'Snus User Regs (M)', 'Primary
User (D)', 'Primary User (M)']
        ,['W 1', 42, 40, 17, 18, 21, 33, 26, 34, 12, 17, 33, 0.83, 25, 22]
        ,['W 2', 63, 48, 38, 33, 39, 36, 49, 44, 28, 25, 43, 0.75, 24, 22]
        ,['W 3', 63, 36, 30, 16, 45, 16, 50, 21, 25, 11, 51, 0.44, 23, 15]
        ,['W 4', 81, 46, 30, 31, 55, 34, 62, 42, 23, 23, 65, 0.74, 42, 20]
]);

var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, { calc: "stringify",sourceColumn: 1,type: "string",role: "annotation"
},
                   2, { calc: "stringify",sourceColumn: 2,type: "string",role: "annotation" },
                   3, { calc: "stringify",sourceColumn: 3,type: "string",role: "annotation" },
                   4, { calc: "stringify",sourceColumn: 4,type: "string",role: "annotation" },
                   5, { calc: "stringify",sourceColumn: 5,type: "string",role: "annotation" },
                   6, { calc: "stringify",sourceColumn: 6,type: "string",role: "annotation" },
                   7, { calc: "stringify",sourceColumn: 7,type: "string",role: "annotation" },
                   8, { calc: "stringify",sourceColumn: 8,type: "string",role: "annotation" },
                   9, { calc: "stringify",sourceColumn: 9,type: "string",role: "annotation" },
                   10, { calc: "stringify",sourceColumn: 10,type: "string",role: "annotation" },
                   11, { calc: "stringify",sourceColumn: 11,type: "string",role: "annotation" },
                   12, { calc: "stringify",sourceColumn: 12,type: "string",role: "annotation" },
                   13, { calc: "stringify",sourceColumn: 13,type: "string",role: "annotation" },
                   14, { calc: "stringify",sourceColumn: 14,type: "string",role: "annotation" }]);

// Set chart options
var options = {
    title: 'Registrations', width: 500, height: 850,
    bar: {groupWidth: "95%"},
    chartArea: {left:40,top:50,width:'65%',height:'90%'},
    animation: { duration: 2000, startup: true }
};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chartRegistrations'));
chart.draw(view, options);

Original issue reported on code.google.com by harold.blackorby@rivetglobal.com on 2015-02-24 21:35:36

[orwant]

I've narrowed the issue down further. I can use DataViews as long as I turn off animation.
If I set Animation to be true, then every chart no matter the chart type displays:
"Unable to get property '1' of undefined or null reference" instead of a chart.

Original issue reported on code.google.com by harold.blackorby@rivetglobal.com on 2015-02-24 22:05:57

[orwant]

You are correct Harold.  And more specifically, it is the startup animation that doesn't
work yet with DataViews. We should be able to fix this for the next release.

Original issue reported on code.google.com by dlaliberte@google.com on 2015-02-24 22:54:56

[orwant]

Thanks for the info. At the least, it should degrade better so as to show the chart
but just not animate. But, thanks.

Original issue reported on code.google.com by harold.blackorby@rivetglobal.com on 2015-02-24 23:40:41

[orwant]

I fixed this issue by override the margin $(".google-visualization-table").css("margin-top",
"-1px");

Original issue reported on code.google.com by emadaldeen.hajjar on 2015-03-01 20:57:23

[orwant]

Hi.
I have used this google visualization API charts. Line charts,bar charts and pie chart.
I have given data to above charts by using datatable. Now I think google API is not
loading and because of that I am getting no charts on the page. Also giving datatable
is null error. Please find the solution for this urgently.

Original issue reported on code.google.com by Rohan@headfitted.com on 2015-03-25 10:09:34

[orwant]

It appears that the JS fiddle code provided in the google documetnation charts is not
consistent with the sample code in the google documentation. 

And the one in JS fiddle is the one that is working, ( had to make some changes to
my code to get it working again)

regards

Original issue reported on code.google.com by patozgg on 2015-04-17 20:08:02

[marceloverdijk]

I bumped against the same issue. Is there no workaround in v1 to use a animation with a DataView?

[dlaliberte]

This is fixed if you load 1.1, but if you have to use version 1 (which is v41 now), then the best workaround is to create a new DataTable from the DataView using toDataTable().

[marceloverdijk]

I also tried 1.1 but still doesn't work. Note I use a BarChart

As soon as I add startup: true to the animation config the chart breaks.

[dlaliberte]

Marcel,

The startup animation is new and different from other animation. We don't know of any problems animating the BarChart, so if you could post enough code and data to reproduce the problem, that would help us debug it. A jsfiddle would be best. Thanks.