Prevent script to execute before library loading in sharepoint

218 views
Skip to first unread message

Joan Ibanez

unread,
Jan 9, 2017, 8:20:42 AM1/9/17
to Google Visualization API
Hi,

sometimes I have a problem with the loading of google chart library, because script attempts to execute before (I assume) library is completely loaded although I am using the proposed methods. Google Chrome performance is much better than IE but not 100% reliable. Is there another way to ensure loading before executing?

THX!

Daniel LaLiberte

unread,
Jan 9, 2017, 8:51:01 AM1/9/17
to Google Visualization API
Could you give us the details of how you are doing the loading?  Subtle mistakes could be the cause.  Best to copy enough code here to reproduce the problem, or point us at your web 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/b88a9487-1fb5-4510-b999-1b04046c0633%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Joan Ibanez

unread,
Jan 9, 2017, 11:04:12 AM1/9/17
to Google Visualization API
sure. My problem may be using Sharepoint for what I understood is that I have to load js for sp by loading the document or window, so:

I call google chart library:

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

And then I load my sp js libraries:

 $(window).load(function(){
            // Make sure the SharePoint script file 'sp.js' is loaded before your
            // code runs.
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {});
            SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems,"sp.js");
    });

  /*
   $(document).ready(function(){
            // Make sure the SharePoint script file 'sp.js' is loaded before your
            // code runs.
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {});
            SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems,"sp.js");
    });
    */

None of both ways does work very fine. In "retrievelistitems" I query the data in the sp table and populate the chart data modell and draw the chart.

Using "google.charts.setOnLoadCallback(drawChart);" does not allow me to load js sp libraries or I did not find a proper way to do it.

Do you have a clue how to proceed with that? And sorry for the thread name may not be appropiate.

THX.


Am Montag, 9. Januar 2017 14:51:01 UTC+1 schrieb Daniel LaLiberte:
Could you give us the details of how you are doing the loading?  Subtle mistakes could be the cause.  Best to copy enough code here to reproduce the problem, or point us at your web page.
On Mon, Jan 9, 2017 at 8:20 AM, 'Joan Ibanez' via Google Visualization API <google-visua...@googlegroups.com> wrote:
Hi,

sometimes I have a problem with the loading of google chart library, because script attempts to execute before (I assume) library is completely loaded although I am using the proposed methods. Google Chrome performance is much better than IE but not 100% reliable. Is there another way to ensure loading before executing?

THX!

--
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.



--

Daniel LaLiberte

unread,
Jan 9, 2017, 11:27:34 AM1/9/17
to Google Visualization API
Since you have to wait for two things to load before proceeding, you can do that one of three ways.

1. Start with chart loading, and once charts code is loaded (in the charts callback function), then load SP and wait for it to be loaded.
2. Start with SP loading, and once SP is loaded (in whatever function you use there), then load charts and wait for it to be loaded.
3. Load charts and SP simultaneously, but in the callback functions for both, you need to check whether the other is already loaded before proceeding.

The third case might be easiest, so do something like this:

var chartsLoaded = false;
var spLoaded = false;

function chartsCallback() {
  chartsLoaded = true;
  if (spLoaded) {
    // we can proceed with drawing charts;
    drawCharts();
  }
}

// Start loading charts.
google.charts.load('current', { packages: ["timeline","corechart","bar","gantt"] } );
google.charts.setOnLoadCallback(chartsCallback);

function spCallback() {
  spLoaded = true;
  if (chartsLoaded) {
    // we can proceed with sp stuff
    // not sure what you want here.
  }
}

// Start loading sp.
// This?:

 $(window).load(function(){
            // Make sure the SharePoint script file 'sp.js' is loaded before your
            // code runs.
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {});  // reference spCallback?
            SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems,"sp.js"); // reference spCallback?
     }); 


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



--

--
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/ee3a42cc-7442-4eaf-ba20-3af980277375%40googlegroups.com.

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



--

Joan Ibanez

unread,
Jan 9, 2017, 4:19:23 PM1/9/17
to google-visua...@googlegroups.com
Hi,

thanks for the answer. Due to some reasons I chose option 2 (first load google charts, then load sp). My structure:

===schnipp===

 google.charts.load("current", {packages:['calendar','timeline','table']});      
 google.charts.setOnLoadCallback(initialize());

function initialize(){

            // Make sure the SharePoint script file 'sp.js' is loaded before your
            // code runs.
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {});
            SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems,"sp.js");
           
 }
   
function retrieveListItems() {
    ...
}

