-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (115 loc) · 4.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="./nnvis.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">NatureNet Data</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li id="li_ideas" class="active"><a href="#">Design Ideas</a></li>
<li id="li_observations"><a href="#">Observations</a></li>
<li id="li_users"><a href="#">Users</a></li>
<li id="li_comments"><a href="#">Comments</a></li>
<li id="li_likes"><a href="#">Likes</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="chart_container text-center"></div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./nnvis.js"></script>
<script type="text/javascript">
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ real page loads from here ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
$(document).ready(function() {
var pageLoads = function() {
// UI
var $chart_container = $(".chart_container");
var $li_ideas = $("#li_ideas");
var $li_observations = $("#li_observations");
var $li_users = $("#li_users");
var $li_comments = $("#li_comments");
var $li_likes = $("#li_likes");
var $ul_bar = $(".nav.navbar-nav");
// reset UI
var resetUI = function($this) {
$this.addClass("active");
var $other = $(".nav.navbar-nav li");
$other.not($this).removeClass("active");
$chart_container.empty();
}
var loadIdeaChart = function(e) {
resetUI($(this));
$chart_container.nnchart({
url: "http://naturenet.herokuapp.com/api/stats/designideas",
type: "DesignIdea"
});
};
var loadObservationChart = function(e) {
resetUI($(this));
$chart_container.nnchart({
url: "http://naturenet.herokuapp.com/api/stats/observations",
type: "FieldNote"
});
};
var loadUsersChart = function(e) {
resetUI($(this));
$chart_container.nnchart({
url: "http://naturenet.herokuapp.com/api/stats/users",
type: "Users"
});
};
var loadCommentsChart = function(e) {
resetUI($(this));
$chart_container.nnchart({
url: "http://naturenet.herokuapp.com/api/stats/comments",
type: "Comments"
});
};
var loadLikesChart = function(e) {
resetUI($(this));
$chart_container.nnchart({
url: "http://naturenet.herokuapp.com/api/stats/likes",
type: "Likes"
});
};
// register click event to each li
$li_ideas.on("click", loadIdeaChart);
$li_observations.on("click", loadObservationChart);
$li_comments.on("click", loadCommentsChart);
$li_users.on("click", loadUsersChart);
$li_likes.on("click", loadLikesChart);
// by default, chart loads data from design ideas
var $chart_container = $(".chart_container");
$chart_container.nnchart({
url: "http://naturenet.herokuapp.com/api/stats/designideas",
type: "DesignIdea"
});
};
pageLoads();
// $("#linechart").nnlinechart();
});
</script>
</body>
</html>