1) api_mt_include2.php : RouterOS API. 2) data.php : Connects to RouterOS, brings TX, RX and prints them in JSON format. 3) index.html : Use Ajax to call data.php every 1 second and plot points in real time using highcharts.
This is certainly the most important part of the code. In the line where the setInterval starts, what it does is to call the function requestDatta () and pass it as parameter the name of the network interface of our Mikrotik that we want to graph in real time, each 1 second. This works with any interface. Bridge, Vlan, pppoe, Wlan, etc. In this case, the parameter with the name of the interface that we are going to pass to the requestDatta function assigns it to an editable text field to make it a little more interesting.
Here, as explained above, we have the function that connects to the RouterOS and brings us the TX / RX data of the interface that we ask. The data we bring from data.php is in JSON format, so we have to parse it to put each data in a variable and then plot the point in the Highchart. If they are fixed, it is very important to convert the value that comes in JSON to number "parseINT".
The line, shift = chart.series  .data.length> 19; We use it so that, every time we add a new point, keep an index with the number of points, which will tell the chart when you start treading the old values of the series.
Here I hit the lines with comment:
varTX=parseInt(midata.data); // UPLOAD
varRX=parseInt(midata.data); // DOWNLOAD
varx = (newDate()).getTime(); // tooltip cuando hacemos hover en el punto
shift=chart.series.data.length > 19; // indice de cantidad de puntos
chart.series.addPoint([x, TX], true, shift); // agrego TX en SERIE 0
chart.series.addPoint([x, RX], true, shift); // agrego RX en SERIE 1
We can add as many series as we want; Only that below we have to define them like this:
With this from above, we would have serie0 and serie1 (we always count from top to bottom). Note that "data" is empty, as we add points at runtime. If we think of graphing a third value alongside TX and RX we would define another series, like this:
Here we would have, serie0, serie1 and serie2. I hope you understand.
Data.php This file as mentioned above is the one that connects to the routerOS and does its work. Edit the first lines with the data of your Mikrotik server.
We will use the command / interfaces / monitor-traffic This asks us for the name of the interface , which we already bring from the other file.
This has already been explained in the previous posts, so I just want to detail that the last line says = once = for the trafic monitor, run the command 1 time and stop. If we do not put this command, it gets stuck, bringing and bringing the traffic in real time, but infinitely, with this we make sure we do it 1 time.
I hope they like it as much as I do. Investigate a little the nice graphics that has higcharts because they are fantastic and of course if they have modifications, improvements, etc. do not hesitate to pass an email that we post them !!