Dashboard Chart Color Management

I have been asked by several customers about managing colors in charts and graphs in the PLM Dashboard. This issue came up recently as well, and I am taking this opportunity to make this information widely available via our PLM blog. There are two primary issues that customers normally have regarding this. The first one is maintaining general consistency between dashboard charts across tabs i.e. all solid colors v/s matted v/s borders etc. The second issue is more important in my mind and relates to having a consistent color representation for the same status across all tabs and charts so as to not confuse users. e.g. all Change Orders in 'Released' status should be displayed in Green across all tabs.

This blog post addresses both issues and should provide customers and consultants with some good tips on managing colors in the PLM Dashboard.

  1. Maintaining consistency between dashboard charts across tabs You will notice that color schemes in the PLM Dashboard are not consistent i.e. the styles change after 5 shades. The first 5 colors are shaded and without borders and after that they become matted and have borders. This is a configuration issue related to one of the cascading stylesheets. To fix this, you have to modify the Chart.css file located in folder \j2ee\home\applications\Agile\application folder.

 

Steps to customize the CSS file (OAS installation)

 

Modify the Chart.css located in folder <ORAHOME>\j2ee\home\applications\Agile\application folder.

 

Below are the steps to modify this file:

 

1. Stop the server.

2. Backup the Chart.css file

3. Open Chart.css, located in the above mentioned folder, in any text editor.

4. Modify colors for existing series and add new series definitions if required as mentioned below sections.

4. Save the file to the same location.

5. Restart the server.

 

Note: The modified css files should be backed up since an upgrade will overwrite the existing css files and they need to be replaced again after upgrade.

 

 

Steps to customize colors for existing series

 

Important: Changes done to the colors here are based on index of the series and would reflect on all the charts for that series in dashboard. We can add a new series based on a filter on dataset which is explained in below section.

 

In the Chart.css we have the series definition like below

 

series[index = 0] {

color1: "#87AFC7-#41627E-#41627E";

color2: "#41627E";

}

 

series[index = 1] {

color1: "#8EEBEC-#3EA99F-#3EA99F";

color2: "#3EA99F";

}

 

Here:

 

color1 : "#<Gradient's start Color code in hex>-#<Gradient's middle Color code in hex>-#<Gradient's End Color code in hex>" ;

 

color2: "#<Border color code in hex>";

 

Note: Here the colors can be specified as color code in hex or the color name or RGB format

 

Examples:

 

color1: "#8EEBEC-#3EA99F-#3EA99F";

color1: "red";

color1: 210,210,219;

 

The RGB (Red Green Blue) color codes can be looked in any color pallete (for example from MSPaint as shown below in the screen shot)

 

 

 

 

 

Example 1: To change all legends to not display any gradient colors and black border, in the Chart.css file you can delete all the definitions for "point" in the style sheet. These would be line numbers 6 to 30 in an unmodified file.

 

Example 2: To change all legends to display gradient colors, you can add as many definitions for "point" as required in the style sheet in the below format. Make sure that the index numbers do not repeat.

FORMAT:          point[index=="<Index of the color in legend display>"] {

                        color1 : "#<Gradient's start Color code in hex>-#<Gradient's middle Color code in hex>-#<Gradient's End Color code in hex>" ;

color2: "#<Border color code in hex>";

lineWidth : "2";

}

 

Below is the definition for 5th color in the legend.

point[index=="5"] {

   color1 : "#CCFB5D-#A0C544-#A0C544" ;

   color2: "#A0C544";

   lineWidth : "2";

}

 

 

  1. Colors should be consistent for same status value across all tabs and charts. e.g. all Change Orders with 'Released' status should be displayed in Green across all tabs. We can configure the dashboard to display consistent colors by legend name. Note that if the legend name is repeated elsewhere in a different chart, then the same color will be displayed in this other chart as well.

 

 

Steps to add new series based on filter on dataSets

 

After the last line in Chart.css you can add a new definition for a series based on the legend name like below.

 

series[name = "<Legend Name>"] {

color1: "<new color1>";

color2: <new color2>";

}

 

For example for a legend name "Complete" so we can specify a new series as

 

 

Using RGB format

 

series[name = "Complete"] {

color1    : 210,210,219;

color2    : 210,210,60;

}

 

Or using color names

 

series[name = "Complete"] {

color1    : "red";

color2    : "black";

}

 

The definition/rule format is as follows:

 

FORMAT:          point[label=="<String displayed in the legend >"] {

                        color1 : "#<Gradient's start Color code in hex>-#<Gradient's middle Color code in hex>-#<Gradient's End Color code in hex>" ;

color2: "#<Border color code in hex>";

lineWidth : "2";

}

Example: If all the pie charts in Dashboard should display "Released" related sector in "Green" color with black border then the definition should be as below

            point[label == "Released"] {

                        color1 : "green"; // If required gradient colors can also be specified

                        color2 : "black";

                        lineWidth : "2";

}

 

Thanks to the PPM development team for providing examples of the stylesheet edits. Your feedback is welcome as always. Hope you find this useful.

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About

Hear from the community that's pioneering PLM's critical role in transforming supply chains into sustainable value chains that power profitable innovation and competitive advantage.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today