How can AngularJS be used to implement lazy loading for Google jsapi charts?

Question

How can AngularJS be used to implement lazy loading for Google jsapi charts?

I have a single page application with different tabs. I want to include a Google chart only on one specific tab without directly loading the charts js file, jsapi, unless that tab is accessed.

To achieve this, I need to dynamically add the JavaScript as shown below:

var script = document.createElement('script');
script.src = '//http://www.google.com/jsapi?ext.js';
document.body.appendChild(script);

The problem arises when trying to detect if the JavaScript has been fully loaded so that I can proceed accordingly:

if (whenJspaiLoaded()) {
    google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart); //my custom function
}

javascript angularjs google-visualization

Answer 1

Answer №1

Check out my coding solution below:

    <style>
    .preloader {
        height:350px; background:url(images/719.gif) left no-repeat;
    }
    </style>
    <div id="columnchart_material"><div class="preloader">&nbsp;</div></div>
<script type="text/javascript"
          src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }">
</script>
    <script>
google.setOnLoadCallback(drawChart);

      function drawChart() {
    var chart = new google.visualization.LineChart(document.getElementById('columnchart_material'));
                options.title='English'
                options.series[1].lineWidth = 0;
            chart.draw(data,options );
}
    </script>

You can view and interact with the code on Codepen by clicking here

Answer 2

Check out my coding solution below:

    <style>
    .preloader {
        height:350px; background:url(images/719.gif) left no-repeat;
    }
    </style>
    <div id="columnchart_material"><div class="preloader">&nbsp;</div></div>
<script type="text/javascript"
          src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }">
</script>
    <script>
google.setOnLoadCallback(drawChart);

      function drawChart() {
    var chart = new google.visualization.LineChart(document.getElementById('columnchart_material'));
                options.title='English'
                options.series[1].lineWidth = 0;
            chart.draw(data,options );
}
    </script>

You can view and interact with the code on Codepen by clicking here

Answer 3

Answer №2

If you're looking to simplify the management of charts in Angular, consider giving Angular Google Chart a shot. This library abstracts the chart handling process with a directive, allowing you to simply provide an object containing the data, options, and type of chart you want to create. The script tag is only added when necessary, either upon first loading the directive or when requesting the promise that confirms the library has loaded.

To ensure that the library isn't loaded until needed, consider using ng-if instead of ng-show or placing it in a separate routed view to prevent background loading of the directive element.

Answer 4

If you're looking to simplify the management of charts in Angular, consider giving Angular Google Chart a shot. This library abstracts the chart handling process with a directive, allowing you to simply provide an object containing the data, options, and type of chart you want to create. The script tag is only added when necessary, either upon first loading the directive or when requesting the promise that confirms the library has loaded.

To ensure that the library isn't loaded until needed, consider using ng-if instead of ng-show or placing it in a separate routed view to prevent background loading of the directive element.

Answer 5

Answer №3

If you're struggling to find a solution online, I've come up with a method that could be beneficial for someone in the future. The main idea here is to postpone the loading of both the js file and the initialization of the charts component using a callback.

This is how the service loads the js files:

app.service('gchart', ['$window', '$q', '$rootScope', function ($window, $q, $rootScope) {
      var deferred = $q.defer();

      //execute when the jsapi is loaded
      $window.callback = function () {
            $window.google.load('visualization','1',{
                packages: ['corechart'],
                callback: function() {
                    //using a callback again to ensure the visualization is fully loaded
                    $rootScope.$apply(function() {
                        deferred.resolve();
                    });
                }
            });
      }

      // dynamically adding the js file on page load
      var script = document.createElement('script');
      script.src = '//www.google.com/jsapi?callback=callback';
      document.body.appendChild(script);

      return deferred.promise;
}]);

Here's how you can use it as a directive:

