--- a/js/script.js~
+++ b/js/script.js~
@@ -1,1 +1,136 @@
+$(function() {
 
+	// Set the default dates
+	var startDate	= Date.create().addDays(-6),	// 7 days ago
+		endDate		= Date.create(); 				// today
+
+	var range = $('#range');
+
+	// Show the dates in the range input
+	range.val(startDate.format('{MM}/{dd}/{yyyy}') + ' - ' + endDate.format('{MM}/{dd}/{yyyy}'));
+
+	// Load chart
+	ajaxLoadChart(startDate,endDate);
+	
+	range.daterangepicker({
+		
+		startDate: startDate,
+		endDate: endDate,
+		
+		ranges: {
+            'Today': ['today', 'today'],
+            'Yesterday': ['yesterday', 'yesterday'],
+            'Last 7 Days': [Date.create().addDays(-6), 'today'],
+            'Last 30 Days': [Date.create().addDays(-29), 'today']
+        }
+	},function(start, end){
+		
+		ajaxLoadChart(start, end);
+		
+	});
+	
+	// The tooltip shown over the chart
+	var tt = $('<div class="ex-tooltip">').appendTo('body'),
+		topOffset = -32;
+
+	var data = {
+		"xScale" : "time",
+		"yScale" : "linear",
+		"main" : [{
+			className : ".stats",
+			"data" : []
+		}]
+	};
+
+	var opts = {
+		paddingLeft : 50,
+		paddingTop : 20,
+		paddingRight : 10,
+		axisPaddingLeft : 25,
+		tickHintX: 9, // How many ticks to show horizontally
+
+		dataFormatX : function(x) {
+			
+			// This turns converts the timestamps coming from
+			// ajax.php into a proper JavaScript Date object
+			
+			return Date.create(x);
+		},
+
+		tickFormatX : function(x) {
+			
+			// Provide formatting for the x-axis tick labels.
+			// This uses sugar's format method of the date object. 
+
+			return x.format('{MM}/{dd}');
+		},
+		
+		"mouseover": function (d, i) {
+			var pos = $(this).offset();
+			
+			tt.text(d.x.format('{Month} {ord}') + ': ' + d.y).css({
+				
+				top: topOffset + pos.top,
+				left: pos.left
+				
+			}).show();
+		},
+		
+		"mouseout": function (x) {
+			tt.hide();
+		}
+	};
+
+	// Create a new xChart instance, passing the type
+	// of chart a data set and the options object
+	
+	var chart = new xChart('line-dotted', data, '#chart' , opts);
+	
+	// Function for loading data via AJAX and showing it on the chart
+	function ajaxLoadChart(startDate,endDate) {
+
+		// If no data is passed (the chart was cleared)
+		
+		if(!startDate || !endDate){
+			chart.setData({
+				"xScale" : "time",
+				"yScale" : "linear",
+				"main" : [{
+					className : ".stats",
+					data : []
+				}]
+			});
+			
+			return;
+		}
+
+		// Otherwise, issue an AJAX request
+
+		$.getJSON('ajax.php', {
+			
+			start:	startDate.format('{yyyy}-{MM}-{dd}'),
+			end:	endDate.format('{yyyy}-{MM}-{dd}')
+			
+		}, function(data) {
+			
+			var set = [];
+			$.each(data, function() {
+				set.push({
+					x : this.label,
+					y : parseInt(this.value, 10)
+				});
+			});
+			
+			chart.setData({
+				"xScale" : "time",
+				"yScale" : "linear",
+				"main" : [{
+					className : ".stats",
+					data : set
+				}]
+			});
+
+		});
+	}
+});
+