1. Refactored some visualziation helper functions spread across different files into one javascript file.

2. Fixed the bug NIHVIVO-1595. Now for https: sites the sparkline visualizations are rendered by generating a chart image url instead of going throught the google visualization API. This image is directly placed in the container. For http sites it follows the old procedure.

productMods/css/visualization/visualization.css

@@ -65,11 +65,16 @@ span.incomplete-data-holder,
 }
 
 .google-visualization-sparkline-image {
-    border: 1px solid #cfe4ed; 
+    border: 1px solid #cfe4ed;
+    display: block; 
 }
 
 .google-visualization-sparkline-selected {
     background-color: blue;
+    border-spacing: 0;
+    color: gray;
+    font-size: small;
+    padding: 1px;
 }
 
 .visualization-menupage-link {

productMods/js/visualization/personlevel/person-level.js

@@ -82,17 +82,6 @@ function getWellFormedURLs(given_uri, type) {
 	}
 }
 
-$.fn.image = function(src, successFunc, failureFunc){
-	return this.each(function(){ 
-		var profileImage = new Image();
-		profileImage.onerror = failureFunc;
-		profileImage.onload = successFunc;
-		profileImage.src = src;
-
-		return profileImage;
-	});
-};
-
 function setProfileImage(imageContainerID, mainImageURL) {
 	
 	if (imageContainerID == "") {

productMods/js/visualization/visualization-helper-functions.js

@@ -0,0 +1,95 @@
+/**
+ * For rendering images dynamically.
+ * 
+ */
+$.fn.image = function(src, successFunc, failureFunc){
+	return this.each(function(){ 
+		var profileImage = new Image();
+		profileImage.onerror = failureFunc;
+		profileImage.onload = successFunc;
+		profileImage.src = src;
+
+		return profileImage;
+	});
+};
+
+
+/**
+ * Function by Google Charts API Team to do "extended encode" of data. 
+*/
+function extendedEncodeDataForChartURL(arrVals, maxVal) {
+
+    var EXTENDED_MAP = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.';
+    var EXTENDED_MAP_LENGTH = EXTENDED_MAP.length;
+    var chartData = 'e:';
+
+    for (i = 0, len = arrVals.length; i < len; i++) {
+        // In case the array vals were translated to strings.
+        var numericVal = new Number(arrVals[i]);
+        // Scale the value to maxVal.
+        var scaledVal = Math.floor(EXTENDED_MAP_LENGTH * EXTENDED_MAP_LENGTH * numericVal / maxVal);
+
+        if (scaledVal > (EXTENDED_MAP_LENGTH * EXTENDED_MAP_LENGTH) - 1) {
+            chartData += "..";
+        } else if (scaledVal < 0) {
+            chartData += '__';
+        } else {
+            // Calculate first and second digits and add them to the output.
+            var quotient = Math.floor(scaledVal / EXTENDED_MAP_LENGTH);
+            var remainder = scaledVal - EXTENDED_MAP_LENGTH * quotient;
+            chartData += EXTENDED_MAP.charAt(quotient) + EXTENDED_MAP.charAt(remainder);
+        }
+    }
+
+    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
+}

productMods/templates/freemarker/body/partials/individual/individual-sparklineVisualization.ftl

@@ -10,6 +10,7 @@
 <#assign googleJSAPI = 'https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22imagesparkline%22%5D%7D%5D%7D'>
 <#assign coAuthorURL = '${urls.base}${standardVisualizationURLRoot}?vis=person_level&uri=${individual.uri}&vis_mode=coauthor'>
 <#assign coInvestigatorURL = '${urls.base}${standardVisualizationURLRoot}?vis=person_level&uri=${individual.uri}&vis_mode=copi'>
+<#assign visualizationHelperJavaScript = 'js/visualization/visualization-helper-functions.js'>
 
     <div id="vis_container_coauthor">&nbsp;</div>
     
@@ -33,7 +34,9 @@
 
     ${stylesheets.add("css/visualization/visualization.css")}
     ${scripts.add(googleJSAPI)}
+    ${scripts.add(visualizationHelperJavaScript)}
     ${scripts.add("/js/visualization/sparkline.js")}
+    ${scripts.add(visualizationHelperJavaScript)}
     
     <script type="text/javascript">
         var visualizationUrl = '${individual.visualizationUrl}';

productMods/templates/freemarker/visualization/coauthorship/coAuthorshipSparklineContent.ftl

@@ -47,17 +47,66 @@
 
                 </#if>
          
+                var visualizationOptions = {
+                    width: 150,
+                    height: 60,
+                    color: '3399CC',
+                    chartType: 'ls',
+                    chartLabel: 'r'
+                }
+
+                /* 
+                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));
+                    });
+                    
+                    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();
+                            }
+                    );
+                
+                }
          
-                <#-- 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: 150,
-                        height: 60,
-                        showAxisLines: false,
-                        showValueLabels: false,
-                        labelPosition: 'none'
-                });
-            
                 <#if sparklineVO.shortVisMode>
          
                     <#-- We want to display how many coauthors were considered, so this is used to calculate this. -->

productMods/templates/freemarker/visualization/coauthorship/coAuthorshipStandaloneActivator.ftl

@@ -1,7 +1,9 @@
 <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
 
 <#assign googleJSAPI = 'https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22areachart%22%2C%22imagesparkline%22%5D%7D%5D%7D'>
+<#assign visualizationHelperJavaScript = 'js/visualization/visualization-helper-functions.js'>
 
 ${headScripts.add(googleJSAPI)}
+${scripts.add(visualizationHelperJavaScript)}
 
 <#include "coAuthorshipSparklineContent.ftl">

productMods/templates/freemarker/visualization/copi/coInvestigationSparklineContent.ftl

@@ -46,16 +46,67 @@
                 <#else>
          
                 </#if>    
+
+                var visualizationOptions = {
+                    width: 150,
+                    height: 60,
+                    color: '3399CC',
+                    chartType: 'ls',
+                    chartLabel: 'r'
+                }
+
+                /* 
+                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. -->
+                    <#-- 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.ImageSparkLine(providedSparklineImgTD[0]);
-                sparkline.draw(sparklineDataView, {
+                    sparkline.draw(sparklineDataView, {
-                        width: 150,
+                            width: visualizationOptions.width,
-                        height: 60,
+                            height: visualizationOptions.height,
-                        showAxisLines: false,
+                            showAxisLines: false,
-                        showValueLabels: false,
+                            showValueLabels: false,
-                        labelPosition: 'none'
+                            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));
+                    });
+                    
+                    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.shortVisMode>
                 

productMods/templates/freemarker/visualization/copi/coInvestigationStandaloneActivator.ftl

@@ -1,7 +1,9 @@
 <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
 
 <#assign googleJSAPI = 'https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22areachart%22%2C%22imagesparkline%22%5D%7D%5D%7D'>
+<#assign visualizationHelperJavaScript = 'js/visualization/visualization-helper-functions.js'>
 
 ${headScripts.add(googleJSAPI)}
+${scripts.add(visualizationHelperJavaScript)}
 
 <#include "coInvestigationSparklineContent.ftl">

productMods/templates/freemarker/visualization/grant/personGrantCountStandaloneActivator.ftl

@@ -1,7 +1,9 @@
 <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
 
 <#assign googleJSAPI = 'https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22areachart%22%2C%22imagesparkline%22%5D%7D%5D%7D'>
+<#assign visualizationHelperJavaScript = 'js/visualization/visualization-helper-functions.js'>
 
 ${headScripts.add(googleJSAPI)}
+${scripts.add(visualizationHelperJavaScript)}
 
 <#include "personGrantSparklineContent.ftl">

productMods/templates/freemarker/visualization/grant/personGrantSparklineContent.ftl

@@ -45,17 +45,68 @@
 
                 <#else>
          
-                </#if>       
+                </#if>    
+                
+                 var visualizationOptions = {
+                    width: 150,
+                    height: 60,
+                    color: '3399CC',
+                    chartType: 'ls',
+                    chartLabel: 'r'
+                }
+
+                /* 
+                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: 150,
+                        width: visualizationOptions.width,
-                        height: 60,
+                        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));
+                    });
+                    
+                    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.shortVisMode>
          

productMods/templates/freemarker/visualization/personlevel/coAuthorPersonLevel.ftl

@@ -17,6 +17,7 @@
 <#assign googleVisualizationAPI = 'https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22areachart%22%2C%22imagesparkline%22%5D%7D%5D%7D'>
 <#assign coAuthorPersonLevelJavaScript = '${urls.base}/js/visualization/coauthorship/coauthorship-personlevel.js'>
 <#assign commonPersonLevelJavaScript = '${urls.base}/js/visualization/personlevel/person-level.js'>
+<#assign visualizationHelperJavaScript = 'js/visualization/visualization-helper-functions.js'>
 
 <#assign coInvestigatorIcon = '${urls.images}/visualization/co_investigator_icon.png'>
 
@@ -51,6 +52,8 @@ var visualizationDataRoot = "${dataVisualizationURLRoot}";
 <script type="text/javascript" src="${coAuthorPersonLevelJavaScript}"></script>
 <script type="text/javascript" src="${commonPersonLevelJavaScript}"></script>
 
+${scripts.add(visualizationHelperJavaScript)}
+
 
 <#assign pageStyle = "${urls.base}/css/visualization/personlevel/page.css" />
 <#assign vizStyle = "${urls.base}/css/visualization/visualization.css" />

productMods/templates/freemarker/visualization/personlevel/coPIPersonLevel.ftl

@@ -19,6 +19,7 @@
 <#assign googleVisualizationAPI = 'https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22areachart%22%2C%22imagesparkline%22%5D%7D%5D%7D'>
 <#assign coInvestigatorPersonLevelJavaScript = '${urls.base}/js/visualization/coPIship/coPIship-person-level.js'>
 <#assign commonPersonLevelJavaScript = '${urls.base}/js/visualization/personlevel/person-level.js'>
+<#assign visualizationHelperJavaScript = 'js/visualization/visualization-helper-functions.js'>
 
 <script type="text/javascript" src="${adobeFlashDetector}"></script>
 <script type="text/javascript" src="${googleVisualizationAPI}"></script>
@@ -50,6 +51,8 @@ var visualizationDataRoot = "${dataVisualizationURLRoot}";
 <script type="text/javascript" src="${coInvestigatorPersonLevelJavaScript}"></script>
 <script type="text/javascript" src="${commonPersonLevelJavaScript}"></script>
 
+${scripts.add(visualizationHelperJavaScript)}
+
 <#assign pageStyle = "${urls.base}/css/visualization/personlevel/page.css" />
 <#assign vizStyle = "${urls.base}/css/visualization/visualization.css" />
 

productMods/templates/freemarker/visualization/publication/personPublicationCountStandaloneActivator.ftl

@@ -1,7 +1,9 @@
 <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
 
 <#assign googleJSAPI = 'https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22areachart%22%2C%22imagesparkline%22%5D%7D%5D%7D'>
+<#assign visualizationHelperJavaScript = 'js/visualization/visualization-helper-functions.js'>
 
 ${headScripts.add(googleJSAPI)}
+${scripts.add(visualizationHelperJavaScript)}
 
 <#include "personPublicationSparklineContent.ftl">

productMods/templates/freemarker/visualization/publication/personPublicationSparklineContent.ftl

@@ -47,18 +47,68 @@
                 <#else>
          
                 </#if>
+                
+                var visualizationOptions = {
+                    width: 150,
+                    height: 60,
+                    color: '3399CC',
+                    chartType: 'ls',
+                    chartLabel: 'r'
+                }
+
+                /* 
+                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));
+                    });
+                    
+                    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();
+                            }
+                    );
+                
+                }
          
          
-                <#-- 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: 150,
-                        height: 60,
-                        showAxisLines: false,
-                        showValueLabels: false,
-                        labelPosition: 'none'
-                });
-            
                 <#if sparklineVO.shortVisMode>
          
                     <#-- We want to display how many publication counts were considered, so this is used to calculate this. -->