Updated load functions of Google Chart visualizations (see issue epri…

…nts#98) to Version 48
eprintsug · Jun 22, 2020 · bbb8653 · bbb8653
1 parent b849abb
commit bbb8653
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 57 deletions.
diff --git a/cfg/cfg.d/z_irstats2.pl b/cfg/cfg.d/z_irstats2.pl
@@ -149,11 +149,9 @@
         my $head = $repo->make_doc_fragment;
 
         $head->appendChild( $repo->make_javascript( undef,
-                src => "$protocol://www.google.com/jsapi"
+                src => "$protocol://www.gstatic.com/charts/loader.js"
         ) );
 
-        $head->appendChild( $repo->make_javascript( 'google.load("visualization", "1", {packages:["corechart", "geochart"]});' ) );
-
         if( defined $pins->{'utf-8.head'} )
         {
                 $pins->{'utf-8.head'} .= $repo->xhtml->to_xhtml( $head );

diff --git a/lib/static/javascript/auto/90_irstats2.js b/lib/static/javascript/auto/90_irstats2.js
@@ -259,7 +259,11 @@ var EPJS_Stats_GoogleGraph = Class.create(EPJS_Stats, {
 		}
 
 		var jsdata = json.data;
-
+
+		google.charts.load("visualization", "48", {packages:["corechart"]});
+		google.charts.setOnLoadCallback(drawChart);
+
+		function drawChart(){
 		var data = new google.visualization.DataTable();
 		data.addColumn('string', 'Year');
 		data.addColumn('number', ' ');
@@ -303,8 +307,9 @@ var EPJS_Stats_GoogleGraph = Class.create(EPJS_Stats, {
 			options.seriesType = 'bars';	
 			options.series = { 1: { type: 'line', lineWidth: 1 } };
 		}
-
 		chart.draw( data, options );
+		}
+
 	}
 });
 
@@ -324,36 +329,44 @@ var EPJS_Stats_GoogleSpark = Class.create(EPJS_Stats, {
 		var json = response.responseText.evalJSON();
 
 		var jsdata = json.data;
+
+		var containerID = this.container_id;
+
+		google.charts.load("visualization", "48", {packages:["corechart"]});
+		google.charts.setOnLoadCallback(drawChart);
+
+		function drawChart(){
+			var data = new google.visualization.DataTable();
+			data.addColumn('string', 'Year');
+			data.addColumn('number', ' ');
+			data.addRows( jsdata );
+
+			var container = $( containerID );
+			var w = container.getWidth();
+			var h = container.getHeight();
+
+			var chart = new google.visualization.AreaChart(container);
+
+			chart.draw( data, {
+					width: w, 
+					height: h,
+					lineWidth: 1, 
+					enableInteractivity: false,
+					hAxis: {
+						slantedText: false,
+						maxAlternation: 1,
+						textColor: '#ffffff'
+					},
+					legend: 'none', 
+					vAxis: {
+						textColor: '#ffffff',
+						viewWindowMode: 'explicit', 
+						viewWindow: { min: 0 },
+						gridlines: { color: '#ffffff' } 
+					}
+			} );
+		}
 
-		var data = new google.visualization.DataTable();
-		data.addColumn('string', 'Year');
-		data.addColumn('number', ' ');
-		data.addRows( jsdata );
-
-		var container = $( this.container_id );
-		var w = container.getWidth();
-		var h = container.getHeight();
-
-		var chart = new google.visualization.AreaChart(container);
-
-		chart.draw( data, {
-				width: w, 
-				height: h,
-				lineWidth: 1, 
-				enableInteractivity: false,
-				hAxis: {
-					slantedText: false,
-					maxAlternation: 1,
-					textColor: '#ffffff'
-				},
-				legend: 'none', 
-				vAxis: {
-					textColor: '#ffffff',
-					viewWindowMode: 'explicit', 
-					viewWindow: { min: 0 },
-					gridlines: { color: '#ffffff' } 
-				}
-	 	} );
 	}
 });
 
@@ -372,19 +385,28 @@ var EPJS_Stats_GoogleGeoChart = Class.create(EPJS_Stats, {
 
 		var json = response.responseText.evalJSON();
 		var jsdata = json.data;
-
-		var data = new google.visualization.DataTable();
-		data.addColumn('string', 'Country');
-		data.addColumn('number', 'Downloads');
-		data.addRows( jsdata );
-
-		var container = $( this.container_id );
-		var w = container.getWidth() - 20;
-		var h = container.getHeight() - 10;
 
-		var options = {'width':w, 'height':h};
-		var chart = new google.visualization.GeoChart( container );
-		chart.draw(data, options);
+		var containerID = this.container_id;
+
+		google.charts.load("visualization", "48", {packages:["geochart"]});
+		google.charts.setOnLoadCallback(drawChart);
+
+		function drawChart(){
+				var data = new google.visualization.DataTable();
+				data.addColumn('string', 'Country');
+				data.addColumn('number', 'Downloads');
+				data.addRows( jsdata );
+
+				var container = $( containerID );
+				var w = container.getWidth() - 20;
+				var h = container.getHeight() - 10;
+
+				var options = {'width':w, 'height':h};
+				var chart = new google.visualization.GeoChart( container );
+				chart.draw(data, options);
+		}
+
+
 	}
 });
 
@@ -403,19 +425,27 @@ var EPJS_Stats_GooglePieChart = Class.create(EPJS_Stats, {
 
 		var json = response.responseText.evalJSON();
 		var jsdata = json.data;
+
+		google.charts.load("visualization", "48", {packages:["corechart"]});
+		google.charts.setOnLoadCallback(drawChart);
+
+		var containerID = this.container_id;
+
+		function drawChart(){
 
-		var data = new google.visualization.DataTable();
-		data.addColumn('string', 'Country');
-		data.addColumn('number', 'Downloads');
-		data.addRows( jsdata );
+			var data = new google.visualization.DataTable();
+			data.addColumn('string', 'Country');
+			data.addColumn('number', 'Downloads');
+			data.addRows( jsdata );
 
-		var container = $( this.container_id );
-		var w = container.getWidth() - 20;
-		var h = container.getHeight() - 10;
-
-		var options = {'width':w, 'height':h};
-		var chart = new google.visualization.PieChart( container );
-		chart.draw(data, options);
+			var container = $( containerID );
+			var w = container.getWidth() - 20;
+			var h = container.getHeight() - 10;
+
+			var options = {'width':w, 'height':h};
+			var chart = new google.visualization.PieChart( container );
+			chart.draw(data, options);
+		}
 	}
 });