cancel
Showing results for 
Search instead for 
Did you mean: 
Read only

Color coding for column combination chart

Former Member
0 Likes
374

HI experts,

Need help on color coding for Colum combination chart.

I have Jan to dec in X-axis. and i have yearmonth variable

whenever user selected in variable color should change dynamically for example if he selected May 2015 .so till Apr 2015 bars should be black and remaining bars should be in blue

black bar-Actual

blue bar-Target

Please find the image

I Have tried by capturing variable and apply css.but no luck and i reffered blogs as well but not full filled my requirement

any help would really appreciated.

https://blogs.sap.com/2014/09/19/learn-about-arrays-in-design-studio-13/

https://archive.sap.com/discussions/thread/3759486

https://archive.sap.com/discussions/thread/3701365

var month = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];



var a = PAPLS_OVERVIEW.getVariableValueText("PA_V_A_MM_YYYY");



var monthNum = Convert.stringToInt(a.substring(0,3));

CSS:

COL1 g.v-m-main g.v-m-plot g.v-column:nth-child(1) .v-datapoint.v-morphable-datapoint {fill: red!important; stroke: #E20015;}

View Entire Topic
Former Member
0 Likes

Hi varun,

You cannot pass variables to css. But you can write logic in Formatter Function and use it to change the CSS class for your chart dynamically in Design studio versions 1.5 and above.

Let us consider your CSS file have classes like

.month1 .(css class for bar coloring)

{Code to color first bar bar}

.month2 .(css class for bar coloring)

{Code to color bar}

.month2 .(css class for bar coloring)

{Code to color second bar bar}

note: classes are same as you used to color bars in your chart

you can write formatter function in data binding of CSS class as

var selected_month = "User selected month";

if (selected_month = 1)

{

return("month1");

}

if (selected_month = 2)

{

return("month2");

}

So your css class name will change according to the selection of month. For data cell binding you can use any data as we are not going to use in formatter function.

I think it will solve your problem.

Thanks,

Poovarasan