FlexQoS Experimental rate graphs

[dave14305]

I want to start differentiating FlexQoS from Merlin's Classification page since both are available side-by-side anyway, and so I'm starting to experiment with a new approach to the data presentation. The image below is not how it will look in the end, but this is how I've started to hack at creating graphs of the current running rate per class (borrowing Merlin's router CPU graph code from the main router page! All Jack Yaz's graphs were too complicated for me!).

I'm thinking of putting each of these graphs where the "Total", "Rate", and "Bandwidth Util" columns are now (eliminating them in the process). Each line in the graph is color-coded to its priority level, but at the time of this screenshot I had just run a speedtest that was classified green as Others. This would give a bit more context to how the various classes are interacting with each other over a minute's history (I think it's a minute).

One of the problems is that most of the time the lines will be at or near zero, same as the current Bandwidth Util bar graphs. Just throwing this out for feedback before I get too far along the wrong path. I promise no rainbows this time...

 

[Milan]

Go ahead , I am looking forward ...

 

[NGI]

This would give a bit more context to how the various classes are interacting with each other over a minute's history (I think it's a minute).

I think this is a wonderful Idea. My only slight concern is if it would be easy to identify the multi-color very thin lines. It may not be an issues but it is difficult to say unless it can be seen in action.

PS Perhaps would a stacked bar graph be an easy to implement option?

 

[Jack Yaz]

I want to start differentiating FlexQoS from Merlin's Classification page since both are available side-by-side anyway, and so I'm starting to experiment with a new approach to the data presentation. The image below is not how it will look in the end, but this is how I've started to hack at creating graphs of the current running rate per class (borrowing Merlin's router CPU graph code from the main router page! All Jack Yaz's graphs were too complicated for me!).

I'm thinking of putting each of these graphs where the "Total", "Rate", and "Bandwidth Util" columns are now (eliminating them in the process). Each line in the graph is color-coded to its priority level, but at the time of this screenshot I had just run a speedtest that was classified green as Others. This would give a bit more context to how the various classes are interacting with each other over a minute's history (I think it's a minute).

One of the problems is that most of the time the lines will be at or near zero, same as the current Bandwidth Util bar graphs. Just throwing this out for feedback before I get too far along the wrong path. I promise no rainbows this time...

View attachment 27960

to be honest you could re-use a lot of my line chart code. the key bit is getting the data into an array (dataset). in this case, you would have an array of datasets, one for each class.

happy to collaborate if you'd like

 

[dave14305]

to be honest you could re-use a lot of my line chart code. the key bit is getting the data into an array (dataset). in this case, you would have an array of datasets, one for each class.

happy to collaborate if you'd like

You’re already a busy guy. What’s your most straightforward line chart graph, ntpMerlin? I’ll study it and see if I can understand how to make it work for me. I’m getting 16 (8 up, 8 down) new data points every 3 seconds but I do like the the idea of a proper chart versus an svg polyline. Who wouldn’t?

Thanks Jack!

 

[Jack Yaz]

You’re already a busy guy. What’s your most straightforward line chart graph, ntpMerlin? I’ll study it and see if I can understand how to make it work for me. I’m getting 16 (8 up, 8 down) new data points every 3 seconds but I do like the the idea of a proper chart versus an svg polyline. Who wouldn’t?

Thanks Jack!

probably either ntpmerlin or connmon. for multi-dataset support see the end of draw_chart in spdmerlin

 

[dave14305]

probably either ntpmerlin or connmon. for multi-dataset support see the end of draw_chart in spdmerlin

Thanks! I also have the option in chart.js to use a logarithmic scale on the axis, which could solve the small data points issue.

 

[dave14305]

This has been harder than I thought but I'm starting to get the hang of it. Long way to go in the appearance, but I'm just thrilled to get all 8 lines drawn correctly. Now the tweaking can begin!

 

[dave14305]

This is how I'm imaging the layout, replacing the pie charts with the line graphs. Truth be told, I've had so much pie this Thanksgiving weekend that I didn't want to look at another pie for a long time.

More work needed on the thickness of the lines and color of the scale text, but I'm pretty happy for a day's work.

 

[RMerlin]

I guess I've turned yet another dev into a chart.js fan

 

[Kanji-San]

This is how I'm imaging the layout, replacing the pie charts with the line graphs. Truth be told, I've had so much pie this Thanksgiving weekend that I didn't want to look at another pie for a long time.

More work needed on the thickness of the lines and color of the scale text, but I'm pretty happy for a day's work.

View attachment 28077

Dave, this looks really good What is the time span displayed here?
Would it make sense to make this time span customizable (within meaningful limits)?

 

[dave14305]

Dave, this looks really good What is the time span displayed here?
Would it make sense to make this time span customizable (within meaningful limits)?

As of now, the span is 50 data points. The duration depends on the refresh rate, with a default of 3 seconds, so 2.5 minutes of data. I'm going to play with doubling it to 100 data points for 5 minutes, but if you use a higher refresh rate, it would represent a longer time period.

It's also important to remind everyone that the displayed rate is not an instantaneous rate, but a 10-second average that the underlying htb qdisc calculates. So every 3 seconds you would get a new 10-second average of the rate per class. You won't see the data matching the output of a speedtest you run, for example, due to the short nature of the test.

 

[Kanji-San]

As of now, the span is 50 data points. The duration depends on the refresh rate, with a default of 3 seconds, so 2.5 minutes of data. I'm going to play with doubling it to 100 data points for 5 minutes, but if you use a higher refresh rate, it would represent a longer time period.

It's also important to remind everyone that the displayed rate is not an instantaneous rate, but a 10-second average that the underlying htb qdisc calculates. So every 3 seconds you would get a new 10-second average of the rate per class. You won't see the data matching the output of a speedtest you run, for example, due to the short nature of the test.

Thanks for the background. This makes a lot of sense.