New Question
 
 
PRTG Network Monitor

Intuitive to Use.
Easy to manage.

200.000 administrators have chosen PRTG to monitor their network. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free PRTG
Download >>

 

What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general. You are invited to get involved by asking and answering questions!

Learn more

 

Top Tags


View all Tags


Change color of Sunburst / Treemap in Maps

Votes:

0

Your Vote:

Up

Down

We have some staff who are colorblind. Is it possible to change the colors of Sunburst and/or Treemaps to show different red/green colors? If so, how would that be done?

color map prtg

Created on Nov 6, 2012 5:40:45 PM by  bjobrien (0) 1



11 Replies

Accepted Answer

Votes:

1

Your Vote:

Up

Down

Hi,
yes, the colors can be changed. Please append the following code to the file customerstyle.css in the \website\css sub folder of your PRTG program directory. Please change the code to suit your needs.

RED in Treeview and Sunburst:

.treemap .device.down,
.nodeLinkTree .node image.down,
.nodeLinkTree .node rect.down,
g.down path,
.nodeLinkTree .node image.partialdown,
.nodeLinkTree .node rect.partialdown,
g.partialdown path
{
fill: #D21925;
background-color:#D21925;
}

GREEN in Treeview and Sunburst:

.treemap .device.up,
.nodeLinkTree .node image.up,
.nodeLinkTree .node rect.up,
g.up path
{
fill: #98BD1D;
background-color:#98BD1D;
 
}

Just replace the values for fill and background-color* with the desired ones.

Both snippets can be applied in the same file.
Best regards
Edit: path and file adjusted as it was the wrong file in initial version

Created on Nov 7, 2012 12:48:40 PM by  Konstantin Wolff [Paessler Support]

Last change on Nov 28, 2012 10:27:18 AM by  Konstantin Wolff [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Hi Konstantin,

Thanks for the fast answer! Is it possible to apply this to maps differently? For example, can I have two otherwise identical sunbursts and in one use the normal colors and in the other use my own predefined colors, or is this a global change?

Thanks! Brennan

Created on Nov 7, 2012 2:03:37 PM by  bjobrien (0) 1



Votes:

0

Your Vote:

Up

Down

Hi Brennan,
I'm afraid this is a global change as the header file mentioned in the post before is included in the whole web interface and the objects changed in the header are also the same in the whole interface. So no separation is possible. Sorry.
Best regards

Created on Nov 7, 2012 6:43:26 PM by  Konstantin Wolff [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Is there a way to only set the parent color only to the member color when all members are the same color. Setting the parent to the least severe rather than the most severe.

I don't want the root color to change to 'red', for example, unless all the members are 'red'. If any is green it should remain green.

In the way we have arranged the tree structure, if any member is good then the parent is good. If all members are red (or yellow) then the parent is also in that state.

This allows is to visualize when there is an outage, which would be when all paths/members are down.

more complex would be to to have the parent turn yellow if any member is yellow or red. If all members are red, the parent is red. This would show a degraded level at the parent level.

Hoping this is a simple setting someplace.. Oh the starburst is incredible way to present lots of information up in an organized way. Thanks.

Created on Nov 21, 2012 3:42:20 PM by  bhanson (0)



Votes:

0

Your Vote:

Up

Down

I'm afraid that isn't possible. Sorry.

Created on Nov 22, 2012 3:49:50 PM by  Patrick Hutter [Paessler Support] (7,174) 3 3



Votes:

0

Your Vote:

Up

Down

Hi guys,

Well after working through some issues with permissions, I was finally able to put these color changes in the htmlheader_customer.htm file. Doesn't seem to have changed anything on the web side, but on the enterprise console I sometimes see the code displayed when I click on libraries or maps (very top... before my own maps...

.treemap .device.down, .nodeLinkTree .node image.down, .nodeLinkTree .node rect.down, g.down path, .nodeLinkTree .node image.partialdown, .nodeLinkTree .node rect.partialdown, g.partialdown path { fill: #CC3300; background-color:#CC3300; } .treemap .device.up, .nodeLinkTree .node image.up, .nodeLinkTree .node rect.up, g.up path { fill: #009900; background-color:#009900; }

I'm trying to get the colors cc3300 for red and 009900 for green based on this hexcoding... http://www.techyuva.com/wp-content/uploads/hexagon_800.gif

Any ideas?

Thanks, Brennan

Created on Nov 26, 2012 9:36:07 PM by  bjobrien (0) 1



Votes:

0

Your Vote:

Up

Down

Hi,

what would be the code to change the color for acknowledged alerts?

We got a request from staff that this is easily confused with normal errors so we would like to change that.

Thanks for your help.

Created on Nov 27, 2012 1:21:13 PM by  maengling (80) 1 1



Votes:

0

Your Vote:

Up

Down

@bjobrien: Please put the code to the customerstyle.css (located in <PRTG Install Directory>\website\css\) instead of htmlheader_customer.htm . Then it should work.
@maengling: Please replace "up" in the css shown above with "downack" and then adjust the code to your needs. Example:

.treemap .device.downack,
.nodeLinkTree .node image.downack,
.nodeLinkTree .node rect.udownack,
g.downack path
{
fill: #98BD1D;
background-color:#98BD1D; 
}

Created on Nov 28, 2012 10:20:33 AM by  Konstantin Wolff [Paessler Support]

Last change on Nov 28, 2012 10:24:51 AM by  Konstantin Wolff [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Hi Konstantin,

Okay, I pulled the code from htmlheader_customer.htm and put it in customerstyle.css and that didn't seem to change anything. I went ahead and rebooted the entire server (which solved another problem in the process), but that didn't seem to change the colors either.

Here is my current customerstyles.css file in /website/css:

.treemap .device.down,
.nodeLinkTree .node image.down,
.nodeLinkTree .node rect.down,
g.down path,
.nodeLinkTree .node image.partialdown,
.nodeLinkTree .node rect.partialdown,
g.partialdown path
{
fill: #CC3300;
background-color:#CC3300;
}
.treemap .device.up,
.nodeLinkTree .node image.up,
.nodeLinkTree .node rect.up,
g.up path
{
fill: #009900;
background-color:#009900;
 
}

Created on Nov 28, 2012 3:20:19 PM by  bjobrien (0) 1



Votes:

0

Your Vote:

Up

Down

Can you please send us your customerstyles.css-file by mail to [email protected]

Created on Dec 4, 2012 2:22:56 PM by  Torsten Lindner [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Hi all, I realize this thread is 5 years old now, but I wanted to let you know that this tip still applies on V17.4.35.

The change has to be made in \webroot\css\ in file styles_custom_v2.css

I added this code to darken the green in my Treemap:

.treemap .device.up,
.nodeLinkTree .node image.up,
.nodeLinkTree .node rect.up,
g.up path
{
fill: #009600;
background-color:#009600;
 
}

and after pressing Ctrl+F5, my Treemap now shows the darker green. The Sunburst also shows the same color, but "Device Up" greens in other locations were not affected.

Created on Dec 29, 2017 6:18:37 PM by  Michael (0) 1



Please log in or register to enter your reply.


Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.