diff --git a/productMods/css/visualization/visualization.css b/productMods/css/visualization/visualization.css
index eb4148b0..26d479ec 100644
--- a/productMods/css/visualization/visualization.css
+++ b/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 {
diff --git a/productMods/js/visualization/personlevel/person-level.js b/productMods/js/visualization/personlevel/person-level.js
index 62f4bd97..ec625d33 100644
--- a/productMods/js/visualization/personlevel/person-level.js
+++ b/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 == "") {
diff --git a/productMods/js/visualization/visualization-helper-functions.js b/productMods/js/visualization/visualization-helper-functions.js
new file mode 100644
index 00000000..15081334
--- /dev/null
+++ b/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 = "&";
+ 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
+}
\ No newline at end of file
diff --git a/productMods/templates/freemarker/body/partials/individual/individual-sparklineVisualization.ftl b/productMods/templates/freemarker/body/partials/individual/individual-sparklineVisualization.ftl
index 3c6be712..c62bf94d 100644
--- a/productMods/templates/freemarker/body/partials/individual/individual-sparklineVisualization.ftl
+++ b/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'>
@@ -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)}
+${scripts.add(visualizationHelperJavaScript)}
+
<#assign pageStyle = "${urls.base}/css/visualization/personlevel/page.css" />
<#assign vizStyle = "${urls.base}/css/visualization/visualization.css" />
diff --git a/productMods/templates/freemarker/visualization/personlevel/coPIPersonLevel.ftl b/productMods/templates/freemarker/visualization/personlevel/coPIPersonLevel.ftl
index 7cc5ebee..33e031e4 100644
--- a/productMods/templates/freemarker/visualization/personlevel/coPIPersonLevel.ftl
+++ b/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'>
@@ -50,6 +51,8 @@ var visualizationDataRoot = "${dataVisualizationURLRoot}";
+${scripts.add(visualizationHelperJavaScript)}
+
<#assign pageStyle = "${urls.base}/css/visualization/personlevel/page.css" />
<#assign vizStyle = "${urls.base}/css/visualization/visualization.css" />
diff --git a/productMods/templates/freemarker/visualization/publication/personPublicationCountStandaloneActivator.ftl b/productMods/templates/freemarker/visualization/publication/personPublicationCountStandaloneActivator.ftl
index 8bb9745e..49a7c345 100644
--- a/productMods/templates/freemarker/visualization/publication/personPublicationCountStandaloneActivator.ftl
+++ b/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">
\ No newline at end of file
diff --git a/productMods/templates/freemarker/visualization/publication/personPublicationSparklineContent.ftl b/productMods/templates/freemarker/visualization/publication/personPublicationSparklineContent.ftl
index 6e3208d4..629e9203 100644
--- a/productMods/templates/freemarker/visualization/publication/personPublicationSparklineContent.ftl
+++ b/productMods/templates/freemarker/visualization/publication/personPublicationSparklineContent.ftl
@@ -47,18 +47,68 @@
<#else>
+
+ 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. -->