Fixes Google Image Line Chart (#3974)

* Replaced googleapis chart with quickchart.io * Updated to quickchart * Fixed nochart publication count * Replaced ImageSparkline with LineChart
vivo-project · Apr 22, 2024 · 2642d16 · 2642d16
1 parent 223e4de
commit 2642d16
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 262 deletions.
diff --git a/webapp/src/main/webapp/js/individual/individualUtils.js b/webapp/src/main/webapp/js/individual/individualUtils.js
@@ -66,7 +66,7 @@ $(document).ready(function(){
 
 							spanStr = "<a title='" + i18nStrings.exportQrCodes + "' href='"
 							          + exportQrCodeUrl + "'>"
-							          + "<img id='codeImage' src='https://chart.googleapis.com/chart?cht=qr&amp;chs=125x125&amp;chl="
+							          + "<img id='codeImage' src='https://quickchart.io/chart?cht=qr&amp;chs=125x125&amp;chl="
 									  + vcard
 									  + "&amp;choe=UTF-8'/>"
 									  + "</a>";

diff --git a/webapp/src/main/webapp/js/visualization/visualization-helper-functions.js b/webapp/src/main/webapp/js/visualization/visualization-helper-functions.js
@@ -46,56 +46,6 @@ function extendedEncodeDataForChartURL(arrVals, maxVal) {
     return chartData;
 }
 
-/**
- * This will be used for getting images directly from the secure https://charts.googleapis.com
- * instead of http://charts.apis.google.com which currently throws security warnings.
- *
- * see http://code.google.com/apis/chart/docs/chart_params.html FOR chart parameters
- * see http://code.google.com/apis/chart/docs/data_formats.html FOR how to encode data
- *
- * sample constructed URL - https://chart.googleapis.com/chart?cht=ls&chs=148x58&chdlp=r&chco=3399CC&chd=e%3AW2ttpJbb..ttgAbbNtAA
- */
-function constructVisualizationURLForSparkline(dataString, visualizationOptions) {
-
-	/*
-	 * Since we are directly going to use this URL in img tag, we are supposed to enocde "&"
-	 * update: But since we are directly using it in an Image creating function we dont need to encode it.
-	*/
-    //var parameterDifferentiator = "&amp;";
-    var parameterDifferentiator = "&";
-
-    var rootGoogleChartAPI_URL = "https://chart.googleapis.com/chart?";
-
-    /*
-     * cht=ls indicates chart of type "line chart sparklines".
-     * see http://code.google.com/apis/chart/docs/gallery/chart_gall.html
-	*/
-    var chartType = "cht=" + visualizationOptions.chartType;
-
-    /*
-     * It seems google reduces 2px from width & height before rendering the actual image.
-     * We will do the same.
-	*/
-    var chartSize = "chs=" + (visualizationOptions.width - 2) + "x" + (visualizationOptions.height - 2);
-
-    /*
-     * It means that legend, if present, is to be displayed to the right of the chart,
-     * legend entries in a vertical column.
-	*/
-    var chartLabelPosition = "chdlp=" + visualizationOptions.chartLabel;
-
-    /*
-     * Color of the sparkline.
-	*/
-    var chartColor = "chco=" + visualizationOptions.color;
-
-    return rootGoogleChartAPI_URL + chartType + parameterDifferentiator
-    			+ chartSize + parameterDifferentiator
-    			+ chartLabelPosition + parameterDifferentiator
-    			+ chartColor + parameterDifferentiator
-    			+ "chd=" + dataString
-}
-
 /*
  * In IE trim() is not supported.
  * */

diff --git a/.../main/webapp/templates/freemarker/body/partials/individual/individual-qrCodeGenerator.ftl b/.../main/webapp/templates/freemarker/body/partials/individual/individual-qrCodeGenerator.ftl
@@ -85,7 +85,7 @@
 
         <#local vCard = (removeBlankLines(vCard))?url>
 
-        <#local qrCodeUrl = "https://chart.googleapis.com/chart?cht=qr&amp;chs=${qrCodeWidth}x${qrCodeWidth}&amp;chl=${vCard}&amp;choe=UTF-8" >
+        <#local qrCodeUrl = "https://quickchart.io/chart?cht=qr&amp;chs=${qrCodeWidth}x${qrCodeWidth}&amp;chl=${vCard}&amp;choe=UTF-8" >
     </#if>
 
     <#return qrCodeUrl>
@@ -103,7 +103,7 @@
     <#if externalUrl != "">
     	<#local fullExternalUrl = externalUrl + individual.profileUrl>
     	<#local qrCodeContent = fullExternalUrl?url>
-        <#local qrCodeUrl = "https://chart.googleapis.com/chart?cht=qr&amp;chs=${qrCodeWidth}x${qrCodeWidth}&amp;chl=${qrCodeContent}&amp;choe=UTF-8" >
+        <#local qrCodeUrl = "https://quickchart.io/chart?cht=qr&amp;chs=${qrCodeWidth}x${qrCodeWidth}&amp;chl=${qrCodeContent}&amp;choe=UTF-8" >
     </#if>
 
     <#return qrCodeUrl>

diff --git a/...n/webapp/templates/freemarker/visualization/coauthorship/coAuthorshipSparklineContent.ftl b/...n/webapp/templates/freemarker/visualization/coauthorship/coAuthorshipSparklineContent.ftl
@@ -39,21 +39,21 @@
                 var onlyUnknownYearPublications = false;
 
                 var data = new google.visualization.DataTable();
-                data.addColumn('string', 'Year');
+                data.addColumn('number', 'Year');
                 data.addColumn('number', 'Unique co-authors');
                 data.addRows(${sparklineVO.yearToEntityCountDataTable?size});
 
                 var knownYearPublicationCounts = 0;
 
                 <#list sparklineVO.yearToEntityCountDataTable as yearToUniqueCoauthorsDataElement>
-                    data.setValue(${yearToUniqueCoauthorsDataElement.yearToEntityCounter}, 0, '${yearToUniqueCoauthorsDataElement.year}');
+                    data.setValue(${yearToUniqueCoauthorsDataElement.yearToEntityCounter}, 0, ${yearToUniqueCoauthorsDataElement.year});
+                    data.setFormattedValue(${yearToUniqueCoauthorsDataElement.yearToEntityCounter}, 0, '${yearToUniqueCoauthorsDataElement.year}');
                     data.setValue(${yearToUniqueCoauthorsDataElement.yearToEntityCounter}, 1, ${yearToUniqueCoauthorsDataElement.currentEntitiesCount});
                     knownYearPublicationCounts += ${yearToUniqueCoauthorsDataElement.currentEntitiesCount};
                 </#list>
 
                 <#-- Create a view of the data containing only the column pertaining to coauthors count. -->
                 var sparklineDataView = new google.visualization.DataView(data);
-                sparklineDataView.setColumns([1]);
 
                 <#if sparklineVO.shortVisMode>
 
@@ -81,58 +81,34 @@
 
                 } else {
 
-                /*
-                Test if we want to go for the approach when serving visualizations from a secure site..
-                If "https:" is not found in location.protocol then we do everything normally.
-                */
-                if (location.protocol.indexOf("https") == -1) {
-                    /*
-                    This condition will make sure that the location protocol (http, https, etc) does not have
-                    for word https in it.
-                    */
-
                     <#-- Create the vis object and draw it in the div pertaining to sparkline. -->
-                    var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]);
+                    var sparkline = new google.visualization.LineChart(providedSparklineImgTD[0]);
                     sparkline.draw(sparklineDataView, {
-                            width: visualizationOptions.width,
-                            height: visualizationOptions.height,
-                            showAxisLines: false,
-                            showValueLabels: false,
-                            labelPosition: 'none'
-                    });
-
-                } else {
-
-                    <#-- Prepare data for generating google chart URL. -->
-
-                    <#-- If we need to serve data for https:, we have to create an array of values to be plotted. -->
-                    var chartValuesForEncoding = new Array();
-
-                    $.each(sparklineDataView.getViewRows(), function(index, value) {
-                        chartValuesForEncoding.push(data.getValue(value, 1));
+                        width: visualizationOptions.width,
+                        height: visualizationOptions.height,
+                        showAxisLines: false,
+                        showValueLabels: false,
+                        labelPosition: 'none',
+                        legend: { position: 'none' },
+                        chartArea: {'width': '100%', 'height': '100%'},
+                        colors: ['3399CC'],
+                        hAxis: {
+                            gridlines: {color: 'transparent'},
+                            baselineColor: 'transparent'
+                        },
+                        vAxis: {
+                            gridlines: {color: 'transparent'},
+                            baselineColor: 'transparent'
+                        },
+                        backgroundColor: {
+                            stroke: '#cfe4ed',
+                            strokeWidth: 2
+                        },
+                        tooltip: { 
+                            textStyle: {fontSize: 14}
+                        }
                     });
 
-                    var chartImageURL = constructVisualizationURLForSparkline(
-                                extendedEncodeDataForChartURL(chartValuesForEncoding,
-                                                              sparklineDataView.getColumnRange(0).max),
-                                visualizationOptions);
-
-                    var imageContainer = $(providedSparklineImgTD[0]);
-
-                    imageContainer.image(chartImageURL,
-                            function(){
-                                imageContainer.empty().append(this);
-                                $(this).addClass("google-visualization-sparkline-image");
-                            },
-                            function(){
-                                // For performing any action on failure to
-                                // find the image.
-                                imageContainer.empty();
-                            }
-                    );
-
-                }
-
                 }
 
                 if (${sparklineVO.totalCollaborationshipCount?c}) {

diff --git a/...c/main/webapp/templates/freemarker/visualization/copi/coInvestigationSparklineContent.ftl b/...c/main/webapp/templates/freemarker/visualization/copi/coInvestigationSparklineContent.ftl
@@ -39,21 +39,21 @@
                 var onlyUnknownYearGrants = false;
 
                 var data = new google.visualization.DataTable();
-                data.addColumn('string', '${i18n().year_capitalized}');
+                data.addColumn('number', '${i18n().year_capitalized}');
                 data.addColumn('number', '${i18n().unique_coinvestigators}');
                 data.addRows(${sparklineVO.yearToEntityCountDataTable?size});
 
                 var knownYearGrantCounts = 0;
 
                 <#list sparklineVO.yearToEntityCountDataTable as yearToUniqueCoinvestigatorsDataElement>
-                    data.setValue(${yearToUniqueCoinvestigatorsDataElement.yearToEntityCounter}, 0, '${yearToUniqueCoinvestigatorsDataElement.year}');
+                    data.setValue(${yearToUniqueCoinvestigatorsDataElement.yearToEntityCounter}, 0, ${yearToUniqueCoinvestigatorsDataElement.year});
+                    data.setFormattedValue(${yearToUniqueCoinvestigatorsDataElement.yearToEntityCounter}, 0, '${yearToUniqueCoinvestigatorsDataElement.year}');
                     data.setValue(${yearToUniqueCoinvestigatorsDataElement.yearToEntityCounter}, 1, ${yearToUniqueCoinvestigatorsDataElement.currentEntitiesCount});
                     knownYearGrantCounts += ${yearToUniqueCoinvestigatorsDataElement.currentEntitiesCount};
                 </#list>
 
                 <#-- Create a view of the data containing only the column pertaining to coinvestigators count. -->
                 var sparklineDataView = new google.visualization.DataView(data);
-                sparklineDataView.setColumns([1]);
 
                 <#if sparklineVO.shortVisMode>
 
@@ -80,58 +80,34 @@
 
                 } else {
 
-                /*
-                Test if we want to go for the approach when serving visualizations from a secure site..
-                If "https:" is not found in location.protocol then we do everything normally.
-                */
-                if (location.protocol.indexOf("https") == -1) {
-                    /*
-                    This condition will make sure that the location protocol (http, https, etc) does not have
-                    for word https in it.
-                    */
-
                     <#-- Create the vis object and draw it in the div pertaining to sparkline. -->
                     var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]);
                     sparkline.draw(sparklineDataView, {
-                            width: visualizationOptions.width,
-                            height: visualizationOptions.height,
-                            showAxisLines: false,
-                            showValueLabels: false,
-                            labelPosition: 'none'
-                    });
-
-                } else {
-
-                    <#-- Prepare data for generating google chart URL. -->
-
-                    <#-- If we need to serve data for https:, we have to create an array of values to be plotted. -->
-                    var chartValuesForEncoding = new Array();
-
-                    $.each(sparklineDataView.getViewRows(), function(index, value) {
-                        chartValuesForEncoding.push(data.getValue(value, 1));
+                        width: visualizationOptions.width,
+                        height: visualizationOptions.height,
+                        showAxisLines: false,
+                        showValueLabels: false,
+                        labelPosition: 'none',
+                        legend: { position: 'none' },
+                        chartArea: {'width': '100%', 'height': '100%'},
+                        colors: ['3399CC'],
+                        hAxis: {
+                            gridlines: {color: 'transparent'},
+                            baselineColor: 'transparent'
+                        },
+                        vAxis: {
+                            gridlines: {color: 'transparent'},
+                            baselineColor: 'transparent'
+                        },
+                        backgroundColor: {
+                            stroke: '#cfe4ed',
+                            strokeWidth: 2
+                        },
+                        tooltip: { 
+                            textStyle: {fontSize: 14}
+                        }
                     });
 
-                    var chartImageURL = constructVisualizationURLForSparkline(
-                                extendedEncodeDataForChartURL(chartValuesForEncoding,
-                                                              sparklineDataView.getColumnRange(0).max),
-                                visualizationOptions);
-
-                    var imageContainer = $(providedSparklineImgTD[0]);
-
-                    imageContainer.image(chartImageURL,
-                            function(){
-                                imageContainer.empty().append(this);
-                                $(this).addClass("google-visualization-sparkline-image");
-                            },
-                            function(){
-                                // For performing any action on failure to
-                                // find the image.
-                                imageContainer.empty();
-                            }
-                    );
-
-                }
-
                 }
 
                 if (${sparklineVO.totalCollaborationshipCount?c}) {