source: django-apps/running/templates/user_index.html@ 292

Last change on this file since 292 was 291, checked in by Rick van der Zwet, 14 years ago

Project import and intial application 'running' import, which combines django with protovis.
  • Property svn:mime-type set to text/html
File size: 5.4 KB
RevLine 
[291]1{% load static %}
2{% get_static_prefix as STATIC_PREFIX %}
3
4<html>
5 <head>
6 <script type="text/javascript" src="{{ STATIC_PREFIX }}protovis-r3.2.js"></script>
7 <style type="text/css">
8 #fig2 {
9 width: 860px;
10 height: 150px;
11 }
12 #fig {
13 width: 860px;
14 height: 390px;
15 }
16 </style>
17
18 </head>
19 <body>
20 <a href="{% url running.views.index %}">User Overview</a><p />
21 <h1>Welcome {{ user }}</h1>
22 <div id="center">
23 <h3>Week averages</h3>
24 <div id="fig2">
25 <div id="week-statistics"> </div>
26 </div>
27 <h3>Accumulated Totals</h3>
28 <div id="fig">
29 <div style="text-align:right;padding-right:20;">
30 <input checked id="scale" type="checkbox" onchange="vis.render()"
31 ><label for="scale">Scale to fit</label>
32 </div>
33 <div id="total-statistics"> </div>
34 </div>
35 </div>
36 Beheer al je gegevens <a href="{% url admin:running_user_change user.id %}">hier</a>.
37
38<script type="text/javascript+protovis">
39
40// Get the required data
41var xhr = new XMLHttpRequest();
42xhr.open('GET', '{% url running.views.json_user_column user.id %}', false);
43xhr.send(null);
44var myData = JSON.parse(xhr.responseText, function (key, value) {
45 return value;
46});
47
48Array.prototype.max = function () {
49 return Math.max.apply(Math, this);
50 };
51
52data = myData.data;
53itemCount = data.length;
54var w = 1000,
55 h = 100,
56 x = pv.Scale.ordinal(pv.range(itemCount)).splitBanded(0, w, 4/5),
57 y = pv.Scale.linear(0, myData.data.max()).range(0, h);
58
59var vis = new pv.Panel().canvas('week-statistics')
60 .width(w)
61 .height(h)
62 .bottom(20)
63 .left(20)
64 .right(5)
65 .top(5);
66
67var bar = vis.add(pv.Bar)
68 .data(data)
69 .left(function() x(this.index))
70 .width(x.range().band)
71 .bottom(0)
72 .height(y);
73
74bar.anchor("top").add(pv.Label)
75 .textStyle("white")
76 .text(function(d) d.toFixed(1));
77
78bar.anchor("bottom").add(pv.Label)
79 .textMargin(5)
80 .textBaseline("top")
81 .text(function() myData.label[this.index]);
82
83vis.add(pv.Rule)
84 .data(y.ticks())
85 .bottom(function(d) Math.round(y(d)) - .5)
86 .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")
87 .add(pv.Rule)
88 .left(0)
89 .width(5)
90 .strokeStyle("#000")
91 .anchor("left").add(pv.Label)
92
93vis.render();
94
95</script>
96
97
98<script type="text/javascript+protovis">
99// Get the required data
100var xhr = new XMLHttpRequest();
101xhr.open('GET', '{% url running.views.json_user_total user.id %}', false);
102xhr.send(null);
103
104var data = JSON.parse(xhr.responseText, function (key, value) {
105 var type;
106 if ( value != null) {
107 if ( key === 'x') {
108 return new Date(value);
109 }
110 }
111 return value;
112});
113
114var start = data[0].x;
115var end = data[data.length - 1].x;
116
117/* Scales and sizing. */
118var w = 810,
119 h1 = 300,
120 h2 = 30,
121 x = pv.Scale.linear(start, end).range(0, w),
122 y = pv.Scale.linear(0, pv.max(data, function(d) d.y)).range(0, h2);
123
124/* Interaction state. Focus scales will have domain set on-render. */
125var i = {x:200, dx:100},
126 fx = pv.Scale.linear().range(0, w),
127 fy = pv.Scale.linear().range(0, h1);
128
129/* Root panel. */
130var vis = new pv.Panel().canvas('total-statistics')
131 .width(w)
132 .height(h1 + 20 + h2)
133 .bottom(20)
134 .left(30)
135 .right(20)
136 .top(5);
137
138/* Focus panel (zoomed in). */
139var focus = vis.add(pv.Panel)
140 .def("init", function() {
141 var d1 = x.invert(i.x),
142 d2 = x.invert(i.x + i.dx),
143 dd = data.slice(
144 Math.max(0, pv.search.index(data, d1, function(d) d.x) - 1),
145 pv.search.index(data, d2, function(d) d.x) + 1);
146 fx.domain(d1, d2);
147 fy.domain(scale.checked ? [0, pv.max(dd, function(d) d.y)] : y.domain());
148 return dd;
149 })
150 .top(0)
151 .height(h1);
152
153/* X-axis ticks. */
154focus.add(pv.Rule)
155 .data(function() fx.ticks())
156 .left(fx)
157 .strokeStyle("#eee")
158 .anchor("bottom").add(pv.Label)
159 .text(fx.tickFormat);
160
161/* Y-axis ticks. */
162focus.add(pv.Rule)
163 .data(function() fy.ticks(7))
164 .bottom(fy)
165 .strokeStyle(function(d) d ? "#aaa" : "#000")
166 .anchor("left").add(pv.Label)
167 .text(fy.tickFormat);
168
169/* Focus area chart. */
170focus.add(pv.Panel)
171 .overflow("hidden")
172 .add(pv.Area)
173 .data(function() focus.init())
174 .left(function(d) fx(d.x))
175 .bottom(1)
176 .height(function(d) fy(d.y))
177 .fillStyle("lightsteelblue")
178 .anchor("top").add(pv.Line)
179 .fillStyle(null)
180 .strokeStyle("steelblue")
181 .lineWidth(2);
182
183/* Context panel (zoomed out). */
184var context = vis.add(pv.Panel)
185 .bottom(0)
186 .height(h2);
187
188/* X-axis ticks. */
189context.add(pv.Rule)
190 .data(x.ticks())
191 .left(x)
192 .strokeStyle("#eee")
193 .anchor("bottom").add(pv.Label)
194 .text(x.tickFormat);
195
196/* Y-axis ticks. */
197context.add(pv.Rule)
198 .bottom(0);
199
200/* Context area chart. */
201context.add(pv.Area)
202 .data(data)
203 .left(function(d) x(d.x))
204 .bottom(1)
205 .height(function(d) y(d.y))
206 .fillStyle("lightsteelblue")
207 .anchor("top").add(pv.Line)
208 .strokeStyle("steelblue")
209 .lineWidth(2);
210
211/* The selectable, draggable focus region. */
212context.add(pv.Panel)
213 .data([i])
214 .cursor("crosshair")
215 .events("all")
216 .event("mousedown", pv.Behavior.select())
217 .event("select", focus)
218 .add(pv.Bar)
219 .left(function(d) d.x)
220 .width(function(d) d.dx)
221 .fillStyle("rgba(255, 128, 128, .4)")
222 .cursor("move")
223 .event("mousedown", pv.Behavior.drag())
224 .event("drag", focus);
225
226 vis.render();
227
228 </script>
229 </body>
230</html>
Note: See TracBrowser for help on using the repository browser.