| 2809 |
rexy |
1 |
<script type="text/javascript">
|
|
|
2 |
google.charts.load('current', { packages: [ 'bar' ] });
|
|
|
3 |
google.charts.load("current", { packages: [ 'corechart' ] });
|
| 3106 |
rexy |
4 |
|
|
|
5 |
google.charts.setOnLoadCallback(drawFiveChart);
|
| 2809 |
rexy |
6 |
google.charts.setOnLoadCallback(drawHourlyChart);
|
|
|
7 |
google.charts.setOnLoadCallback(drawDailyChart);
|
|
|
8 |
google.charts.setOnLoadCallback(drawMonthlyChart);
|
|
|
9 |
|
| 3106 |
rexy |
10 |
function drawFiveChart()
|
|
|
11 |
{
|
|
|
12 |
{if $jsonVersion gt 1}
|
|
|
13 |
var data = new google.visualization.DataTable();
|
|
|
14 |
|
|
|
15 |
data.addColumn('datetime', 'Time');
|
|
|
16 |
data.addColumn('number', 'Traffic In');
|
|
|
17 |
data.addColumn('number', 'Traffic Out');
|
|
|
18 |
data.addColumn('number', 'Total Traffic');
|
|
|
19 |
|
|
|
20 |
data.addRows([
|
|
|
21 |
{foreach from=$fiveGraphData key=key item=value}
|
|
|
22 |
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
|
|
|
23 |
{/foreach}
|
|
|
24 |
]);
|
|
|
25 |
|
|
|
26 |
let endD = (new {$fiveGraphData[0]['label']}).getTime();
|
|
|
27 |
|
|
|
28 |
let options = {
|
|
|
29 |
title: 'Five minute Network Traffic',
|
|
|
30 |
orientation: 'horizontal',
|
|
|
31 |
legend: { position: 'right' },
|
|
|
32 |
explorer: {
|
|
|
33 |
axis: 'horizontal',
|
|
|
34 |
zoomDelta: 1.1,
|
|
|
35 |
maxZoomIn: 0.1,
|
|
|
36 |
maxZoomOut: 10.0
|
|
|
37 |
},
|
|
|
38 |
vAxis: {
|
|
|
39 |
format: '###.### {$fiveLargestPrefix}'
|
|
|
40 |
{if $graph_type == 'log'}
|
|
|
41 |
,scaleType: 'log',
|
|
|
42 |
baseline: {$fiveBase}
|
|
|
43 |
{/if}
|
|
|
44 |
},
|
|
|
45 |
hAxis: {
|
|
|
46 |
direction: -1,
|
|
|
47 |
format: 'd/H:mm',
|
|
|
48 |
{if $jsonVersion > 1}
|
|
|
49 |
title: 'Day/Hour:Minute (Scroll to zoom, Drag to pan)',
|
|
|
50 |
{else}
|
|
|
51 |
title: 'Day/Hour:Minute',
|
|
|
52 |
{/if}
|
|
|
53 |
viewWindow: {
|
|
|
54 |
min: 'Date('+(endD-7050000).toString()+')',
|
|
|
55 |
max: 'Date('+(endD+150000).toString()+')'
|
|
|
56 |
},
|
|
|
57 |
ticks: [
|
|
|
58 |
{foreach from=$fiveGraphData key=key item=value}
|
|
|
59 |
new {$value.label},
|
|
|
60 |
{/foreach}
|
|
|
61 |
]
|
|
|
62 |
}
|
|
|
63 |
};
|
|
|
64 |
|
|
|
65 |
var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy HH:mm' });
|
|
|
66 |
formatDate.format(data, 0);
|
|
|
67 |
|
|
|
68 |
var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$fiveLargestPrefix}' });
|
|
|
69 |
formatNumber.format(data, 1);
|
|
|
70 |
formatNumber.format(data, 2);
|
|
|
71 |
formatNumber.format(data, 3);
|
|
|
72 |
|
|
|
73 |
let chart = new google.visualization.BarChart(document.getElementById('fiveNetworkTrafficGraph'));
|
|
|
74 |
chart.draw(data, google.charts.Bar.convertOptions(options));
|
|
|
75 |
{/if}
|
|
|
76 |
}
|
|
|
77 |
|
| 2809 |
rexy |
78 |
function drawHourlyChart()
|
|
|
79 |
{
|
|
|
80 |
var data = new google.visualization.DataTable();
|
|
|
81 |
|
|
|
82 |
data.addColumn('date', 'Hour');
|
|
|
83 |
data.addColumn('number', 'Traffic In');
|
|
|
84 |
data.addColumn('number', 'Traffic Out');
|
|
|
85 |
data.addColumn('number', 'Total Traffic');
|
|
|
86 |
|
|
|
87 |
data.addRows([
|
|
|
88 |
{foreach from=$hourlyGraphData key=key item=value}
|
|
|
89 |
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
|
|
|
90 |
{/foreach}
|
|
|
91 |
]);
|
|
|
92 |
|
| 3106 |
rexy |
93 |
let endD = (new {$hourlyGraphData[0]['label']}).getTime();
|
|
|
94 |
|
| 2809 |
rexy |
95 |
let options = {
|
|
|
96 |
title: 'Hourly Network Traffic',
|
|
|
97 |
orientation: 'horizontal',
|
|
|
98 |
legend: { position: 'right' },
|
|
|
99 |
explorer: {
|
|
|
100 |
axis: 'horizontal',
|
| 3106 |
rexy |
101 |
zoomDelta: 1.1,
|
|
|
102 |
maxZoomIn: 0.1,
|
|
|
103 |
maxZoomOut: 10.0
|
| 2809 |
rexy |
104 |
},
|
|
|
105 |
vAxis: {
|
| 3106 |
rexy |
106 |
format: '###.### {$hourlyLargestPrefix}'
|
|
|
107 |
{if $graph_type == 'log'}
|
|
|
108 |
,scaleType: 'log',
|
|
|
109 |
baseline: {$hourlyBase}
|
|
|
110 |
{/if}
|
| 2809 |
rexy |
111 |
},
|
|
|
112 |
hAxis: {
|
| 3106 |
rexy |
113 |
{if $jsonVersion > 1}
|
|
|
114 |
title: 'Day/Hour (Scroll to zoom, Drag to pan)',
|
|
|
115 |
{else}
|
|
|
116 |
title: 'Day/Hour',
|
|
|
117 |
{/if}
|
|
|
118 |
format: 'd/H',
|
| 2809 |
rexy |
119 |
direction: -1,
|
| 3106 |
rexy |
120 |
viewWindow: {
|
|
|
121 |
min: 'Date('+(endD-84600000).toString()+')',
|
|
|
122 |
max: 'Date('+(endD+1800000).toString()+')'
|
|
|
123 |
},
|
| 2809 |
rexy |
124 |
ticks: [
|
|
|
125 |
{foreach from=$hourlyGraphData key=key item=value}
|
|
|
126 |
new {$value.label},
|
|
|
127 |
{/foreach}
|
|
|
128 |
]
|
|
|
129 |
}
|
|
|
130 |
};
|
|
|
131 |
|
|
|
132 |
var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy HH:mm' });
|
|
|
133 |
formatDate.format(data, 0);
|
|
|
134 |
|
|
|
135 |
var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$hourlyLargestPrefix}' });
|
|
|
136 |
formatNumber.format(data, 1);
|
|
|
137 |
formatNumber.format(data, 2);
|
|
|
138 |
formatNumber.format(data, 3);
|
|
|
139 |
|
|
|
140 |
let chart = new google.visualization.BarChart(document.getElementById('hourlyNetworkTrafficGraph'));
|
|
|
141 |
chart.draw(data, google.charts.Bar.convertOptions(options));
|
|
|
142 |
}
|
|
|
143 |
|
|
|
144 |
function drawDailyChart()
|
|
|
145 |
{
|
|
|
146 |
var data = new google.visualization.DataTable();
|
|
|
147 |
|
|
|
148 |
data.addColumn('date', 'Day');
|
|
|
149 |
data.addColumn('number', 'Traffic In');
|
|
|
150 |
data.addColumn('number', 'Traffic Out');
|
|
|
151 |
data.addColumn('number', 'Total Traffic');
|
|
|
152 |
|
|
|
153 |
data.addRows([
|
|
|
154 |
{foreach from=$dailyGraphData key=key item=value}
|
|
|
155 |
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
|
|
|
156 |
{/foreach}
|
|
|
157 |
]);
|
| 3106 |
rexy |
158 |
|
|
|
159 |
let endD = (new {$dailyGraphData[0]['label']}).getTime();
|
|
|
160 |
|
| 2809 |
rexy |
161 |
let options = {
|
|
|
162 |
title: 'Daily Network Traffic',
|
|
|
163 |
orientation: 'horizontal',
|
|
|
164 |
legend: { position: 'right' },
|
|
|
165 |
explorer: {
|
|
|
166 |
axis: 'horizontal',
|
| 3106 |
rexy |
167 |
zoomDelta: 1.1,
|
|
|
168 |
maxZoomIn: 0.1,
|
|
|
169 |
maxZoomOut: 10.0
|
| 2809 |
rexy |
170 |
},
|
|
|
171 |
vAxis: {
|
| 3106 |
rexy |
172 |
format: '###.### {$dailyLargestPrefix}'
|
|
|
173 |
{if $graph_type == 'log'}
|
|
|
174 |
,scaleType: 'log',
|
|
|
175 |
baseline: {$dailyBase}
|
|
|
176 |
{/if}
|
| 2809 |
rexy |
177 |
},
|
|
|
178 |
hAxis: {
|
| 3106 |
rexy |
179 |
{if $jsonVersion > 1}
|
|
|
180 |
title: 'Day (Scroll to zoom, Drag to pan)',
|
|
|
181 |
{else}
|
|
|
182 |
title: 'Day',
|
|
|
183 |
{/if}
|
| 2809 |
rexy |
184 |
format: 'dd/MM/YYYY',
|
| 3106 |
rexy |
185 |
viewWindow: {
|
|
|
186 |
min: 'Date('+(endD-2548800000).toString()+')',
|
|
|
187 |
max: 'Date('+(endD+43200000).toString()+')'
|
|
|
188 |
},
|
|
|
189 |
direction: -1,
|
|
|
190 |
ticks: [
|
|
|
191 |
{foreach from=$dailyGraphData key=key item=value}
|
|
|
192 |
new {$value.label},
|
|
|
193 |
{/foreach}
|
|
|
194 |
]
|
| 2809 |
rexy |
195 |
}
|
|
|
196 |
};
|
| 3106 |
rexy |
197 |
|
| 2809 |
rexy |
198 |
var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy' });
|
|
|
199 |
formatDate.format(data, 0);
|
|
|
200 |
|
|
|
201 |
var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$dailyLargestPrefix}' });
|
|
|
202 |
formatNumber.format(data, 1);
|
|
|
203 |
formatNumber.format(data, 2);
|
|
|
204 |
formatNumber.format(data, 3);
|
|
|
205 |
|
|
|
206 |
let chart = new google.visualization.BarChart(document.getElementById('dailyNetworkTrafficGraph'));
|
|
|
207 |
chart.draw(data, google.charts.Bar.convertOptions(options));
|
|
|
208 |
}
|
|
|
209 |
|
|
|
210 |
function drawMonthlyChart()
|
|
|
211 |
{
|
|
|
212 |
var data = new google.visualization.DataTable();
|
|
|
213 |
|
|
|
214 |
data.addColumn('date', 'Month');
|
|
|
215 |
data.addColumn('number', 'Traffic In');
|
|
|
216 |
data.addColumn('number', 'Traffic Out');
|
|
|
217 |
data.addColumn('number', 'Total Traffic');
|
|
|
218 |
|
|
|
219 |
data.addRows([
|
|
|
220 |
{foreach from=$monthlyGraphData key=key item=value}
|
|
|
221 |
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
|
|
|
222 |
{/foreach}
|
|
|
223 |
]);
|
|
|
224 |
|
|
|
225 |
let options = {
|
|
|
226 |
title: 'Monthly Network Traffic',
|
|
|
227 |
orientation: 'horizontal',
|
|
|
228 |
legend: { position: 'right' },
|
|
|
229 |
explorer: {
|
|
|
230 |
axis: 'horizontal',
|
| 3106 |
rexy |
231 |
zoomDelta: 1.1,
|
|
|
232 |
maxZoomIn: 0.1,
|
|
|
233 |
maxZoomOut: 10.0
|
| 2809 |
rexy |
234 |
},
|
|
|
235 |
vAxis: {
|
|
|
236 |
format: '##.## {$monthlyLargestPrefix}'
|
|
|
237 |
},
|
|
|
238 |
hAxis: {
|
|
|
239 |
title: 'Month',
|
|
|
240 |
format: 'MMMM YYYY',
|
|
|
241 |
direction: -1
|
|
|
242 |
}
|
|
|
243 |
};
|
|
|
244 |
|
|
|
245 |
var formatDate = new google.visualization.DateFormat({ pattern: 'MMMM YYYY' });
|
|
|
246 |
formatDate.format(data, 0);
|
|
|
247 |
|
|
|
248 |
var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$monthlyLargestPrefix}' });
|
|
|
249 |
formatNumber.format(data, 1);
|
|
|
250 |
formatNumber.format(data, 2);
|
|
|
251 |
formatNumber.format(data, 3);
|
|
|
252 |
|
|
|
253 |
let chart = new google.visualization.BarChart(document.getElementById('monthlyNetworkTrafficGraph'));
|
|
|
254 |
chart.draw(data, google.charts.Bar.convertOptions(options));
|
|
|
255 |
}
|
|
|
256 |
</script>
|