Multiple instances of Material Charts

[AlsonicTech]

I have a page with multiple instances of material charts. Everything was working perfect until 2-3 days ago. Now it only loads just 1 instances.

I tested also with fresh code from google, and I cannot add more instances because just one will show.

I added an example on JSFiddle https://jsfiddle.net/5peasu9r/

[joostlawerman]

This seems to be a problem only with the matirial charts the other ones seem to work fine I suggest using those until its fixed.

[armelina]

unfortunately i have to say the same
all of my multi

suddenly stopped to work correctly in all of my scripts

it could help us to change release version or something like this
google.load("visualization", "1.1", {packages:["bar"]});
but after that i can see the same, only just first div

otherway i remember that it was the same when i tried to describe more that 1 div
in another web browser like chrome (firefox, ie etc…)

do you know anyone what’s happened ?

[dlaliberte]

Armelina, I don't know why your multiple charts suddenly stopped working.
We are about to start another release cycle (the v43 candidate release will
be pushed sometime later today) but nothing has changed in the last couple
days.

Everyone,

The problems people have seen with the sizing of multiple instances of
material charts should be resolved with this new release. You can change
your code to load "1.1" now so that when the candidate release becomes
available, you will be using it.

On Mon, Oct 5, 2015 at 6:01 AM, armelina notifications@github.com wrote:

unfortunately i have to say the same
all of my multi
suddenly stopped to work correctly in all of my scripts

it could help us to change release version or something like this
google.load("visualization", "1.1", {packages:["bar"]});
but after that i can see the same, only just first div

otherway i remember that it was the same when i tried to describe more
that 1 div
in another web browser like chrome (firefox, ie etc…)

do you know anyone what’s happened ?

—
Reply to this email directly or view it on GitHub
#2066 (comment)
.

Daniel LaLiberte https://plus.google.com/100631381223468223275?prsrc=2 -
978-394-1058
dlaliberte@Google.com dlaliberte@google.com 5CC, Cambridge MA
daniel.laliberte@GMail.com daniel.laliberte@gmail.com 9 Juniper Ridge
Road, Acton MA

[michaeljaekel]

Hello Everyone,

i got the same error. Since later on Friday or sometimes on Saturday, only one instance of the chart is loading. Until then, all 3 instances where running perfectly. I didn't change any code since that.
I can get running each one of the charts by disabling the "draw - call" of the other two. But no way to show more than one at the same time.

I'm already loading the 1.1 Version
google.load("visualization", "1.0", {packages: ['line', 'bar, corechart, geochart, table']});

Best
Michael

[xihan]

Hi, everyone.

I ran into the same issue. When multiple charts render, only the first one is successful.

I was able to resolve the issue by:
instead of:

<script type="text/javascript" src="https://www.google.com/jsapi"\>\</script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['corechart']}); google.setOnLoadCallback(drawChart); </script>

use loader for a static version:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"\> <script type="text/javascript"> google.charts.load('43' or '42' or '41', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawChart); </script>

Somehow, this resolved the issue for me.

[dlaliberte]

Hi xihan,
I suspect that if your problem is resolved by using any of the gstatic versions, then yours is not a problem with multiple material charts, but rather, multiple calls of setOnLoadCallback(). The google.charts.setOnLoadCallback method works a little differently from google.setOnLoadCallback() and it turns out to be significant for you.

[xihan]

Hi, dlaliberte

Thanks for helping.
My description of the repro wasn't quite accurate.
My code was actually using the dynamic loading api, passing in the 'callback' paramter to load().
The callback function is called only once as expected.

When there are concurrent calls to ChartWrapper.draw(), only one chart is rendered completely, while the other charts are rendered with empty svg tag.

I modified the original jsfiddle from Al3xR0: https://jsfiddle.net/jh0jnu4b/2/
This version has a setTimeout() on drawChart2(), and both charts now render.

Also, I am not using material charts.

[stephen-bedford]

This issue still exists. It was suggested that a new release four days ago would fix the issue. At the moment the easiest thing for me is to put each chart in an iframe or to use the older Image Charts which is quite tempting.

[dlaliberte]

The rollout of the v43 candidate release that would fix this problem is
still failing to complete. We're not sure when it will complete, but in
the meantime, you could use the frozen loader with version 43. See
instructions at
https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions

On Fri, Oct 9, 2015 at 8:50 AM, stephen-bedford notifications@github.com
wrote:

