1. Making temporal graph vis template for grants to be similar to the publications version.

This commit is contained in:
cdtank 2011-01-14 22:34:03 +00:00
parent 60dfa67110
commit 72a5e9414e
2 changed files with 36 additions and 61 deletions

View file

@ -16,67 +16,42 @@
<#assign temporalGraphSmallIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'>
<#assign TemporalGraphDownloadFile = '${urls.base}${dataVisualizationURLRoot}?vis=entity_grant_count&uri=${organizationURI}&labelField=label'>
<#-- Javascript files -->
<#assign flot = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/jquery.flot.js'>
<#assign excanvas = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/excanvas.js'>
<#assign flot = 'js/visualization/entitycomparison/jquery_plugins/flot/jquery.flot.js'>
<#assign fliptext = 'js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'>
<#assign jqueryNotify = 'js/jquery_plugins/jquery.notify.min.js'>
<#assign jqueryUI = 'js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'>
<#assign datatable = 'js/jquery_plugins/jquery.dataTables.min.js'>
<#assign entityComparisonUtils = 'js/visualization/entitycomparison/util.js'>
<#assign entityComparisonConstants = 'js/visualization/entitycomparison/constants.js'>
<!--[if IE]><script type="text/javascript" src="${excanvas}"></script><![endif]-->
<#assign fliptext = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'>
<#assign jqueryNotify = '${urls.base}/js/jquery_plugins/jquery.notify.min.js'>
<#assign jqueryUI = '${urls.base}/js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'>
<#assign datatable = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/datatable/jquery.dataTables.js'>
<#assign autoellipsis = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/jquery.AutoEllipsis.js'>
<#assign entityComparisonUtils = '${urls.base}/js/visualization/entitycomparison/util.js'>
<#assign entityComparisonConstants = '${urls.base}/js/visualization/entitycomparison/constants.js'>
<script type="text/javascript" src="${flot}"></script>
<script type="text/javascript" src="${fliptext}"></script>
<!--
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
-->
<script type="text/javascript" src="${jqueryUI}"></script>
<script type="text/javascript" src="${datatable}"></script>
<script type="text/javascript" src="${autoellipsis}"></script>
<script type="text/javascript" src="${entityComparisonUtils}"></script>
<script type="text/javascript" src="${entityComparisonConstants}"></script>
<script type="text/javascript" src="${jqueryNotify}"></script>
${scripts.add(flot)}
${scripts.add(fliptext)}
${scripts.add(jqueryUI)}
${scripts.add(datatable)}
${scripts.add(entityComparisonUtils)}
${scripts.add(entityComparisonConstants)}
${scripts.add(jqueryNotify)}
<#-- CSS files -->
<#assign demoTable = "${urls.base}/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" />
<#assign jqueryUIStyle = "${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" />
<#assign jqueryNotifyStyle = "${urls.base}/css/jquery_plugins/ui.notify.css" />
<#assign entityComparisonStyle = "${urls.base}/css/visualization/entitycomparison/layout.css" />
<#assign demoTable = "js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" />
<#assign jqueryUIStyle = "js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" />
<#assign jqueryNotifyStyle = "css/jquery_plugins/ui.notify.css" />
<#assign entityComparisonStyle = "css/visualization/entitycomparison/layout.css" />
<#assign entityComparisonStyleIEHack = "${urls.base}/css/visualization/entitycomparison/layout-ie.css" />
<#assign vizStyle = "css/visualization/visualization.css" />
<#assign vizStyle = "${urls.base}/css/visualization/visualization.css" />
<link href="${jqueryUIStyle}" rel="stylesheet" type="text/css" />
<link href="${demoTable}" rel="stylesheet" type="text/css" />
<link href="${entityComparisonStyle}" rel="stylesheet" type="text/css" />
<link href="${vizStyle}" rel="stylesheet" type="text/css" />
<link href="${jqueryNotifyStyle}" rel="stylesheet" type="text/css" />
${stylesheets.add(jqueryUIStyle)}
${stylesheets.add(demoTable)}
${stylesheets.add(entityComparisonStyle)}
${stylesheets.add(vizStyle)}
${stylesheets.add(jqueryNotifyStyle)}
<!--[if IE]><link href="${entityComparisonStyleIEHack}" rel="stylesheet" type="text/css" /><![endif]-->
@ -90,15 +65,15 @@ var subOrganizationVivoProfileURL = "${subOrganizationVivoProfileURL}";
var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}";
var jsonString = '${jsonContent}';
var organizationLabel = '${organizationLabel}';
</script>
<script type="text/javascript">
$(document).ready(function() {
var jsonString = '${jsonContent}';
var organizationLabel = '${organizationLabel}';
/* This is used to cache the current state whether the user is allowed to select more entities from
the datatable or not. Once Max number of entity selection is reached the user can no longer select
more & this variable will be set to false. */
@ -237,12 +212,12 @@ var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}"
if ($(this).next().is(':disabled')) {
createNotification("error-notification", {
createNotification("warning-notification", {
title: 'Error',
text: 'A Maximum 10 entities can be compared. Please remove some & try again.'
}, {
custom: true,
expires: 3500
expires: false
});
}
@ -328,8 +303,9 @@ var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}"
<p style="text-align:center"><a class="ui-notify-close" href="#">Close Me</a></p>
</div>
<div id="warning-notification">
<div id="warning-notification" class="ui-state-highlight ui-corner-all" >
<a class="ui-notify-close ui-notify-cross" href="#">x</a>
<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
<h1>&#035;{title}</h1>
<p>&#035;{text}</p>
</div>
@ -349,7 +325,7 @@ var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}"
<div id="rightblock">
<h4 id="headerText">Comparing <span id="comparisonHeader">Grants</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h4>
<h3 id="headerText">Comparing <span id="comparisonHeader">Grants</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h3>
<div id="temporal-graph">
<div id="yaxislabel"></div>
@ -357,8 +333,8 @@ var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}"
<div id="xaxislabel">Year</div>
</div>
<div id="bottom" style="width: 450px; height: 350px;">
<h4><span id="comparisonParameter"></span></h4>
<div id="bottom">
<h3><span id="comparisonParameter"></span></h3>
<p class="displayCounter">You have selected <span id="counter">0</span> of a maximum
<span id="total">10</span> <span id="entityleveltext"> schools</span> to compare.
<a id="clear" class="temporalGraphLinks">Clear</a></p>

View file

@ -125,7 +125,6 @@ var organizationLabel = '${organizationLabel}';
var checkbox = $(this);
var checkboxValue = $(this).attr("value");
var linkedCheckbox = labelToCheckedEntities[checkboxValue];
//console.log('checkbox value is '+ checkboxValue);
var entityToBeRemoved = labelToEntityRecord[checkboxValue];
if(!checkbox.is(':checked')){