Design Studio 1.5 – Color formatting in a Column Chart using CSS

Hi all

I’m trying to use CSS colors, in a Column Chart, instead of using “Conditional formatting”.

If we use a “conditional formatting ” in a Column Chart the values are hardcoded, as below example:

{"conditions":[{"dimensionMember":"006NZILKDXCW96EGJNBM5YMC0","color":"#008040","ruleName":"above","appliesTo":"CHART_1","value":"94.99","operator":">"},{"dimensionMember":"006NZILKDXCW96EGJNBM5YMC0","color":"#ff0000","ruleName":"below","appliesTo":"CHART_1","value":"95","operator":"<"}]}

And I get in the end (as expected):

As you can see the 95% is hard-coded within the cond. formatting but I need this value to be dynamic, meaning allowing user to change this target value % and see the color changing in the graph

Like:

As you can see here the colors changed because I’ve manually changed the conditional formatting of this chart.

I’m trying to achieve the same objective by using CSS.

So, I’ve removed the conditional formatting from this chart and add a button (“Columns colors with CSS”)  and I’ve added the following logic/code:

var periods = [NG_Previous_Year+"001", NG_Previous_Year+"002", NG_Previous_Year+"003", NG_Previous_Year+"004", NG_Previous_Year+"005", NG_Previous_Year+"006", NG_Previous_Year+"007", NG_Previous_Year+"008",

        NG_Previous_Year+"009", NG_Previous_Year+"010", NG_Previous_Year+"011", NG_Previous_Year+"012", NG_Current_Year+"001", NG_Current_Year+"002", NG_Current_Year+"003", NG_Current_Year+"004",

        NG_Current_Year+"005", NG_Current_Year+"006", NG_Current_Year+"007", NG_Current_Year+"008",   NG_Current_Year+"009", NG_Current_Year+"010", NG_Current_Year+"011", NG_Current_Year+"012"

];

var column_counter=1;

1. periods.forEach(function(element, index) {

  var myYearElement = ""; 

  if (Convert.indexOf(element, NG_Previous_Year, 0)>=0) {myYearElement=NG_Previous_Year;} else {myYearElement=NG_Current_Year;}

  var period_value1=DS_1.getData("006NZILKDXCW96EGJNBM5YMC0", {"0FISCPER":element, "0FISCYEAR":myYearElement});

var CSS_Class = "COLUMN";

if (period_value1.value>=Convert.stringToFloat(TARGET_VALUE.getValue())) {CSS_Class=CSS_Class+column_counter+"_ABOVE";}

else {CSS_Class=CSS_Class+column_counter+"_BELOW";}

if (period_value1.value>0) {CHART_1.setCSSClass(CSS_Class);}

  //APPLICATION.alert("CSS_Class="+CSS_Class+" period_value1.value="+period_value1.value);

  column_counter=column_counter+1;                    

});

And in my local CSS file I've added:

/* ********************* */

/* COLUMN BAR DEFINITION */

/* ********************* */

.MY_YELLOW g.v-m-main g.v-m-plot g.v-column:nth-child(7) .v-datapoint.v-morphable-datapoint {fill: yellow; stroke: #EBEBEB;}

.MY_BLUE g.v-m-main g.v-m-plot g.v-column:nth-child(11) .v-datapoint.v-morphable-datapoint {fill: blue; stroke: #EBEBEB;}

.MY_GREY g.v-m-main g.v-m-plot g.v-column:nth-child(17) .v-datapoint.v-morphable-datapoint {fill: grey; stroke: #EBEBEB;}

/* COLUMN1 - ABOVE + BELOW */

.COLUMN1_ABOVE g.v-m-main g.v-m-plot g.v-column:nth-child(1) .v-datapoint.v-morphable-datapoint {fill: green; stroke: #EBEBEB;}

.COLUMN1_BELOW g.v-m-main g.v-m-plot g.v-column:nth-child(1) .v-datapoint.v-morphable-datapoint {fill: red; stroke: #EBEBEB;}

/* COLUMN2 - ABOVE + BELOW */

.COLUMN2_ABOVE g.v-m-main g.v-m-plot g.v-column:nth-child(2) .v-datapoint.v-morphable-datapoint {fill: green; stroke: #EBEBEB;}

.COLUMN2_BELOW g.v-m-main g.v-m-plot g.v-column:nth-child(2) .v-datapoint.v-morphable-datapoint {fill: red; stroke: #EBEBEB;}

/* COLUMN3 - ABOVE + BELOW */

.COLUMN3_ABOVE g.v-m-main g.v-m-plot g.v-column:nth-child(3) .v-datapoint.v-morphable-datapoint {fill: green; stroke: #EBEBEB;}

.COLUMN3_BELOW g.v-m-main g.v-m-plot g.v-column:nth-child(3) .v-datapoint.v-morphable-datapoint {fill: red; stroke: #EBEBEB;}

/* COLUMN4 - ABOVE + BELOW */

.COLUMN4_ABOVE g.v-m-main g.v-m-plot g.v-column:nth-child(4) .v-datapoint.v-morphable-datapoint {fill: green; stroke: #EBEBEB;}

.COLUMN4_BELOW g.v-m-main g.v-m-plot g.v-column:nth-child(4) .v-datapoint.v-morphable-datapoint {fill: red; stroke: #EBEBEB;}

/* COLUMN5 - ABOVE + BELOW */

.COLUMN5_ABOVE g.v-m-main g.v-m-plot g.v-column:nth-child(5) .v-datapoint.v-morphable-datapoint {fill: green; stroke: #EBEBEB;}

.COLUMN5_BELOW g.v-m-main g.v-m-plot g.v-column:nth-child(5) .v-datapoint.v-morphable-datapoint {fill: red; stroke: #EBEBEB;}

…

But unfortunately the result is not as expected!

All columns are in red and the above 95% columns should be green.

Please note that each column has a “Green” or “Red” definition in the CSS file:

/* COLUMN4 - ABOVE + BELOW */

.COLUMN4_ABOVE g.v-m-main g.v-m-plot g.v-column:nth-child(4) .v-datapoint.v-morphable-datapoint {fill: green; stroke: #EBEBEB;}

.COLUMN4_BELOW g.v-m-main g.v-m-plot g.v-column:nth-child(4) .v-datapoint.v-morphable-datapoint {fill: red; stroke: #EBEBEB;}

And the above code looks at each value per column and if it’s above the “Target Value” it picks the “COLUMN4_ABOVE” else picks “COLUMN4_BELOW”.

This is not working because, it’s my guess, that we cannot apply to the same chart several CSS definitions at the same time.

To finish, I’ve add 3xnew buttons:

With code (in each):

     CHART_1.setCSSClass("MY_YELLOW");

     CHART_1.setCSSClass("MY_BLUE");

     CHART_1.setCSSClass("MY_GREY");

And if I click in each button separately the result is:

1^st CHART_1.setCSSClass("MY_YELLOW");

2^nd CHART_1.setCSSClass("MY_BLUE");

3^rd CHART_1.setCSSClass("MY_GREY");

As you can see in each iteration (click on each button), the previous CSS definition is deleted. - only the last definition remains

I’ve search in scn for similar topics:

     https://scn.sap.com/thread/3573494

     http://scn.sap.com/thread/3497046

     http://scn.sap.com/thread/3686661

But without success!

I would like to achieve this goal by using only CSS.

Do you have any recommendation or suggestion?

Regards

Armando Santos