This issue still exists. It was suggested that a new release four days ago
would fix the issue. At the moment the easiest thing for me is to put each
chart in an iframe or to use the older Image Charts which is quite tempting.

—
Reply to this email directly or view it on GitHub
#2066 (comment)
.

Daniel LaLiberte https://plus.google.com/100631381223468223275?prsrc=2 -
978-394-1058
dlaliberte@Google.com dlaliberte@google.com 5CC, Cambridge MA
daniel.laliberte@GMail.com daniel.laliberte@gmail.com 9 Juniper Ridge
Road, Acton MA

[stephen-bedford]

This doesn't seem to work using either version 43 or others (41 and 42). In fact no charts are displayed. I have cut and pasted lines for page into my code and checked the page source (produced by a script) matches.

On 9 Oct 2015, at 14:56, Daniel LaLiberte notifications@github.com wrote:

The rollout of the v43 candidate release that would fix this problem is
still failing to complete. We're not sure when it will complete, but in
the meantime, you could use the frozen loader with version 43. See
instructions at
https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions

On Fri, Oct 9, 2015 at 8:50 AM, stephen-bedford notifications@github.com
wrote:

This issue still exists. It was suggested that a new release four days ago
would fix the issue. At the moment the easiest thing for me is to put each
chart in an iframe or to use the older Image Charts which is quite tempting.

—
Reply to this email directly or view it on GitHub
#2066 (comment)
.

Daniel LaLiberte https://plus.google.com/100631381223468223275?prsrc=2 -
978-394-1058
dlaliberte@Google.com dlaliberte@google.com 5CC, Cambridge MA
daniel.laliberte@GMail.com daniel.laliberte@gmail.com 9 Juniper Ridge
Road, Acton MA
—
Reply to this email directly or view it on GitHub.

[dlaliberte]

If no charts are displaying when you switch to using the frozen version
loader, then it is likely that you made a mistake when you converted your
code. Check your JavaScript console for errors.

You have to change three things, typically.

1. Load the loader:

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

1. Load the packages:

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

1. Draw your charts after loading is finished:

google.charts.setOnLoadCallback(drawChart);

On Mon, Oct 12, 2015 at 5:21 AM, stephen-bedford notifications@github.com
wrote:

This doesn't seem to work using either version 43 or others (41 and 42).
In fact no charts are displayed. I have cut and pasted lines for page into
my code and checked the page source (produced by a script) matches.

On 9 Oct 2015, at 14:56, Daniel LaLiberte notifications@github.com
wrote:

The rollout of the v43 candidate release that would fix this problem is
still failing to complete. We're not sure when it will complete, but in
the meantime, you could use the frozen loader with version 43. See
instructions at

https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions

On Fri, Oct 9, 2015 at 8:50 AM, stephen-bedford <
notifications@github.com>
wrote:

This issue still exists. It was suggested that a new release four days
ago
would fix the issue. At the moment the easiest thing for me is to put
each
chart in an iframe or to use the older Image Charts which is quite
tempting.

—
Reply to this email directly or view it on GitHub
<
#2066 (comment)

.

Daniel LaLiberte https://plus.google.com/100631381223468223275?prsrc=2

978-394-1058
dlaliberte@Google.com dlaliberte@google.com 5CC, Cambridge MA
daniel.laliberte@GMail.com daniel.laliberte@gmail.com 9 Juniper Ridge
Road, Acton MA

—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on GitHub
#2066 (comment)
.

Daniel LaLiberte https://plus.google.com/100631381223468223275?prsrc=2 -
978-394-1058
dlaliberte@Google.com dlaliberte@google.com 5CC, Cambridge MA
daniel.laliberte@GMail.com daniel.laliberte@gmail.com 9 Juniper Ridge
Road, Acton MA

[stephen-bedford]

Thanks. Found error - extra >

On 13 Oct 2015, at 03:11, Daniel LaLiberte notifications@github.com wrote:

If no charts are displaying when you switch to using the frozen version
loader, then it is likely that you made a mistake when you converted your
code. Check your JavaScript console for errors.

You have to change three things, typically.

1. Load the loader:

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

1. Load the packages:

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

1. Draw your charts after loading is finished:

google.charts.setOnLoadCallback(drawChart);

On Mon, Oct 12, 2015 at 5:21 AM, stephen-bedford notifications@github.com
wrote:

