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

Color coding for column combination chart

Former Member
0 Likes
373

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 Boopalan,

Thanks for your reply. May i know why used return here?

shall i use setcssclass or return.here?

i am just confused . i never explored on this .could you please explain in detail please?

and i Didnt find formatter function any where in my chart.could you please guide me on this

My requirement

1. if user selected May so till may color of bars should be back(actuals) and from june to december blue(target)

Thanks,

Varun

Former Member
0 Likes

Hi Varun,

Sorry for the delayed reply i didn't get any notification on your comment.

The return function assigns value to the CSS class property dynamically.

It's like instead of giving a class name to the property, we can use this method to assign different classes in our css file based on our requirement. Like yours to change color at run time.

As in my scripting, based on month selected the css class will be assigned the chart. Here the return function sends string(class name) as value of the CSS class name property.

Let me know if more clarification needed.

Thanks,

Poovarasan