-
Notifications
You must be signed in to change notification settings - Fork 1
/
VBMonthYearReport.cshtml
119 lines (105 loc) · 3.89 KB
/
VBMonthYearReport.cshtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
@{
ViewBag.Title = "Venue Booking Report Based on Month and Year";
Layout = "~/Views/Shared/_Dashboard.cshtml";
}
@section head{
<style>
table {
border-collapse: separate;
border-spacing: 10px;
}
table th, table td {
padding: 5px;
}
</style>
}
<h2>@ViewBag.Title</h2>
<hr />
<p>
<table>
<tr>
<td colspan="2">@Html.Label("timeRange", "Filter by Month and Year")</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>@Html.Label("year", "Year")</td>
<td>@Html.DropDownList("year", (SelectList)ViewBag.YearList, new { @class = "form-control btn btn-secondary" })</td>
<td>@Html.Label("month", "Month")</td>
<td>@Html.DropDownList("month", (SelectList)ViewBag.MonthList, new { @class = "form-control btn btn-secondary" })</td>
<td><button class="btn btn-primary" id="showReport">Filter</button></td>
<td>
<span id="loader" style="display:none;">
<img src="~/Images/loader.gif">
Loading...
</span>
</td>
<td><i class="fa fa-search fa-2x"></i></td>
</tr>
</table>
</p>
<div id="chart" style="width: 1000px; height: 500px"></div>
@section foot {
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(init);
let dt, opt, cht;
function init() {
dt = new google.visualization.DataTable();
// TODO: Data table columns
dt.addColumn('string', 'Venue');
dt.addColumn('number', 'Number of bookings made');
let style = { bold: true, italic: false, fontSize: 20, color: 'black' };
opt = {
title: 'Venue Booking Report based on month & year',
fontName: 'Calibri',
fontSize: 16,
titleTextStyle: { fontSize: 20 },
chartArea: { width: '85%', height: '70%', top: 60, left: 80 },
legend: 'none',
hAxis: { title: 'Venue', titleTextStyle: style, maxTextLines: 1 },
vAxis: { title: 'Number of bookings made', titleTextStyle: style, format: '#' },
animation: { duration: 500, startup: true },
colors: ['#3D6EC9'],
crosshair: {
trigger: 'focus',
color: 'lightblue',
opacity: 0.5,
orientation: 'both'
}
};
cht = new google.visualization.LineChart($('#chart')[0]);
}
$('#showReport').click(e => {
e.preventDefault();
// TODO: Set param
let url = '/Admin/DataSet2';
let param = { year: $('#year').val(), month: $('#month').val() };
// TODO: Show loader
$('#loader').show();
$.getJSON(url, param, json => {
// TODO: Append year
opt.title = 'Venue Booking Report By Day - ' + param.year + ', ' + $('#month option:selected').text();;
dt.removeRows(0, dt.getNumberOfRows());
dt.addRows(json);
// TODO: Format day (column 0) --> tooltip
new google.visualization.DateFormat({
pattern: 'dd MMMM yyyy'
}).format(dt, 0);
if (dt.getNumberOfRows() > 0) {
cht.draw(dt, opt);
} else {
alert("No Records Founded.");
cht.clearChart();
}
// TODO: Hide loader
$('#loader').hide();
});
});
</script>
}