This doesn't seem to work using either version 43 or others (41 and 42).
In fact no charts are displayed. I have cut and pasted lines for page into
my code and checked the page source (produced by a script) matches.

On 9 Oct 2015, at 14:56, Daniel LaLiberte notifications@github.com
wrote:

The rollout of the v43 candidate release that would fix this problem is
still failing to complete. We're not sure when it will complete, but in
the meantime, you could use the frozen loader with version 43. See
instructions at

https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions

On Fri, Oct 9, 2015 at 8:50 AM, stephen-bedford <
notifications@github.com>
wrote:

This issue still exists. It was suggested that a new release four days
ago
would fix the issue. At the moment the easiest thing for me is to put
each
chart in an iframe or to use the older Image Charts which is quite
tempting.

—
Reply to this email directly or view it on GitHub
<
#2066 (comment)

.

Daniel LaLiberte https://plus.google.com/100631381223468223275?prsrc=2

978-394-1058
dlaliberte@Google.com dlaliberte@google.com 5CC, Cambridge MA
daniel.laliberte@GMail.com daniel.laliberte@gmail.com 9 Juniper Ridge
Road, Acton MA

—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on GitHub
#2066 (comment)
.

Daniel LaLiberte https://plus.google.com/100631381223468223275?prsrc=2 -
978-394-1058
dlaliberte@Google.com dlaliberte@google.com 5CC, Cambridge MA
daniel.laliberte@GMail.com daniel.laliberte@gmail.com 9 Juniper Ridge
Road, Acton MA
—
Reply to this email directly or view it on GitHub.

[AlsonicTech]

@dlaliberte any feedback for the duplicate issue ?

[dlaliberte]

Hi Alexandru,

Your issue sounded like the same kind of problem others were reporting. Can you put together a demonstration of what you are seeing using jsfiddle.net? Or post a link to a page. Thanks.

[AlsonicTech]

Hey @dlaliberte ,

Actually I already posted a jsfiddle on the first comment :). Just look at this example. Thanks.
https://jsfiddle.net/5peasu9r/

[dlaliberte]

Sorry, your jsfiddle was missing from my email.

Using the frozen version loader does fix whatever the problem is, however: https://jsfiddle.net/5peasu9r/3/

Hope that is good enough.

[AlsonicTech]

Yes, it works like this. Thank you 👍

[iumesh]

Hi @dlaliberte the work around with frozen version was working perfectly before but now it also has stopped working.

your link is also not working. : https://jsfiddle.net/5peasu9r/3/

[joostlawerman]

Yes indeed giving me the error when loading static charts 43:

Uncaught (in promise) Error: one or more fonts could not be loaded.(…)

[AlsonicTech]

I just modified version 43 to 42 from google.charts.load("43", {packages:["bar"]}); and it seems that is working ...

[iumesh]

I checked and it seems working for now thanks @Al3xR0.

[djardine]

Same experience.
google.charts.load("43", {packages:["bar"]});
was working for me until about a day ago and now no longer works properly. I thought this was a call to a static version or is this the latest version that's still in flux?

I can confirm that the following works:
google.charts.load("42", {packages:["bar"]});

[grabks]

The 43 release is still in progress, and we did an update yesterday. However, the version of WebFontLoader that we pushed had a bug. I just did another push to frozen 43, using the old version of WebFontLoader, so it should work now.

[djardine]

Good stuff. I can confirm that loading multiple bar graphs works on version 43 now. Glad you were able to nail down the source of the bug.

[ratpik]

I'm still facing this issue. Only one of the two bar charts renders and that too randomly.

I have tried loading with

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

[grabks]

@ratpik Firstly, please try to clear your cache or load in an incognito or private browsing window. You might still have the old code cached for whatever reason. If it still fails, please post a jsfiddle reproducing the issue, as well as the browser/OS combination that you found this to fail on. Ideally, please list multiple configurations that you have tested. Most importantly, if you don't test anything else, please test on Chrome and report back whether that works. This issue is expected to be fixed in v43, and I'm surprised to hear that it's still occurring.

[ExistsAndIs1]

I think the problem still occurs if you load corecharts and bar at the same time
at least that what happened on our page that contains several histogram charts
as soon as we used
google.charts.load('current', {packages: ['corechart']});

instead of
google.charts.load('current', {packages: ['corechart','bar']});

the issue was gone