IPfire Status Graph Size

1

Hello, I have a big monitor and want to see more of the IPFire graph details.

My method of increasing the graph size requires two changes and some experimentation.

First of all the over all width of the IPFire web site needs to be enlarged to accomodate the larger graphs:
Edit the file:
/srv/web/ipfire/html/themes/ipfire/include/css/style.css

Edit the width near the top, 90% works for me (Note this affects all the IPFire Web UI)
image

Secondly to increase actual graph sizes by editing the file:
/var/ipfire/graph.pl

And change the width to 2000 and height values to something between 600 and 900, the larger height allows greater detail to be seen in the graphs.

image

Not sure if there is a nicer or easier way of doing this.

2

Hi,

@luani, I would defer that question to you, since you have experience with CSS and related techniques. :slight_smile:

Thanks, and best regards,
Peter Müller

2 Likes
3

Hi,
That’s exactly how I would have approached that task :+1:
%image_size is used troughout the internal graph system. Only some addons (e.g. WIO) create their own graphs and won’t be changed.

I am not very familiar with the RRD system. Is there any more data available in the database that can be displayed this way? Or does it just increase the image size?

Unfortunately the IPFire CSS is not really meant to be responsive. Many CGI pages print forms and tables with fixed widths, which would interfere with a responsive theme.
I guess this is a subtle hint that I should look into modernising that :smiley:

Best regards
Leo

2 Likes
4

Its definitely not a hint from me … the ui is working great for me, very responsive, nice and simple.

Im also not familiar with how RRD works but the detail is increased with the higher resolution, its not just bigger.

Default:

image
image1545×520 53.5 KB

At 2000 by 800

image
image1546×718 167 KB

Default zoomed in to sort of match the size of 2000 wide

image
image1727×634 192 KB

2 Likes
5

It is clear, that you can see more details.
Data is represented by vertical lines stacked one category above the other.
The scale is chosen such, that the maximal value matched approximately the height of the graph. The pixel size is fixed. If the height of the graph increases, the height of the single parts increases also. So different small parts are more distinguishable.