app.directive(.., ['gchart', function(.., gchart) {
   return {
      //...
      link: function(scope, elm, attr) {
          scope.init = function() {
              var viz = new google.visualization.arrayToDataTable(data);
              //add options, linechart, draw, whatever
          };

          // delay the creation until jsapi files are loaded
          loadGoogleChartAPI.then(function () {
              scope.init();
          }, function () {
              //ignore
          });           
       }
   }
}

Answer 6

If you're struggling to find a solution online, I've come up with a method that could be beneficial for someone in the future. The main idea here is to postpone the loading of both the js file and the initialization of the charts component using a callback.

This is how the service loads the js files:

app.service('gchart', ['$window', '$q', '$rootScope', function ($window, $q, $rootScope) {
      var deferred = $q.defer();

      //execute when the jsapi is loaded
      $window.callback = function () {
            $window.google.load('visualization','1',{
                packages: ['corechart'],
                callback: function() {
                    //using a callback again to ensure the visualization is fully loaded
                    $rootScope.$apply(function() {
                        deferred.resolve();
                    });
                }
            });
      }

      // dynamically adding the js file on page load
      var script = document.createElement('script');
      script.src = '//www.google.com/jsapi?callback=callback';
      document.body.appendChild(script);

      return deferred.promise;
}]);

Here's how you can use it as a directive:

app.directive(.., ['gchart', function(.., gchart) {
   return {
      //...
      link: function(scope, elm, attr) {
          scope.init = function() {
              var viz = new google.visualization.arrayToDataTable(data);
              //add options, linechart, draw, whatever
          };

          // delay the creation until jsapi files are loaded
          loadGoogleChartAPI.then(function () {
              scope.init();
          }, function () {
              //ignore
          });           
       }
   }
}

Answer 7

Answer №4

Using async function with callback:

function loadScript(url, callback) {
  var document = document,
      tag = 'script',
      script = document.createElement(tag),
      firstScriptTag = document.getElementsByTagName(tag)[0];
  script.src = '//' + url;
  if (callback) { 
    script.addEventListener('load', function (event) { callback(null, event); }, false); 
  }
  firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
}

Example of Usage:

loadScript('www.google.com/jsapi?ext.js', function() {
    google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);
});

Source: Reference

Answer 8

Using async function with callback:

function loadScript(url, callback) {
  var document = document,
      tag = 'script',
      script = document.createElement(tag),
      firstScriptTag = document.getElementsByTagName(tag)[0];
  script.src = '//' + url;
  if (callback) { 
    script.addEventListener('load', function (event) { callback(null, event); }, false); 
  }
  firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
}

Example of Usage:

loadScript('www.google.com/jsapi?ext.js', function() {
    google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);
});

Source: Reference

How can AngularJS be used to implement lazy loading for Google jsapi charts?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Understanding the unpredictability of A-Sync in Node.js/Express: Why does it appear to operate in a non-linear fashion?

Testing Jest with NodeJS involves simulating input from standard input (stdin)

Is it possible to protect assets aside from JavaScript in Nodewebkit?

Refreshing the page using location.reload triggers a reload of various elements

Leveraging promises in HTTP requests within Angular has proven to be a

MongoDB date query with $gte and $le operators mm/dd/yy

Utilizing Node.js and Express alongside EJS, iterating through objects and displaying them in a table

Using Vue.js to pass a variable from a parent component to a child component

Utilize AJAX to fetch and display the response from a Node JS route directly onto an HTML page

Executing several GET requests in JavaScript

Is there a way to access and invoke a exposed function of a Vue component within a default slot?

What is the best way to reference a const from a different class in React?

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

Exploring the Relationship Between jQuery and JSON through Iterating Over JSON Arrays

What is the most efficient method for defining a string structure in TypeScript?

Optimizing performance: Enhance readback operations in Canvas2D by enabling the willReadFrequently attribute for faster getImageData processing

Angular model remains static when incorporated within the document.addEventListener() attribute

Switching the color scheme between mobile and desktop devices to make the background look

Issue with form array patching causing value not to be set on material multiple select

Deploy Node.js on a Debian server hosted on Google Compute Engine