How to change colors on bandwidth graph
-
Our latest update to FOG changed the color scheme on the bandwidth graph.
With 11 devices sending and receiving this becomes incredibly confusing now:
Where can I make a change to this color scheme?
-
I think I asked for the ability to choose the colors before - I can’t find that old thread. If memory serves, the bandwidth chart automatically determines the colors used. I think it’d be nice to be able to pick though. I’d be using purple and pink and brown and even striped lines like brown-white (think CAT cabling).
-
@wayne-workman I don’t need anything fancy like a gui tool in the dashboard. I just want to know which file I need to edit. Should be something in the source or config files somewhere that I can monkey with this. The old color scheme was much better when there were at least 4 or 5 different colors. The graph has to be picking from some arbitrary set of predetermined colors, no?
When I upload an image and replication kicks off I like to be able to look at this graph and at a glance determine whether or not bandwidth rules are being obeyed. When multiple nodes have the same exact color the graph, for me at least, is pretty useless.
-
- This seems to be where colors are determined: https://github.com/FOGProject/fogproject/blob/2c62ba06d3f1a363d1382819170c1e013aa899fd/packages/web/management/js/fog/fog.dashboard.js#L432
- On your fog server, that should be in
/var/www/html/fog/management/js/fog/fog.dashboard.js
(I think). - Here’s a color picking tool: https://www.w3schools.com/colors/colors_picker.asp
- May need to restart Apache for changes to take effect, might need to refresh your browser after the Apache restart also.
-
@wayne-workman Thanks for that! I’ll play around with it and see what happens!
-
In the 1.6 work I’ve made the colors a bit more dynamically generated but following the base color of the look and feel of FOG.
You could get this level on 1.5 as well but it requires a few steps.
-
Download this file and put in
/var/www/fog/management/js/jquery.color.min.js
-
Edit the file
/var/www/fog/lib/fog/page.class.php
Search for'js/jquery.min.js',
Enter a new line and enter:'js/jquery.color.min.js',
Save and close the file. -
Open the file
/var/www/fog/management/js/fog/fog.dashboard.js
.
-
- Line 434 delete
-
- Line 441 delete (442 if 434 is not deleted).
-
- Line 447 delete (449 if 434 and 441 is not deleted).
-
- Goto line 487 (490 if lines before are not deleted.)
-
- Add the following: (you can change the #3c8dbc to whatever color you’d like to start from)
// Shading our colors. GraphBandwidthOpts.colors = $.map(series, function(o, i) { return jQuery.Color('#3c8dbc').lightness(0.7 - i / (series.length * 1.2)).toHexString(); });
Save the file. You will likely need to hard refresh your browser (CTRL+SHIFT+ F5, or SHIFT+F5. I don’t know browsers are different.)
Now you don’t have to create a color for every node you have, and the shading should be more properly aligned to signify differences.
-
-
@Tom-Elliott Where can i find the file that is needed to be downloaded? The link for the file in question leads to a 404.
-
-
@Tom-Elliott Thank you.