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.
This commit is contained in:
cdtank 2011-01-22 01:14:42 +00:00
parent 5ab3cbce42
commit c920c84699
14 changed files with 352 additions and 45 deletions

View file

@ -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}';

View file

@ -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. -->

View file

@ -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">

View file

@ -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. -->
var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]);
sparkline.draw(sparklineDataView, {
width: 150,
height: 60,
showAxisLines: false,
showValueLabels: false,
labelPosition: 'none'
});
<#-- 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();
}
);
}
<#if sparklineVO.shortVisMode>

View file

@ -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">

View file

@ -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">

View file

@ -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,
height: 60,
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();
}
);
}
<#if sparklineVO.shortVisMode>

View file

@ -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" />

View file

@ -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" />

View file

@ -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">

View file

@ -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. -->