|
|
Maxious
|
1 |
$(function() { |
|
|
|
2 |
|
|
|
|
3 |
// Set the default dates |
|
|
|
4 |
var startDate = Date.create().addDays(-6), // 7 days ago |
|
|
|
5 |
endDate = Date.create(); // today |
|
|
|
6 |
|
|
|
|
7 |
var range = $('#range'); |
|
|
|
8 |
|
|
|
|
9 |
// Show the dates in the range input |
|
|
|
10 |
range.val(startDate.format('{MM}/{dd}/{yyyy}') + ' - ' + endDate.format('{MM}/{dd}/{yyyy}')); |
|
|
|
11 |
|
|
|
|
12 |
// Load chart |
|
|
|
13 |
ajaxLoadChart(startDate,endDate); |
|
|
|
14 |
|
|
|
|
15 |
range.daterangepicker({ |
|
|
|
16 |
|
|
|
|
17 |
startDate: startDate, |
|
|
|
18 |
endDate: endDate, |
|
|
|
19 |
|
|
|
|
20 |
ranges: { |
|
|
|
21 |
'Today': ['today', 'today'], |
|
|
|
22 |
'Yesterday': ['yesterday', 'yesterday'], |
|
|
|
23 |
'Last 7 Days': [Date.create().addDays(-6), 'today'], |
|
|
|
24 |
'Last 30 Days': [Date.create().addDays(-29), 'today'] |
|
|
|
25 |
} |
|
|
|
26 |
},function(start, end){ |
|
|
|
27 |
|
|
|
|
28 |
ajaxLoadChart(start, end); |
|
|
|
29 |
|
|
|
|
30 |
}); |
|
|
|
31 |
|
|
|
|
32 |
// The tooltip shown over the chart |
|
|
|
33 |
var tt = $('<div class="ex-tooltip">').appendTo('body'), |
|
|
|
34 |
topOffset = -32; |
|
|
|
35 |
|
|
|
|
36 |
var data = { |
|
|
|
37 |
"xScale" : "time", |
|
|
|
38 |
"yScale" : "linear", |
|
|
|
39 |
"main" : [{ |
|
|
|
40 |
className : ".stats", |
|
|
|
41 |
"data" : [] |
|
|
|
42 |
}] |
|
|
|
43 |
}; |
|
|
|
44 |
|
|
|
|
45 |
var opts = { |
|
|
|
46 |
paddingLeft : 50, |
|
|
|
47 |
paddingTop : 20, |
|
|
|
48 |
paddingRight : 10, |
|
|
|
49 |
axisPaddingLeft : 25, |
|
|
|
50 |
tickHintX: 9, // How many ticks to show horizontally |
|
|
|
51 |
|
|
|
|
52 |
dataFormatX : function(x) { |
|
|
|
53 |
|
|
|
|
54 |
// This turns converts the timestamps coming from |
|
|
|
55 |
// ajax.php into a proper JavaScript Date object |
|
|
|
56 |
|
|
|
|
57 |
return Date.create(x); |
|
|
|
58 |
}, |
|
|
|
59 |
|
|
|
|
60 |
tickFormatX : function(x) { |
|
|
|
61 |
|
|
|
|
62 |
// Provide formatting for the x-axis tick labels. |
|
|
|
63 |
// This uses sugar's format method of the date object. |
|
|
|
64 |
|
|
|
|
65 |
return x.format('{MM}/{dd}'); |
|
|
|
66 |
}, |
|
|
|
67 |
|
|
|
|
68 |
"mouseover": function (d, i) { |
|
|
|
69 |
var pos = $(this).offset(); |
|
|
|
70 |
|
|
|
|
71 |
tt.text(d.x.format('{Month} {ord}') + ': ' + d.y).css({ |
|
|
|
72 |
|
|
|
|
73 |
top: topOffset + pos.top, |
|
|
|
74 |
left: pos.left |
|
|
|
75 |
|
|
|
|
76 |
}).show(); |
|
|
|
77 |
}, |
|
|
|
78 |
|
|
|
|
79 |
"mouseout": function (x) { |
|
|
|
80 |
tt.hide(); |
|
|
|
81 |
} |
|
|
|
82 |
}; |
|
|
|
83 |
|
|
|
|
84 |
// Create a new xChart instance, passing the type |
|
|
|
85 |
// of chart a data set and the options object |
|
|
|
86 |
|
|
|
|
87 |
var chart = new xChart('line-dotted', data, '#chart' , opts); |
|
|
|
88 |
|
|
|
|
89 |
// Function for loading data via AJAX and showing it on the chart |
|
|
|
90 |
function ajaxLoadChart(startDate,endDate) { |
|
|
|
91 |
|
|
|
|
92 |
// If no data is passed (the chart was cleared) |
|
|
|
93 |
|
|
|
|
94 |
if(!startDate || !endDate){ |
|
|
|
95 |
chart.setData({ |
|
|
|
96 |
"xScale" : "time", |
|
|
|
97 |
"yScale" : "linear", |
|
|
|
98 |
"main" : [{ |
|
|
|
99 |
className : ".stats", |
|
|
|
100 |
data : [] |
|
|
|
101 |
}] |
|
|
|
102 |
}); |
|
|
|
103 |
|
|
|
|
104 |
return; |
|
|
|
105 |
} |
|
|
|
106 |
|
|
|
|
107 |
// Otherwise, issue an AJAX request |
|
|
|
108 |
|
|
|
|
109 |
$.getJSON('ajax.php', { |
|
|
|
110 |
|
|
|
|
111 |
start: startDate.format('{yyyy}-{MM}-{dd}'), |
|
|
|
112 |
end: endDate.format('{yyyy}-{MM}-{dd}') |
|
|
|
113 |
|
|
|
|
114 |
}, function(data) { |
|
|
|
115 |
|
|
|
|
116 |
var set = []; |
|
|
|
117 |
$.each(data, function() { |
|
|
|
118 |
set.push({ |
|
|
|
119 |
x : this.label, |
|
|
|
120 |
y : parseInt(this.value, 10) |
|
|
|
121 |
}); |
|
|
|
122 |
}); |
|
|
|
123 |
|
|
|
|
124 |
chart.setData({ |
|
|
|
125 |
"xScale" : "time", |
|
|
|
126 |
"yScale" : "linear", |
|
|
|
127 |
"main" : [{ |
|
|
|
128 |
className : ".stats", |
|
|
|
129 |
data : set |
|
|
|
130 |
}] |
|
|
|
131 |
}); |
|
|
|
132 |
|
|
|
|
133 |
}); |
|
|
|
134 |
} |
|
|
|
135 |
}); |
|
|
|
136 |
|