my.Sleepbot.com Add rating to pattern graph

graph.js.patch

--- their.js	2013-12-04 01:11:12.592533200 +0100
+++ mine.js	2013-12-04 01:11:30.869533200 +0100
@@ -405,6 +405,7 @@
 	graph_RangePatternDate: function(css_id,times){
 		"use strict";
 		var values=[];
+		var ratings=[];
 		var end,start;
 		if(times.length>0){
 			end=times[0]['e']*1000;
@@ -418,33 +419,36 @@
 				values.push([new Date(i).toString(),0,0,0,0]);
 			}
 		}
-		var eDate,sDate,sH,eH,a;
+		var eDate,sDate,sH,eH,a,dateIndex,rating;
 		for(var i2 in times){
 			eDate=new Date(times[i2]['e']*1000);
 			sDate=new Date(times[i2]['s']*1000);
 			eH=eDate.getHours()+eDate.getMinutes()/60;
+			dateIndex = eDate.getFullYear()+"-"+(eDate.getMonth()<9? "0"+ (eDate.getMonth() +1) : eDate.getMonth()+1) + "-"+(eDate.getDate()<10? "0"+eDate.getDate(): eDate.getDate())
+			rating = stats.dates[dateIndex].rating;
 			sH=sDate.getHours()+sDate.getMinutes()/60;
 			if(sDate.getDate()!=eDate.getDate()){
 				//Not the same day, we push today's and then go back.
-				a=[eDate.toString(),0,eH,0,eH];
+				a=[eDate.toString(),0,eH,0,eH,rating];
 				values.push(a);
 				while(sDate<(eDate.getTime()-86400000)){
 					eDate=new Date(eDate.getTime()-86400000);
-					a=[eDate.toString(),0,23,0,23];
+					a=[eDate.toString(),0,23,0,23,rating];
 					values.push(a);
 				}
-				a=[sDate.toString(),sH,23,sH,23];
+				a=[sDate.toString(),sH,23,sH,23,rating];
 			}else{
-				a=[eDate.toString(),sH,eH,sH,eH];
+				a=[eDate.toString(),sH,eH,sH,eH,rating];
 			}
 			values.push(a);
+			ratings.push([eDate.toString(),rating]);
 			//console.log(a);
 		}
-		$.jqplot(css_id, [values], {
+		$.jqplot(css_id, [values, ratings], {
 			title:'Sleeping Range Pattern',
 			series: [{renderer:$.jqplot.OHLCRenderer,
-				rendererOptions:{ candleStick:true }
-			}],
+				rendererOptions:{ candleStick:true, wickColor: "red" }
+			},{renderer: $.jqplot.LineRenderer}],
 			axesDefaults: {
 				pad:0
 			},
@@ -471,8 +475,8 @@
 				show: true,
 				showMarker:false,
 				tooltipAxes: 'xy',
-				yvalues: 4,
-				formatString:'<table class="jqplot-highlighter"><tr><td>date:</td><td>%s</td></tr><tr><td>sleep:</td><td>%s</td></tr><tr style="display:none"><td>%s%s</td></tr><tr><td>awake:</td><td>%s</td></tr></table>'
+				yvalues: 5,
+				formatString:'<table class="jqplot-highlighter"><tr><td>date:</td><td>%s</td></tr><tr><td>sleep:</td><td>%s</td></tr><tr style="display:none"><td>%s%s</td></tr><tr><td>awake:</td><td>%s</td></tr><tr><td>rating:</td><td>%s</td></tr></table>'
 			}
 		});
 	},

graph_RangePatternDate.js

	graph_RangePatternDate: function(css_id,times){
		"use strict";
		var values=[];
		var ratings=[];
		var end,start;
		if(times.length>0){
			end=times[0]['e']*1000;
			start=times[times.length-1]['e']*1000;
		}else{
			end=new Date().getTime();
			var day=24*3600000;
			start=end-30*day;
			start+=day;
			for(var i=end;i>start;i-=day){
				values.push([new Date(i).toString(),0,0,0,0]);
			}
		}
		var eDate,sDate,sH,eH,a,dateIndex,rating;
		for(var i2 in times){
			eDate=new Date(times[i2]['e']*1000);
			sDate=new Date(times[i2]['s']*1000);
			eH=eDate.getHours()+eDate.getMinutes()/60;
			dateIndex = eDate.getFullYear()+"-"+(eDate.getMonth()<9? "0"+ (eDate.getMonth() +1) : eDate.getMonth()+1) + "-"+(eDate.getDate()<10? "0"+eDate.getDate(): eDate.getDate())
			rating = stats.dates[dateIndex].rating;
			sH=sDate.getHours()+sDate.getMinutes()/60;
			if(sDate.getDate()!=eDate.getDate()){
				//Not the same day, we push today's and then go back.
				a=[eDate.toString(),0,eH,0,eH,rating];
				values.push(a);
				while(sDate<(eDate.getTime()-86400000)){
					eDate=new Date(eDate.getTime()-86400000);
					a=[eDate.toString(),0,23,0,23,rating];
					values.push(a);
				}
				a=[sDate.toString(),sH,23,sH,23,rating];
			}else{
				a=[eDate.toString(),sH,eH,sH,eH,rating];
			}
			values.push(a);
			ratings.push([eDate.toString(),rating]);
			//console.log(a);
		}
		$.jqplot(css_id, [values, ratings], {
			title:'Sleeping Range Pattern',
			series: [{renderer:$.jqplot.OHLCRenderer,
				rendererOptions:{ candleStick:true, wickColor: "red" }
			},{renderer: $.jqplot.LineRenderer}],
			axesDefaults: {
				pad:0
			},
			axes:{
				xaxis:{
					renderer:$.jqplot.DateAxisRenderer,
					tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
					label: "Dates",
					min:start,
					max:end,
					tickOptions: {
						formatString:'%b&nbsp;%#d'
					}
				},
				yaxis:{
					min:0,
					max:24,
					tickOptions:{
						formatString:'%d:00'
					}
				},
			},
			highlighter: {
				show: true,
				showMarker:false,
				tooltipAxes: 'xy',
				yvalues: 5,
				formatString:'<table class="jqplot-highlighter"><tr><td>date:</td><td>%s</td></tr><tr><td>sleep:</td><td>%s</td></tr><tr style="display:none"><td>%s%s</td></tr><tr><td>awake:</td><td>%s</td></tr><tr><td>rating:</td><td>%s</td></tr></table>'
			}
		});
	},