arrayToDataTable Broke

[Duarte007]

Hi, in current version (47), my code stop working when i use the function arrayToDataTable() I'm search about this but not find any change whith function.

I have a code example:

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

            function drawStuff() {

                var extratoGraficos = [];
                var jsonCell = {};
                var graficos = {"colors":["#BFBF00","#BFBF00","#BFBF00","#BFBF00"],"title":"Top 10 Tickets por assunto (mes atual)","hAxis":{"title":"Assuntos"},"vAxis":{"title":"Numero de tickets"},"seriesType":"bars","legend":{"position":"right"}};
                var options = {"colors":["#BFBF00","#BFBF00","#BFBF00","#BFBF00"],"title":"Top 10 Tickets por assunto (mes atual)","hAxis":{"title":"Assuntos"},"vAxis":{"title":"Numero de tickets"},"seriesType":"bars","legend":{"position":"right"}};
                var extratoTicket = '';
                var nextChartno = '';
                var chartno = '371';
                var extractno = '';
                var data = new google.visualization.arrayToDataTable([
                    ["Assuntos","Assuntos"],
                    ["Venda em cart\u00e3o de credito",4],
                    ["Informa\u00e7\u00f5es cadastrais",4],
                    ["Atualiza\u00e7\u00e3o de DLL",3],
                    ["Atualiza\u00e7\u00e3o\/Verifica\u00e7\u00e3o de vers\u00e3o",3],
                    ["Nota Fiscal Relativa a Cupom Fiscal",3],
                    ["Verificar o espa\u00e7o em disco",2],
                    ["SPED FISCAL",2],
                    ["Atualiza\u00e7\u00e3o Certificado Digital",2],
                    ["Usu\u00e1rios",2],
                    ["Regras de edi\u00e7\u00e3o da Nota de Entrada",2]
                ]);
                var chart = new google.visualization.ComboChart(document.getElementById('dual_x_div'));
                                    var view = new google.visualization.DataView(data);
                    view.setColumns([0,1,{"calc":"stringify","sourceColumn":1,"type":"string","role":"annotation"}]);

       ...

[dlaliberte]

I am only seeing google.visualization.arrayToDataTable working just with v47, on the documentation site: https://developers.google.com/chart/interactive/docs/gallery

One thing missing from your code example is how you load the loader. Is it the gstatic loader, or the old jsapi loader? https://developers.google.com/chart/interactive/docs/basic_load_libs#update-library-loader-code

[Duarte007]

Estou vendo apenas google.visualization.arrayToDataTable trabalhando apenas com a v47, no site da documentação: https://developers.google.com/chart/interactive/docs/gallery

Uma coisa que falta no seu exemplo de código é como você carrega o carregador. É o carregador gstatic ou o carregador jsapi antigo? https://developers.google.com/chart/interactive/docs/basic_load_libs#update-library-loader-code

I'm load with gstatic

[dlaliberte]

Since I can't reproduce any problem with arrayToDataTable, I'll need to see the failure you are seeing in an actual web page. Then I can debug what the cause is.

[billingt]

This works fine in 46, breaks in 47:

consolePrompt> var example  = [[ 'Gene Name','Value',{ role : 'style' } ],["1", 0.624, "color: #ac844d"],["2", 1.073, "color: #ac844d"],["3", 0.999, "color: #ac844d"]]; consolePrompt> google.visualization.arrayToDataTable(example); /jsapi_compiled_default_module.js:178 Uncaught Error: Invalid row #Gene Name// //    at Object.gvjs_ql [as arrayToDataTable] (jsapi_compiled_default_module.js:178)// /

On 2/12/20 9:10 AM, Daniel LaLiberte wrote:

Since I can't reproduce any problem with arrayToDataTable, I'll need to see the failure you are seeing in an actual web page. Then I can debug what the cause is.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://urldefense.com/v3/__https://github.com/google/google-visualization-issues/issues/2795?email_source=notifications&email_token=ABJFDUFZBHLZ66R2XCMRNHTRCQUQBA5CNFSM4KTEPGK2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELRSQNI*issuecomment-585312309__;Iw!!Nv3xtKNH_4uope0!xuXiJyFQUEb_wnA9fJr9F1YVFpqmHGDv_yyF9ZvS4pHC2bm4OnMgTPFPytZittU$, or unsubscribe https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ABJFDUFR4J5KKBCDNHGFDZDRCQUQBANCNFSM4KTEPGKQ__;!!Nv3xtKNH_4uope0!xuXiJyFQUEb_wnA9fJr9F1YVFpqmHGDv_yyF9ZvS4pHC2bm4OnMgTPFP1kQN9F8$.

[dlaliberte]

Hi Richard,

That example works fine for me. See: https://jsfiddle.net/dlaliberte/3f08exkq/2/ Does it work for you?

If you can, please post a link to an actual web page that demonstrates the error you are seeing.

The error message you report gives me a small clue about what might be going on, however. I am using the Array.prototype.entries() method to iterate through the rows of your input array, and it appears to not be doing what it is supposed to for you. So maybe there is an incorrect polyfill of this method for your browser, or maybe some other code in your application has defined the entries method on arrays to do something entirely different.

Here is what it is supposed to be doing: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries

I'm more curious now about what is going on, but I'll need more details to narrow this down. It may be that I'll be forced to find a way to avoid using this entries method until browsers and polyfills can catch up, or it may be we can put the blame on some errant library that is extending Array with an incompatible entries method.

[dlaliberte]

Someone else has discovered that the prototype library is the problem. I created this jsfiddle with her example: https://jsfiddle.net/dlaliberte/oryntmbw/1/

I'd recommend avoiding prototype, or find out if they have a newer version that avoids the problems caused by extending Array.

[dlaliberte]

If you upgrade your version of prototype to 1.7.3, that is apparently compatible with Google Charts v47.

[billingt]

Agreed, that fixes the problem:

<script
src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>

but you do have to cite 1.7.3.0, not 1.7.3, see above.

On 2/13/20 11:05 AM, Daniel LaLiberte wrote:

If you upgrade your version of prototype to 1.7.3, that is apparently compatible with Google Charts v47.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://urldefense.com/v3/__https://github.com/google/google-visualization-issues/issues/2795?email_source=notifications&email_token=ABJFDUBK4LIJSEIV5D5L4JTRCWKXPA5CNFSM4KTEPGK2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELWHIQY*issuecomment-585921603__;Iw!!Nv3xtKNH_4uope0!0v5yoToeqeWZ-j1HvQDi1kn05O1yOUpWaDwaurTTgembmZomBugnvEnH1MyHffY$, or unsubscribe https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ABJFDUEWZPBCYSCXEQOZAQDRCWKXPANCNFSM4KTEPGKQ__;!!Nv3xtKNH_4uope0!0v5yoToeqeWZ-j1HvQDi1kn05O1yOUpWaDwaurTTgembmZomBugnvEnHmF7BdDc$.

[SYoungPB]

I'm getting a similar error in IE11 only. I don't use prototype.js but es6-shim seems to cause a similar issue. When I call google.visualization.arrayToDataTable and then draw on the chart it displays "No data".

This example shows the issue when you view in IE11: https://jsbin.com/kikomif/edit?html,output

[dlaliberte]

Thanks for your post @SYoungPB. Given your example, I can also see the error that you report.

Going into the debugger, it is difficult to tell what is happening in the compiled code, but there are a couple references to something.prototype.entries in the neighborhood, so I would suspect the problem is yet another conflict in how the Array.prototype.entries method is defined, or perhaps the problem is caused by having multiple es6 shims loaded in the same page.

Given that Google Charts does appear to work fine by itself (after commenting out the es6-shim), the shim that is compiled in to Google Charts appears to be doing the right thing (at least regarding Array.prototype.entries). However, I can imagine situations in which the cdnjs es6-shim is required for other libraries used on the same page, and then this kind of conflict might arise. I'm not sure who we should consider at fault here, but it seems that each shim should be careful about not replacing another shim that is already loaded on the same page.

In the meantime, until this is resolved, I can probably avoid use of the entries method, though doing that by itself is probably not a guarantee that this kind of problem won't arise anyway. As a workaround (until we find a proper solution), you might try embedding the chart in an iframe, to isolate it from the rest of the page.

And btw, IE11 is not supported generally, so it will be increasingly difficult over time to maintain backward compatibility.

[SYoungPB]

I'm only using the charts in a small part of my application so I've been able to work around the issue by initialising DataTable and using addColumn and addRow instead of arrayToDataTable.

I wasn't aware Google Charts was including its own sims until this issue arose. If IE11 is not really supported would it not be better to leave users to include their own shims where required?

Thanks for looking into the issue so quickly!

[dlaliberte]

Your workaround to avoid use of arrayToDataTable is good, and much easier than what I was suggesting.

The inclusion of shims happens automatically in how we build the library (though we have some control over the default behavior), and if there are conflicts between multiple shims being included via different libraries, I believe the shims should be responsible to figure out how to do the right thing. I don't know if IE11 makes that difficult or what the underlying problem is, but this sort of problem seems to have a long history. Here is a similar issue for babel-polyfill: https://github.com/babel/babel/issues/4019

It's not that IE11 support is dropped entirely, but that when there are problems, we can't necessarily do much to fix them.

[priyankbro]

Can any one suggest the workaround to avoid use of arrayToDataTable as I am still facing the issue.