NIHVIVO-1495: Integrated initial prototype of visual graph using Raphael library in page-home.ftl
This commit is contained in:
mb863
parent
120837ab08
commit
bc583cdb86
4 changed files with 3859 additions and 1 deletions
|
|
@ -501,14 +501,23 @@ ul#classgroup-list .count-individuals {
|
||||||
float: right;
|
float: right;
|
||||||
width: 270px;
|
width: 270px;
|
||||||
height: 270px;
|
height: 270px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
#visual-graph h4 {
|
#visual-graph h4 {
|
||||||
padding: 20px 0 12px 12px;
|
padding: 20px 0 12px 12px;
|
||||||
|
width: auto;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #2485ae;
|
color: #2485ae;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
background: url(../images/bullet-visual-graph.png) 120px 25px no-repeat;
|
background: url(../images/bullet-visual-graph.png) 120px 25px no-repeat;
|
||||||
}
|
}
|
||||||
|
#pieViz {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -85px;
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
/* HIGHLIGHTS ------> */
|
/* HIGHLIGHTS ------> */
|
||||||
#highlights {
|
#highlights {
|
||||||
clear: both;
|
clear: both;
|
||||||
|
|
|
||||||
85
themes/wilma/js/jquery_plugins/raphael/pie.js
vendored
Normal file
85
themes/wilma/js/jquery_plugins/raphael/pie.js
vendored
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke) {
|
||||||
|
|
||||||
|
|
||||||
|
var paper = this,
|
||||||
|
rad = Math.PI / 180,
|
||||||
|
chart = this.set();
|
||||||
|
|
||||||
|
|
||||||
|
function sector(cx, cy, r, startAngle, endAngle, params) {
|
||||||
|
var x1 = cx + r * Math.cos(-startAngle * rad),
|
||||||
|
x2 = cx + r * Math.cos(-endAngle * rad),
|
||||||
|
y1 = cy + r * Math.sin(-startAngle * rad),
|
||||||
|
y2 = cy + r * Math.sin(-endAngle * rad);
|
||||||
|
return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var angle = 0,
|
||||||
|
total = 0,
|
||||||
|
start = 100,
|
||||||
|
brightNess = 100;
|
||||||
|
process = function (j) {
|
||||||
|
var value = values[j],
|
||||||
|
angleplus = 360 * value / total,
|
||||||
|
popangle = angle + (angleplus / 2),
|
||||||
|
color = "hsb(194, " + start + ", "+ brightNess +")",
|
||||||
|
ms = 500,
|
||||||
|
delta = 30,
|
||||||
|
//bcolor = "hsb(210, " + start + ", 100)",
|
||||||
|
|
||||||
|
|
||||||
|
p = sector(cx, cy, r, angle, angle + angleplus, {
|
||||||
|
gradient: "45-" + color + "-" + color
|
||||||
|
, stroke: stroke, "stroke-width": 1}),
|
||||||
|
|
||||||
|
txt = paper.text
|
||||||
|
(cx + (r + delta + 15) * Math.cos(-popangle * rad),
|
||||||
|
cy + (r + delta + 5) * Math.sin(-popangle * rad),
|
||||||
|
labels[j]).attr({fill: "#424444", stroke: "none",
|
||||||
|
opacity: 0, "font-family": 'Fontin-Sans, Arial', "font-size": "10px"});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
p.mouseover(function () {
|
||||||
|
p.animate({scale: [1.2, 1.2, cx, cy]}, ms, "elastic");
|
||||||
|
txt.animate({opacity: 1}, ms, "elastic");
|
||||||
|
}).mouseout(function () {
|
||||||
|
p.animate({scale: [1, 1, cx, cy]}, ms, "elastic");
|
||||||
|
txt.animate({opacity: 0}, ms);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
angle += angleplus;
|
||||||
|
chart.push(p);
|
||||||
|
chart.push(txt);
|
||||||
|
brightNess -= 7;
|
||||||
|
start -= 5;
|
||||||
|
};
|
||||||
|
|
||||||
|
for (var i = 0, ii = values.length; i < ii; i++) {
|
||||||
|
total += values[i];
|
||||||
|
|
||||||
|
}
|
||||||
|
for (var i = 0; i < ii; i++) {
|
||||||
|
process(i);
|
||||||
|
}
|
||||||
|
return chart;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
(function (raphael) {
|
||||||
|
$(function () {
|
||||||
|
var values = [],
|
||||||
|
labels = [];
|
||||||
|
$("tr").each(function () {
|
||||||
|
values.push(parseInt($("td", this).text(), 10));
|
||||||
|
labels.push($("th", this).text());
|
||||||
|
});
|
||||||
|
$("table").hide();
|
||||||
|
raphael("pieViz", 400, 400).pieChart(200, 200, 100, values, labels, "#fff");
|
||||||
|
});
|
||||||
|
})(Raphael.ninja());
|
||||||
3725
themes/wilma/js/jquery_plugins/raphael/raphael.js
vendored
Normal file
3725
themes/wilma/js/jquery_plugins/raphael/raphael.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -6,6 +6,8 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<#include "head.ftl">
|
<#include "head.ftl">
|
||||||
|
<script type="text/javascript" src="${themeDir}/js/jquery_plugins/raphael/raphael.js"></script>
|
||||||
|
<script type="text/javascript" src="${themeDir}/js/jquery_plugins/raphael/pie.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -73,7 +75,44 @@
|
||||||
|
|
||||||
<section id="visual-graph" role="region">
|
<section id="visual-graph" role="region">
|
||||||
<h4>Visual Graph</h4>
|
<h4>Visual Graph</h4>
|
||||||
<img src="${urls.theme}/images/visual-graph.jpg" alt=""/>
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Faculty Member</th>
|
||||||
|
<td>19%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Graduate Student</th>
|
||||||
|
<td>10%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Librarian</th>
|
||||||
|
<td>2%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Non-Academic</th>
|
||||||
|
<td>3%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Non-Faculty Academic</th>
|
||||||
|
<td>9%</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<th>Postdoc</th>
|
||||||
|
<td>4%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Professor Emeritus</th>
|
||||||
|
<td>2%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Undergraduate Student</th>
|
||||||
|
<td>51%</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<section id="pieViz" role="region"></section>
|
||||||
</section>
|
</section>
|
||||||
</section> <!-- #browse-classes -->
|
</section> <!-- #browse-classes -->
|
||||||
</section> <!-- #browse -->
|
</section> <!-- #browse -->
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue