134 lines
4.8 KiB
HTML
Executable File
134 lines
4.8 KiB
HTML
Executable File
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<meta name="googlebot" content="noindex, nofollow">
|
|
|
|
<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
|
|
|
|
<title></title>
|
|
|
|
<script type='text/javascript'>//<![CDATA[
|
|
|
|
function get_graph(host, container, values) {
|
|
var chart = Highcharts.chart(container, {
|
|
chart: {
|
|
type: 'spline',
|
|
zoomType: 'x',
|
|
animation: Highcharts.svg,
|
|
},
|
|
title: {
|
|
text: 'ping ' + host
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
dateTimeLabelFormats: { // don't display the dummy year
|
|
month: '%e. %b',
|
|
year: '%b'
|
|
},
|
|
title: {
|
|
text: 'Date'
|
|
},
|
|
},
|
|
|
|
yAxis: {
|
|
title: {
|
|
text: null
|
|
}
|
|
},
|
|
|
|
tooltip: {
|
|
crosshairs: true,
|
|
shared: true,
|
|
valueSuffix: ' ms'
|
|
},
|
|
|
|
legend: {
|
|
},
|
|
|
|
series: [{
|
|
name: 'Average RTT',
|
|
//data: data['values'],
|
|
data: [],
|
|
zIndex: 1,
|
|
marker: {
|
|
fillColor: 'white',
|
|
lineWidth: 1,
|
|
lineColor: Highcharts.getOptions().colors[0]
|
|
}
|
|
}, {
|
|
name: 'RTT Range',
|
|
//data: data['ranges'],
|
|
data: [],
|
|
type: 'arearange',
|
|
lineWidth: 0,
|
|
linkedTo: ':previous',
|
|
color: Highcharts.getOptions().colors[1],
|
|
fillOpacity: 0.2,
|
|
zIndex: 0
|
|
}]
|
|
});
|
|
|
|
graph(chart, host, values);
|
|
|
|
return chart;
|
|
}
|
|
|
|
function graph(chart, host, values) {
|
|
$.get("/api/values/" + values + "/" + host, function(data) {
|
|
chart.series[0].setData(data['values']);
|
|
chart.series[1].setData(data['ranges']);
|
|
chart.redraw();
|
|
|
|
setTimeout(update, 60000, chart, host, values);
|
|
});
|
|
}
|
|
|
|
function update(chart, host, values) {
|
|
last = chart.series[0].points[chart.series[0].points.length - 1].x;
|
|
last = last / 1000;
|
|
|
|
//console.log(chart.series[0].points.length);
|
|
|
|
$.get("/api/update/"+ last + "/" + host, function(data) {
|
|
shift = false;
|
|
if (chart.series[0].points.length == values) {
|
|
shift = true;
|
|
}
|
|
for (i = 0; i < data['values'].length; i++) {
|
|
chart.series[0].addPoint(data['values'][i], false, shift);
|
|
chart.series[1].addPoint(data['ranges'][i], false, shift);
|
|
}
|
|
chart.redraw();
|
|
setTimeout(update, 60000, chart, host);
|
|
});
|
|
}
|
|
|
|
$(function () {
|
|
var c1 = get_graph('DeadBSD.org', 'container1', 100);
|
|
var c2 = get_graph('nausea.DeadBSD.org', 'container2', 100);
|
|
var c3 = get_graph('helvete.DeadBSD.org', 'container3', 100);
|
|
var c4 = get_graph('gamito.DeadBSD.org', 'container4', 100);
|
|
var c5 = get_graph('www.nos.pt', 'container5', 100);
|
|
var c5 = get_graph('192.168.5.1', 'container6', 100);
|
|
});
|
|
//]]>
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
|
<script src="https://code.highcharts.com/highcharts-more.js"></script>
|
|
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
|
|
|
<div id="container1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
|
<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
|
<div id="container3" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
|
<div id="container4" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
|
<div id="container5" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
|
<div id="container6" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
|
</body>
|
|
</html>
|