Te voy a enseñar como graficar en vivo una interfaz en particular de tu RouterOS. El ejemplo que arme en esta ocasión con las fabulosas, increíbles gráficas highcharts.com. (tal como lo pidio Cesar Maffini).
Si te interesa podes continuar leyendo una actualizacion de este post con bastantes mejoras: Graficar Interfaces y Queues con Highcharts version mejorada
Actualización: un fiel lector de nombre Alejandro Mogollon nos armo un video tutorial para demostrar que es muy muy facil la puesta en marcha.
El codigo tiene 3 archivos:
1) api_mt_include2.php: API RouterOS.
2) data.php: Conecta a RouterOS, trae TX, RX y los imprime en formato JSON.
3) index.html: Utiliza Ajax para llamar data.php cada 1 segundo y graficar puntos en tiempo real usando highcharts.
El codigo esta muy muy facil. Vamos a resumirlo:
index.html
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: Highcharts.svg,
type: 'spline',
events: {
load: function () {
setInterval(function () {
requestDatta(document.getElementById("interface").value);
}, 1000);
}
}
},
Sin duda esta es la parte mas importante del codigo En la linea donde comienza el setInterval lo que hace es llamar a la funcion requestDatta() y pasarle como parametro el nombre de la interfaz de red de nuestro Mikrotik que queremos graficar en tiempo real, cada 1 segundo. Esto funciona con cualquier interfaz. Bridge, Vlan, pppoe, Wlan, etc. En este caso, el parametro con el nombre de la interfaz que le vamos a pasar a la funcion requestDatta lo asigne a un campo de texto editable para hacerlo un poco mas interesante.
function requestDatta(interface) {
$.ajax({
url: 'data.php?interface='+interface,
datatype: "json",
success: function(data) {
var midata = JSON.parse(data);
if( midata.length > 0 ) {
var TX=parseInt(midata[0].data);
var RX=parseInt(midata[1].data);
var x = (new Date()).getTime();
shift=chart.series[0].data.length > 19;
chart.series[0].addPoint([x, TX], true, shift);
chart.series[1].addPoint([x, RX], true, shift);
document.getElementById("trafico").innerHTML=TX + " / " + RX;
}else{
document.getElementById("trafico").innerHTML="- / -";
}
}
Aqui, como explicábamos mas arriba, tenemos la función que se conecta al RouterOS y nos trae el dato de TX / RX de la interfaz que nosotros le pidamos.
Los datos que traemos de data.php estan en formato JSON, por lo tanto los tenemos que parsear para poner cada dato en una variable y luego graficar el punto en el Highchart. Si se fijan, es muy importante convertir el valor que viene en JSON a numero «parseINT».
La linea, shift=chart.series[0].data.length > 19; la usamos para que, cada vez que agregamos un punto nuevo, guardemos un indice con la cantidad de puntos, que le va a decir al chart cuando comenzar a pisar los valores antiguos de la serie.
Aqui pego las lineas con comentario:
var TX=parseInt(midata[0].data); // UPLOAD var RX=parseInt(midata[1].data); // DOWNLOAD var x = (new Date()).getTime(); // tooltip cuando hacemos hover en el punto shift=chart.series[0].data.length > 19; // indice de cantidad de puntos chart.series[0].addPoint([x, TX], true, shift); // agrego TX en SERIE 0 chart.series[1].addPoint([x, RX], true, shift); // agrego RX en SERIE 1
Podemos agregar la cantidad de series que queramos; solo que mas abajo tenemos que definirlas asi:
series: [{
name: 'TX',
data: []
}, {
name: 'RX',
data: []
}]
Con esto de arriba, tendriamos serie0 y serie1 (siempre contamos de arriba hacia abajo).
Presten atencion que «data» esta vacio, ya que nosotros le agregamos los puntos en tiempo de ejecución.
Si se nos ocurre graficar un tercer valor a la par de TX y RX lo haríamos definiendo otra serie, de esta manera:
series: [{
name: ‘TX’,
data: []
}, {
name: ‘RX’,
data: []
}, {
name: ‘RX’,
data: []
}]
Aca tendriamos, serie0, serie1 y serie2.
Espero que se entienda.
data.php
Este archivo como dijimos mas arriba es el que se conecta al routerOS y hace su trabajito. Editen las primeras lineas con los datos de su servidor Mikrotik.
Usaremos el comando /interfaces/monitor-traffic
Este nos pide el nombre de la interfaz, que ya la traemos desde el otro archivo.
$API->write("/interface/monitor-traffic",false);
$API->write("=interface=".$interface,false);
$API->write("=once=",true);
Esto ya lo hemos explicado en los posts anteriores, así que solo quiero detallar que la ultima linea dice =once= para que el trafic monitor, ejecute el comando 1 vez y pare. Si no ponemos este comando, se queda trabado, trayendo y trayendo el trafico en tiempo real, pero de manera infinita, con esto nos aseguramos que lo haga 1 vez.
Espero que les guste tanto como a mi. Investiguen un poco las graficas lindas que tiene higcharts porque son fantasticas y por supuesto si tienen modificaciones, mejoras, etc no duden en pasar un mail que las posteamos!!
Estoy pensando en usar github para control de versiones 😀
Descargar el codigo fuente completo
Se escribió primero en Tech-nico.com por Nicolas Daistch
