Added some example stuff without testing

telemetry/reporting/static/app.css

@@ -0,0 +1,50 @@
+.graph-container {
+  box-sizing: border-box;
+  height: 200px;
+  background: #fff;
+  background: linear-gradient(#f6f6f6 0%, #ffffff 50px);
+  background: -o-linear-gradient(#f6f6f6 0, white 50px);
+  background: -ms-linear-gradient(#f6f6f6 0, white 50px);
+  background: -moz-linear-gradient(#f6f6f6 0, white 50px);
+  background: -webkit-linear-gradient(#f6f6f6 0, white 50px);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
+  -o-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  -ms-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+}
+
+.graph-placeholder {
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  line-height: 1.2em;
+}
+
+.demo-container {
+  position: relative;
+  padding-left: 0.9375em;
+  padding-right: 0.9375em;
+  width: 50%;
+  float: left;
+  box-sizing: border-box;
+  height: 200px;
+  background: #fff;
+  background: linear-gradient(#f6f6f6 0%, #ffffff 50px);
+  background: -o-linear-gradient(#f6f6f6 0, white 50px);
+  background: -ms-linear-gradient(#f6f6f6 0, white 50px);
+  background: -moz-linear-gradient(#f6f6f6 0, white 50px);
+  background: -webkit-linear-gradient(#f6f6f6 0, white 50px);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
+  -o-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  -ms-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+}
+
+.demo-placeholder {
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  line-height: 1.2em;
+}

telemetry/reporting/static/javascripts/django-telemetry.js

@@ -0,0 +1,38 @@
+sum  = function(list, end) {
+    // This only works with an ordered list of lists
+    for(var s=0,i=end+1;i;s+=list[--i][1]);
+    return s;
+}
+
+function Graph(el, data, options){
+    var context = this;
+    this.data = data;
+    this.el = el;
+    this.options = options || {};
+    this.flotobject = '';
+    this.plot = function(){
+        this.flotobject = $.plot(this.el, this.data, this.options)
+    };
+
+    this.zoomgraph = function(event, ranges){
+        context.zoomflotobject = $.plot(context.options['zoomtarget'], context.data, $.extend(true, {}, context.options, { xaxis:{min: ranges.xaxis.from,max:ranges.xaxis.to}}));
+        context.flotobject.setSelection(ranges, true);
+        context.flotobject.clearSelection();
+
+
+    };
+
+    $(this.el).bind("plotselected", this.zoomgraph);
+};
+
+// Example Usage:
+//    var options = { xaxis: { mode: "time", tickLength: 5 }, legend: {position: 'nw',}, grid: { hoverable: true}, tooltip: true, tooltipOpts: { content: "%y %s on %x", xDateFormat: "%b %e", }, series: { lines: { show: true },  }, selection: { mode: "x" }, zoomtarget:"#detailGraph" };
+//    window.graphs = {
+//        userPlot: new Graph("#userGraph",
+//           [{data: user_by_day, label:"New Users"}, {data: rolling_user, label:"New Users (weekly rolling average)"}],
+//           options),
+//    }
+//
+//    for (var index in window.graphs) {
+//        window.graphs[index].plot()
+//    };