--- 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 = $('
').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
+ }]
+ });
+
+ });
+ }
+});
+