001.$(document).ready(function () {
002. var init_date = moment($('#datepicker').find("input").val(), "YYYY-MM");
003.
004. $(".display-month").html(thai_date(init_date));
005. $(".ajax-loading").css("display", "none");
006.
007. detail_statistic(init_date);
008. chart_statistic(init_date, "website");
009.
010. $('#chart a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
011. var selected_date = moment($('#datepicker').find("input").val(), "YYYY-MM")
012. $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
013.
014. switch ($(e.target).attr("href")) {
015. default:
016. chart_statistic(selected_date, "website");
017. break;
018. case "#webapp":
019. chart_statistic(selected_date, "webapp");
020. break;
021. case "#mobileapp":
022. chart_statistic(selected_date, "mobileapp");
023. break;
024. }
025. });
026.
027. $('#datepicker').datetimepicker({
028. viewMode: 'months',
029. format: 'YYYY-MM'
030. }).on("dp.change", function (e) {
031. $('.display-month').html(thai_date(e.date));
032. detail_statistic(e.date);
033.
034. switch ($("ul.nav-tabs li.active a").attr("href")) {
035. default:
036. chart_statistic(e.date, "website");
037. break;
038. case "#webapp":
039. chart_statistic(e.date, "webapp");
040. break;
041. case "#mobileapp":
042. chart_statistic(e.date, "mobileapp");
043. break;
044. }
045. });
046.});
047.
048.function chart_statistic(date, tab) {
049. $.ajax({
050. dataType: 'json',
051. url: '/ajax/statistic_chart',
052. type: 'get',
053. cache: false,
054. data: {
055. 'date': date.format("YYYY-M-D"),
056. 'web': tab
057. },
058. beforeSend: function () {
059. $(".ajax-loading").css("display", "block");
060. },
061. success: function (data) {
062. $(".ajax-loading").css("display", "none");
063.
064. var dataset_visitor = [{ label: " " + ((tab == "webapp") ? "เจ้าหน้าที่" : "ผู้เข้าชม"), data: data.visitors, color: "#337ab7" }];
065. var options_visitor = options_line_chart();
066.
067. $.plot($("#visitor-" + tab + "-flot-line-chart"), dataset_visitor, options_visitor);
068. $("<div class='axisLabel xaxisLabel'></div>").text("วันที่").appendTo($("#visitor-" + tab + "-flot-line-chart"));
069. $("<div class='axisLabel yaxisLabel'></div>").text((tab != "website") ? "จำนวนการเข้าในงานระบบ (ครั้ง)" : "จำนวนการเข้าชม (ครั้ง)").appendTo($("#visitor-" + tab + "-flot-line-chart"))
070. .css("margin-top", $("<div class='axisLabel yaxisLabel'></div>").width() / 2 - 20);
071.
072. if (tab != 'mobileapp') {
073. var dataset_platform = [{ label: " ระบบปฏิบัติการ", data: data.platforms[0], color: "#3c763d" }];
074. var optiond_platform = options_bar_chart(data.platforms[1], data.platforms[0].length);
075.
076. $.plot($("#platform-" + tab + "-flot-bar-chart"), dataset_platform, optiond_platform);
077. $("<div class='axisLabel yaxisLabel'></div>").text((tab == "webapp") ? "จำนวนการเข้าในงานระบบ (ครั้ง)" : "จำนวนการเข้าชม (ครั้ง)").appendTo($("#platform-" + tab + "-flot-bar-chart"))
078. .css("margin-top", $("<div class='axisLabel yaxisLabel'></div>").width() / 2 - 20);
079.
080. var dataset_browser = [{ label: " เบราเซอร์", data: data.browsers[0], color: "#dd4b39" }];
081. var optiond_browser = options_bar_chart(data.browsers[1], data.browsers[0].length);
082.
083. $.plot($("#browser-" + tab + "-flot-bar-chart"), dataset_browser, optiond_browser);
084. $("<div class='axisLabel yaxisLabel'></div>").text((tab == "webapp") ? "จำนวนการเข้าในงานระบบ (ครั้ง)" : "จำนวนการเข้าชม (ครั้ง)").appendTo($("#browser-" + tab + "-flot-bar-chart"))
085. .css("margin-top", $("<div class='axisLabel yaxisLabel'></div>").width() / 2 - 20);
086. }
087. }
088. });
089.}
090.
091.function options_line_chart() {
092. var options = {
093. series: {
094. lines: {
095. show: true,
096. fill: true,
097. fillColor: {
098. colors: [
099. { opacity: 0.7 },
100. { opacity: 0.1 }
101. ]
102. }
103. },
104. points: { show: true }
105. },
106. legend: {
107. noColumns: 0,
108. position: "ne"
109. },
110. grid: {
111. hoverable: true,
112. minBorderMargin: 20,
113. labelMargin: 10,
114. margin: {
115. top: 0,
116. bottom: 20,
117. left: 20
118. }
119. },
120. xaxis: {
121. labelWidth: 30,
122. tickDecimals: 0,
123. minTickSize: 1
124. },
125. yaxis: {
126. min: 0,
127. labelWidth: 30,
128. tickDecimals: 0,
129. minTickSize: 1
130. },
131. tooltip: true,
132. tooltipOpts: {
133. content: customTooltip
134. }
135. };
136.
137. return options;
138.}
139.
140.function options_bar_chart(ticks, length) {
141. var options = {
142. series: {
143. bars: {
144. show: true,
145. fill: true,
146. fillColor: {
147. colors: [
148. { opacity: 0.2 },
149. { opacity: 0.7 }
150. ]
151. }
152. }
153. },
154. bars: {
155. align: "center",
156. barWidth: 0.5
157. },
158. legend: {
159. noColumns: 0,
160. position: "ne"
161. },
162. grid: {
163. hoverable: true,
164. minBorderMargin: 20,
165. labelMargin: 10,
166. margin: {
167. top: 0,
168. bottom: 0,
169. left: 20
170. }
171. },
172. xaxis: {
173. min: 0,
174. max: length + 1,
175. labelWidth: 30,
176. tickDecimals: 0,
177. minTickSize: 1,
178. ticks: ticks
179. },
180. yaxis: {
181. min: 0,
182. labelWidth: 30,
183. tickDecimals: 0,
184. minTickSize: 1
185. },
186. tooltip: true,
187. tooltipOpts: {
188. content: "%x: %y ครั้ง"
189. }
190. };
191.
192. return options;
193.}
194.
195.function detail_statistic(date) {
196. $('#dataTables-website').dataTable().fnDestroy();
197. $('#dataTables-website').dataTable({
198. "ajax": {
199. "url": "/ajax/statistic_detail",
200. "type": "get",
201. "data": {
202. "date": date.format("YYYY-M-D"),
203. "web": "website"
204. }
205. }
206. });
207.
208. $('#dataTables-webapp').dataTable().fnDestroy();
209. $('#dataTables-webapp').dataTable({
210. "ajax": {
211. "url": "/ajax/statistic_detail",
212. "type": "get",
213. "data": {
214. "date": date.format("YYYY-M-D"),
215. "web": "webapp"
216. }
217. }
218. });
219.
220. $('#dataTables-mobileapp').dataTable().fnDestroy();
221. $('#dataTables-mobileapp').dataTable();
222.}
223.
224.function thai_date(date) {
225. var months = { 'January': 'มกราคม', 'February': 'กุมภาพันธ์', 'March': 'มีนาคม', 'April': 'เมษายน', 'May': 'พฤษภาคม', 'June': 'มิถุนายน', 'July': 'กรกฎาคม', 'August': 'สิงหาคม', 'September': 'กันยายน', 'October': 'ตุลาคม', 'November': 'พฤศจิกายน', 'December': 'ธันวาคม' };
226. var month = months[date.format("MMMM")];
227. var year = parseInt(date.format("YYYY"), 10) + 543;
228.
229. return month + " " + year.toString();
230.}
231.
232.function customTooltip(label, x, y) {
233. return "วันที่ " + x + " จำนวน " + y + " ครั้ง";
234.}
Load balance : Server 02
