Index: django_apps/running/static/week-total.js
===================================================================
--- django_apps/running/static/week-total.js	(revision 298)
+++ django_apps/running/static/week-total.js	(revision 298)
@@ -0,0 +1,48 @@
+function weekTotalGraph(myData, binder) {
+  Array.prototype.max = function () {
+      return Math.max.apply(Math, this);
+      };
+  
+  data = myData.data;
+  itemCount = data.length;
+  var  w = 1000,
+      h = 100,
+      x = pv.Scale.ordinal(pv.range(itemCount)).splitBanded(0, w, 4/5),
+      y = pv.Scale.linear(0, myData.data.max()).range(0, h);
+  
+  var vis = new pv.Panel().canvas(binder)
+      .width(w)
+      .height(h)
+      .bottom(20)
+      .left(20)
+      .right(5)
+      .top(5);
+  
+  var bar = vis.add(pv.Bar)
+      .data(data)
+      .left(function() x(this.index))
+      .width(x.range().band)
+      .bottom(0)
+      .height(y);
+  
+  bar.anchor("top").add(pv.Label)
+      .textStyle("white")
+      .text(function(d) d.toFixed(1));
+  
+  bar.anchor("bottom").add(pv.Label)
+      .textMargin(5)
+      .textBaseline("top")
+      .text(function() myData.label[this.index]);
+  
+  vis.add(pv.Rule)
+      .data(y.ticks())
+      .bottom(function(d) Math.round(y(d)) - .5)
+      .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")
+      .add(pv.Rule)
+      .left(0)
+      .width(5)
+      .strokeStyle("#000")
+      .anchor("left").add(pv.Label)
+  
+  vis.render();
+}
Index: django_apps/running/static/year-total.js
===================================================================
--- django_apps/running/static/year-total.js	(revision 298)
+++ django_apps/running/static/year-total.js	(revision 298)
@@ -0,0 +1,115 @@
+function yearTotalGraph(data, binder) {
+  var start = data[0].x;
+  var end = data[data.length - 1].x;
+  
+  /* Scales and sizing. */
+  var w = 810,
+      h1 = 300,
+      h2 = 30,
+      x = pv.Scale.linear(start, end).range(0, w),
+      y = pv.Scale.linear(0, pv.max(data, function(d) d.y)).range(0, h2);
+  
+  /* Interaction state. Focus scales will have domain set on-render. */
+  var i = {x:200, dx:100},
+      fx = pv.Scale.linear().range(0, w),
+      fy = pv.Scale.linear().range(0, h1);
+  
+  /* Root panel. */
+  var vis = new pv.Panel().canvas(binder)
+      .width(w)
+      .height(h1 + 20 + h2)
+      .bottom(20)
+      .left(30)
+      .right(20)
+      .top(5);
+  
+  /* Focus panel (zoomed in). */
+  var focus = vis.add(pv.Panel)
+      .def("init", function() {
+          var d1 = x.invert(i.x),
+              d2 = x.invert(i.x + i.dx),
+              dd = data.slice(
+                  Math.max(0, pv.search.index(data, d1, function(d) d.x) - 1),
+                  pv.search.index(data, d2, function(d) d.x) + 1);
+          fx.domain(d1, d2);
+          fy.domain(scale.checked ? [0, pv.max(dd, function(d) d.y)] : y.domain());
+          return dd;
+        })
+      .top(0)
+      .height(h1);
+  
+  /* X-axis ticks. */
+  focus.add(pv.Rule)
+      .data(function() fx.ticks())
+      .left(fx)
+      .strokeStyle("#eee")
+    .anchor("bottom").add(pv.Label)
+      .text(fx.tickFormat);
+  
+  /* Y-axis ticks. */
+  focus.add(pv.Rule)
+      .data(function() fy.ticks(7))
+      .bottom(fy)
+      .strokeStyle(function(d) d ? "#aaa" : "#000")
+    .anchor("left").add(pv.Label)
+      .text(fy.tickFormat);
+  
+  /* Focus area chart. */
+  focus.add(pv.Panel)
+      .overflow("hidden")
+    .add(pv.Area)
+      .data(function() focus.init())
+      .left(function(d) fx(d.x))
+      .bottom(1)
+      .height(function(d) fy(d.y))
+      .fillStyle("lightsteelblue")
+    .anchor("top").add(pv.Line)
+      .fillStyle(null)
+      .strokeStyle("steelblue")
+      .lineWidth(2);
+  
+  /* Context panel (zoomed out). */
+  var context = vis.add(pv.Panel)
+      .bottom(0)
+      .height(h2);
+  
+  /* X-axis ticks. */
+  context.add(pv.Rule)
+      .data(x.ticks())
+      .left(x)
+      .strokeStyle("#eee")
+    .anchor("bottom").add(pv.Label)
+      .text(x.tickFormat);
+  
+  /* Y-axis ticks. */
+  context.add(pv.Rule)
+      .bottom(0);
+  
+  /* Context area chart. */
+  context.add(pv.Area)
+      .data(data)
+      .left(function(d) x(d.x))
+      .bottom(1)
+      .height(function(d) y(d.y))
+      .fillStyle("lightsteelblue")
+    .anchor("top").add(pv.Line)
+      .strokeStyle("steelblue")
+      .lineWidth(2);
+  
+  /* The selectable, draggable focus region. */
+  context.add(pv.Panel)
+      .data([i])
+      .cursor("crosshair")
+      .events("all")
+      .event("mousedown", pv.Behavior.select())
+      .event("select", focus)
+    .add(pv.Bar)
+      .left(function(d) d.x)
+      .width(function(d) d.dx)
+      .fillStyle("rgba(255, 128, 128, .4)")
+      .cursor("move")
+      .event("mousedown", pv.Behavior.drag())
+      .event("drag", focus);
+  
+   vis.render();
+}
