Fix multiple lazy load charts issue #883

Author: girishpanchal30

classes/Visualizer/Module/Frontend.php

@@ -670,18 +670,29 @@ function visualizerTriggerScriptLoader() {
 				});
 			}
 
-			function visualizerLoadScripts() {
+			function visualizerLoadScripts( refresh = false ) {
 				document.querySelectorAll("script[data-visualizer-script]").forEach(function(elem) {
 					jQuery.getScript( elem.getAttribute("data-visualizer-script") )
 					.done( function( script, textStatus ) {
 						elem.setAttribute("src", elem.getAttribute("data-visualizer-script"));
 						elem.removeAttribute("data-visualizer-script");
 						setTimeout( function() {
-							jQuery( '.visualizer-front:not(.visualizer-chart-loaded)' ).resize();
+							visualizerRefreshChart();
 						} );
 					} );
 				});
 			}
+
+			function visualizerRefreshChart() {
+				jQuery( '.visualizer-front:not(.visualizer-chart-loaded)' ).resize();
+				if ( jQuery( 'div.viz-facade-loaded:not(.visualizer-lazy):empty' ).length > 0 ) {
+					visualizerUserInteractionEvents.forEach( function( event ) {
+						window.addEventListener( event, function() {
+							jQuery( '.visualizer-front:not(.visualizer-chart-loaded)' ).resize();
+						}, { passive: true } );
+					} );
+				}
+			}
 		</script>
 			<?php
 		}

js/render-facade.js

@@ -106,12 +106,12 @@
         registerDefaultActions();
     });
 
-    $(window).on('load', function() {
-        // Refresh charts if chart not generated.
+    // Refresh charts if chart not generated.
+    function refreshEachCharts() {
         setTimeout( function() {
-            $( 'div.viz-facade-loaded:not(.visualizer-lazy):empty' ).removeClass( 'viz-facade-loaded' ).resize();
+            displayChartsOnFrontEnd();
         }, 100 );
-    } );
+    }
 
     function initChartDisplay() {
         if(visualizer.is_front == true){ // jshint ignore:line
@@ -139,6 +139,7 @@
         $('div.visualizer-front:not(.visualizer-lazy):not(.viz-facade-loaded)').each(function(index, element){
             var id = $(element).addClass('viz-facade-loaded').attr('id');
             showChart(id);
+            refreshEachCharts();
         });
 
         // interate through all charts that are to be lazy-loaded and observe each one.

js/render-google.js

@@ -508,19 +508,23 @@ var __visualizer_chart_images   = [];
         }
 
         objects = {};
-        google.load( 'visualization', 'current', {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language,
-            callback: function () {
-                gv = google.visualization;
-                all_charts = v.charts;
-                if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
-                    if ( document.getElementById( v.id ).offsetParent !== null ) {
-                        renderChart(v.id);
+        if ( 'object' === typeof google ) {
+            google.load( 'visualization', 'current', {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language,
+                callback: function () {
+                    gv = google.visualization;
+                    all_charts = v.charts;
+                    if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
+                        if ( document.getElementById( v.id ).offsetParent !== null ) {
+                            renderChart(v.id);
+                        }
+                    } else {
+                        render();
                     }
-                } else {
-                    render();
                 }
-            }
-        });
+            });
+        } else {
+            console.log( 'error', window.google );
+        }
     });
 
     $('body').on('visualizer:render:specificchart:start', function(event, v){