===schnapp===

In chrome this code throws following exception:

"Uncaught TypeError: google.visualization.Table is not a constructor at retrieveListItems"

The problem is that the object table is not loaded at that time (if I understand correctly), so code is stucking in retrieveListItems by this line:

"var table = new google.visualization.Table(document.getElementById('programlist'));"

Any further advice?

THX!

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/ee3a42cc-7442-4eaf-ba20-3af980277375%40googlegroups.com.

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



--

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/B-LA6BgrMdE/unsubscribe.
To unsubscribe from this group and all its topics, 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/CAOtcSJM3AbLo5_mzyC5WyYKDsm95a5m%2B3N%3DL8Tn3UEdkorgb6w%40mail.gmail.com.

Daniel LaLiberte

unread,
Jan 9, 2017, 4:22:02 PM1/9/17
to Google Visualization API
Your google.charts.setOnLoadCallback() call gives initialize() as the argument.  That calls your initialize function right then, even before the library is loaded, which then causes the error. Instead just give initialize (without the parens).

On Mon, Jan 9, 2017 at 4:19 PM, 'Joan Ibanez' via Google Visualization API <google-visua...@googlegroups.com> wrote:
Hi,

thanks for the answer. Due to some reasons I chose option 2 (first load google charts, then load sp). My structure:

===schnipp===

 google.charts.load("current", {packages:['calendar','timeline','table']});      
 google.charts.setOnLoadCallback(initialize());

function initialize(){
            // Make sure the SharePoint script file 'sp.js' is loaded before your
            // code runs.
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {});
            SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems,"sp.js");
           
 }
   
function retrieveListItems() {
    ...
}

===schnapp===

In chrome this code throws following exception:

"Uncaught TypeError: google.visualization.Table is not a constructor at retrieveListItems"

The problem is that the object table is not loaded at that time (if I understand correctly), so code is stucking in retrieveListItems by this line:

"var table = new google.visualization.Table(document.getElementById('programlist'));"

Any further advice?

THX!

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@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/CAOtcSJM3AbLo5_mzyC5WyYKDsm95a5m%2B3N%3DL8Tn3UEdkorgb6w%40mail.gmail.com.

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

--
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/CA%2BdhxBaS%3Dv4q1G5zFHeZ7zg_ju67Gn6pkv45eFDXT45viaPaxg%40mail.gmail.com.

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

Joan Ibanez

unread,
Jan 9, 2017, 4:27:06 PM1/9/17
to google-visua...@googlegroups.com
Hi,

many thanks, I had misunderstood the way of passing the function as param. Now it seems to work perfectly in google, but not in IE. There I get no error code because debugger does not throw any exception loading perfectly. Is there an explanation for this different behaviour in IE?

THX!

2017-01-09 22:21 GMT+01:00 'Daniel LaLiberte' via Google Visualization API <google-visua...@googlegroups.com>:
Your google.charts.setOnLoadCallback() call gives initialize() as the argument.  That calls your initialize function right then, even before the library is loaded, which then causes the error. Instead just give initialize (without the parens).
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CA%2BdhxBaS%3Dv4q1G5zFHeZ7zg_ju67Gn6pkv45eFDXT45viaPaxg%40mail.gmail.com.

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



--

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/B-LA6BgrMdE/unsubscribe.
To unsubscribe from this group and all its topics, 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/CAOtcSJPnMwwa85KW4Zc2P7ctCxrEOpJLL5uW3fCsetNqZOih0w%40mail.gmail.com.

Daniel LaLiberte

unread,
Jan 9, 2017, 4:32:11 PM1/9/17
to Google Visualization API
Load order of files could be different in different browsers.  It sounds like you are loading google charts correctly now, but I don't know anything about sharepoint.  I would look there for problems.  You should probably get the IE JavaScript debugger going and step through the relevant parts of the code.

On Mon, Jan 9, 2017 at 4:27 PM, 'Joan Ibanez' via Google Visualization API <google-visua...@googlegroups.com> wrote:
Hi,

many thanks, I had misunderstood the way of passing the function as param. Now it seems to work perfectly in google, but not in IE. There I get no error code because debugger does not throw any exception loading perfectly. Is there an explanation for this different behaviour in IE?

THX!
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJPnMwwa85KW4Zc2P7ctCxrEOpJLL5uW3fCsetNqZOih0w%40mail.gmail.com.

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

--
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/CA%2BdhxBbyEwY_f9kpZjcm4mDQbDJzdU1V3zm9aeWCrc%2B6z1R2QA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages