ua1zbe
/
aprsc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement simple graph zooming

This commit is contained in:
Heikki Hannikainen 2013-06-25 18:48:56 +03:00
parent a950c8ab4e
commit 48c7992ae5
2 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/web/aprsc.js
View File

@ -1,6 +1,7 @@
<!--
var options = {};
var range_selected;
function top_status(c, s)
{
@ -875,6 +876,9 @@ function update_status()
});
}
var graph_opt;
var graph_data;
function graph_fill(cdata, opts)
{
var vals = cdata['values'];
@ -887,7 +891,7 @@ function graph_fill(cdata, opts)
for (var i = 0; i < vl; i++)
vals[i][0] = vals[i][0] * 1000;
var _d = [ { label: opts['label'], data: vals } ];
graph_data = [ { label: opts['label'], data: vals } ];
var _x_opt = {
mode: 'time'
@ -897,17 +901,36 @@ function graph_fill(cdata, opts)
min: 0
};
var _o = {
graph_opt = {
grid: { hoverable: true, autoHighlight: false, minBorderMargin: 20 },
legend: { position: 'nw' },
colors: [ '#0000ff' ],
xaxis: _x_opt,
yaxis: _y_opt
yaxis: _y_opt,
selection: { mode: "x" }
};
$.plot($('#graph'), _d, _o);
$.plot($('#graph'), graph_data, graph_opt);
}
function graphZoom(zoom_in)
{
console.log("graphZoom");
if (range_selected && zoom_in) {
graph_opt.xaxis.min = range_selected.from;
graph_opt.xaxis.max = range_selected.to;
} else {
graph_opt.xaxis.min = null;
graph_opt.xaxis.max = null;
}
//_o.series.points.show = (range && (range.to - range.from < 50));
$.plot($('#graph'), graph_data, graph_opt);
}
var graphs = {
'totals.clients': { 'label': 'Clients allocated' },
'totals.connects': { 'label': 'Incoming connections/min' },
@ -1038,6 +1061,20 @@ function init()
update_status();
gr_switch('totals.tcp_bytes_rx');
$('#graph').bind('plotselected', function(event,ranges) {
console.log("plotselected");
var to = parseInt(ranges.xaxis.to.toFixed(0));
var from = parseInt(ranges.xaxis.from.toFixed(0));
range_selected = {
'from': from,
'to': to
};
});
$('#graph').bind('plotunselected', function(event,ranges) {
console.log("plotunselected");
range_selected = undefined;
});
}
//-->

7
src/web/index.html
View File

@ -21,7 +21,11 @@
<div id='server'></div>
<h3>Totals</h3>
<div style='float: right; clear: right; height: 230px; width: 600px;' id='graph'></div>
<div style='float: right; clear: right;'>
<div style='height: 230px; width: 600px;' id='graph'></div>
<button onclick='graphZoom(1)'>Zoom</button>
<button onclick='graphZoom(0)'>Zoom out</button>
</div>
<div id='totals'></div>
<h3>Duplicate filter
@ -59,6 +63,7 @@
<script type='text/JavaScript' src='http://code.jquery.com/jquery-1.8.1.min.js'></script>
<!--[if lte IE 8]><script type='text/JavaScript' src='excanvas.min.js'></script><![endif]-->
<script type='text/JavaScript' src='jquery.flot.min.js'></script>
<script type='text/JavaScript' src='jquery.flot.selection.min.js'></script>
<script type='text/JavaScript' src='aprsc.js'></script>
<script type='text/JavaScript'>$(document).ready(function(){init();});;</script>