/scripts/ahub.form.attachments.js
0

SAP Design Studio - Change color of measure bar in diagram

Jul 06, 2017 at 10:26 AM

527

avatar image

Hello dear community,

I have a little problem and hope somebody of you is able to help me.

I have a diagram where I show three different kind of measures:

When I click on the grey part of the bar (= measure "WSA >3-6 Monate"), the drilldown-level will be switched as follows:

Now the bars are green instead of grey. I need a way to switch the color of all bars in Screenshot 2 to grey.

Does somebody know how to change the color of bars in diagrams dynamically?

Thanks in advance.

Regards,

Vu

r7kao.png (23.8 kB)
btecx.png (110.1 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Mustafa Bensan Jul 07, 2017 at 12:25 PM
1

Hi Vu,

If you are using an InfoChart then you can set the colour of all of the columns to the desired colour with CSS as follows:

1) Create a custom CSS file for your application which includes the code:

.chartAllColumns g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint rect 
{    
   fill: green;   
}

2) Execute the following code after drill-down to apply the colour change:

INFOCHART_1.setCSSClass("chartAllColumns");

Regards,

Mustafa.

Show 8 Share
10 |10000 characters needed characters left characters exceeded

Hi Mustafa,

unfortunately I'm not using an InfoChart.

Can you explain me the difference between an InfoChart and a basic chart component?

Does this procedure not work with a basic chart component?

Thanks and regards,

Vu

0

Hi Vu,

The InfoChart is only available for Design Studio applications created in SAPUI5 M Mode. The standard chart component is available in the older SAPUI5 "Commons" Mode which is being deprecated as of Lumira 2.0. I therefore recommend all new applications to be created using SAPUI5 M Mode.

Regards,

Mustafa.

0

Hi Mustafa,

thank you very much for your reply.

I changed all my charts to InfoCharts, so that this code works perfectly fine.

But one thing still makes me crazy: If I set the CssClass for example all bars are red later it won't change back to default. How do I change the colours to default ?

Regards,

Vu

0

Hi Vu,

To remove the custom CSS and restore the default, simply execute the following script:

INFOCHART_1.setCSSClass("");

Regards,

Mustafa.

0

Hi Mustafa,

thanks, it works perfectly.

Regards,

Vu

1

Hi Mustafa,

Thanks for the code.

I am using a Lumira 2.0 SP1 and using chart with type Column Chart. I have two columns in the chart for Measure 1 and Measure 2. I would like to change the colors of the columns individually. The code which you provided is working for the group. uploading a sample chart. Please help me on this.

Even I wrote few other codes mentioned in other blogs which are not working.

Here is the code which is not working

.customChart1 g.v-column g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill: yellow !important;} .customChart1 g.v-column g.v-datashape:nth-child(2) rect.v-datapoint.v-morphable-datapoint {fill: blue;} .customChart1 g.v-legend-content g.v-row.ID_0 path {fill: yellow;}

.customChart1 g.v-legend-content g.v-row.ID_1 path {fill: blue;}

chart.jpg (23.8 kB)
0

Hi Sukumar,

This is a closed discussion as it has been marked as answered. As per the Community Rules of Engagement you should open a new question describing your issue. Your question will also receive better visibility this way.

Regards,

Mustafa.

0

thank you mustafa. I will open a new discussion on this.

0
Tammy Powlas
Jul 06, 2017 at 10:59 AM
0

Hi Vu- the "easiest" way is in Figure 9 here https://blogs.sap.com/2017/07/05/visual-bi-extensions-for-lumira-2.0/ - as this topic arises a lot

If that does not work, please share if this chart is an InfoChart component or regular "Chart" component.

Show 7 Share
10 |10000 characters needed characters left characters exceeded

Hi Tammy,

can you help me to understand your post ?

If I read the text in figure 9 I don't know how to implement that:

Figure 9: Source: Visual BI

Conditional formatting based on dynamic thresholds, create rules based on a single measure (if revenue goes above $500K or use target values – 90% of forecast, use green)

Rules can be based on any element of data source; not limited based on what is not visible

0

Hi Vu -

I am sorry my explanation is not that well understood - I'll try to improve for the future.

You would need the extension to implement this; these are extensions to the product - from the SAP App Center at https://www.sapappcenter.com/home - you could ask for a trial

You could watch the video to understand more at http://visualbi.com/resources/webinars/extensions-lumira-2-0-us-webinar-replay/

I hope that helps.

0

Hi Tammy,

unfortunately I have not the opportunity to install that extension because I'm using SAP Design Studio as SaaS (software as a service).
Do you think there is any other way how I can change the color of the measure bar dynamically at runtime?
Isn't there any way to implement this with simple code?

Thanks in advance.

Regards,

Vu

0

Hi Vu - are you using an InfoChart or Chart component?

Separately, I am interested in your deployment of Design Studio deployed as "Software as a Service" - how does that work?

0

Hi Tammy,

I'm using a Chart component.

To be honest: I don't know Tammy, I'm sorry.

Regards,

Vu

0

Hi Vu - if you are not sure, would you be willing to share a screen shot of your outline view? That would tell us if it is a Chart or an InfoChart.

0

Hi Tammy,

I meant that I don't know how the Design Studio is implemented as a software as a service.

I already told you that I'm using a Chart Component ^^

Regards

Vu

0
Skip to Content