How to change colors on bandwidth graph

[Neil Underwood]

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?

[Wayne Workman]

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).

[Neil Underwood]

@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.

[Wayne Workman]

@neil-underwood

• 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.

[Neil Underwood]

@wayne-workman Thanks for that! I’ll play around with it and see what happens!

[Tom Elliott]

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.

1. Download this file and put in /var/www/fog/management/js/jquery.color.min.js

2. 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.

3. Open the file /var/www/fog/management/js/fog/fog.dashboard.js.

• 1. Line 434 delete
• 2. Line 441 delete (442 if 434 is not deleted).
• 3. Line 447 delete (449 if 434 and 441 is not deleted).
• 4. Goto line 487 (490 if lines before are not deleted.)
• 5. 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.

[Fithian]

@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]

@Fithian try this file: https://raw.githubusercontent.com/FOGProject/fogproject/working-1.6/packages/web/management/js/jquery.color.min.js

[Fithian]

@Tom-Elliott Thank you.