/static/js/jquery.flot.init.js

 1$(function(){
 2	$.getJSON('/admin/stats/'+days, function(data){
 3		// helper for returning the weekends in a period
 4		function weekendAreas(axes) {
 5			var markings = [];
 6			var d = new Date(axes.xaxis.min);
 7			// go to the first Saturday
 8			d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
 9			d.setUTCSeconds(0);
10			d.setUTCMinutes(0);
11			d.setUTCHours(0);
12			var i = d.getTime();
13			do {
14				// when we don't set yaxis the rectangle automatically
15				// extends to infinity upwards and downwards
16				markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
17				i += 7 * 24 * 60 * 60 * 1000;
18			} while (i < axes.xaxis.max);
19
20			return markings;
21		}
22
23		var d = [];
24		var s = [];
25		$.each(data.visits, function(i,item){
26			d.push([item[0],item[1]]);
27		});
28		$.each(data.signups, function(i,item){
29			s.push([item[0],item[1]]);
30		});
31
32		for (var i = 0; i < d.length; ++i)
33			d[i][0] += 60 * 60 * 1000;
34
35		for (var i = 0; i < s.length; ++i)
36			s[i][0] += 60 * 60 * 1000;				
37
38		var plot = $.plot($("#placeholder"),
39			[ { data: d, label: "Visitations"} , { data: s, label: "Signups" } ],
40			{ lines: { show: true, fill: true },
41			points: { show: true },
42			grid: { hoverable: true, clickable: false, markings: weekendAreas },
43			yaxis: { min: 0, tickDecimals: 0 },
44			xaxis: { mode: 'time' }
45		});
46
47		function showTooltip(x, y, contents) {
48			$('<div id="tooltip">' + contents + '</div>').css( {
49				position: 'absolute',
50				display: 'none',
51				top: y + 5,
52				left: x + 5,
53				border: '1px solid #fdd',
54				padding: '2px',
55				'background-color': '#fee',
56				opacity: 0.80
57			}).appendTo("body").fadeIn(200);
58		}
59		var previousPoint = null;
60		$("#placeholder").bind("plothover", function (event, pos, item) {
61		$("#x").text(pos.x.toFixed(2));
62		$("#y").text(pos.y.toFixed(2));
63
64		if (item) {
65				if (previousPoint != item.datapoint) {
66					previousPoint = item.datapoint;
67					$("#tooltip").remove();
68					var x = item.datapoint[0],
69					y = item.datapoint[1];
70					showTooltip(item.pageX, item.pageY,
71					y + " " + item.series.label);
72				}
73			} else {
74				$("#tooltip").remove();
75				previousPoint = null;
76			}
77		});		
78	});
79});