Skip to content

Commit

Permalink
Replaced ImageSparkline with LineChart
Browse files Browse the repository at this point in the history
  • Loading branch information
@milospp
milospp committed Apr 11, 2024
1 parent d5d843e commit 7badf5f
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 255 deletions.
50 changes: 0 additions & 50 deletions webapp/src/main/webapp/js/visualization/visualization-helper-functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,56 +46,6 @@ function extendedEncodeDataForChartURL(arrVals, maxVal) {
return chartData;
}

/**
* This will be used for getting images directly from the secure https://quickchart.io
* 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://quickchart.io/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://quickchart.io/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.
* */
Expand Down
78 changes: 27 additions & 51 deletions ...n/webapp/templates/freemarker/visualization/coauthorship/coAuthorshipSparklineContent.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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}) {
Expand Down
76 changes: 26 additions & 50 deletions ...c/main/webapp/templates/freemarker/visualization/copi/coInvestigationSparklineContent.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}) {
Expand Down
76 changes: 25 additions & 51 deletions .../src/main/webapp/templates/freemarker/visualization/grant/personGrantSparklineContent.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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().grants_capitalized}');
data.addRows(${sparklineVO.yearToEntityCountDataTable?size});
var knownYearGrantCounts = 0;
<#list sparklineVO.yearToEntityCountDataTable as yearToGrantCountDataElement>
data.setValue(${yearToGrantCountDataElement.yearToEntityCounter}, 0, '${yearToGrantCountDataElement.year}');
data.setValue(${yearToGrantCountDataElement.yearToEntityCounter}, 0, ${yearToGrantCountDataElement.year});
data.setFormattedValue(${yearToGrantCountDataElement.yearToEntityCounter}, 0, '${yearToGrantCountDataElement.year}');
data.setValue(${yearToGrantCountDataElement.yearToEntityCounter}, 1, ${yearToGrantCountDataElement.currentEntitiesCount});
knownYearGrantCounts += ${yearToGrantCountDataElement.currentEntitiesCount};
</#list>
<#-- Create a view of the data containing only the column pertaining to grant count. -->
var sparklineDataView = new google.visualization.DataView(data);
sparklineDataView.setColumns([1]);
<#if sparklineVO.shortVisMode>
Expand All @@ -70,7 +70,6 @@
</#if>
/*
This means that all the publications have unknown years & we do not need to display
the sparkline.
Expand All @@ -81,59 +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, {
<#-- 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));
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();
}
);
}
}
var totalGrantCount = knownYearGrantCounts + unknownYearGrantCounts;
Expand Down
Loading

0 comments on commit 7badf5f

Please sign in to comment.