Merge pull request #884 from Codeinwp/bugfix/883

Fix multiple charts loading issue

Author: cristian-ungureanu

classes/Visualizer/Module/Frontend.php

@@ -677,11 +677,22 @@ function visualizerLoadScripts() {
 						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,6 +106,13 @@
         registerDefaultActions();
     });
 
+    // Refresh charts if chart not generated.
+    function refreshEachCharts() {
+        setTimeout( function() {
+            displayChartsOnFrontEnd();
+        }, 100 );
+    }
+
     function initChartDisplay() {
         if(visualizer.is_front == true){ // jshint ignore:line
             displayChartsOnFrontEnd();
@@ -132,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,21 @@ 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();
                 }
-            }
-        });
+            });
+        }
     });
 
     $('body').on('visualizer:render:specificchart:start', function(event, v){