Question Re: Color coding for column combination chart in Technology Q&A

Color coding for column combination chart

Former Member — Wed, 26 Oct 2016 12:20:56 GMT

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;}

Re: Color coding for column combination chart

TammyPowlas — Wed, 26 Oct 2016 12:48:18 GMT

The closest, easiest way is to check page 73 of this document: https://visualbi.com/wp-content/uploads/visualbi-extensions-for-sap-businessobjects-design-studio-vbx-user-guide.pdf - not sure if it meets your requirement.

Re: Color coding for column combination chart

Former Member — Fri, 28 Oct 2016 08:35:48 GMT

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

Re: Color coding for column combination chart

Former Member — Sun, 30 Oct 2016 13:55:46 GMT

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

Re: Color coding for column combination chart

Former Member — Wed, 02 Nov 2016 15:24:04 GMT

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