Design Studio 1.5 - Bar Chart using gradient colors in a series axis

[Former Member]

Hi all

I’m able to change successfully the color of a series axis in a Bar Chart – using CSS – like:

.CHART_BELOW g.v-bar g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill:#FF0000; stroke: #858585;}

But I would like to use gradient colors instead of only one color -> fill:#FF0000

Is this possible?

Can you help me please on this topic?

I’ve searched already in scn for a similar request without success.

Define colors to bar char

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

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

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

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

Regards

A.Santos

[mike_howles4 · Accepted solution]

You could possibly do this with a gradient def in a separate SVG and then assign the fill attribute ID of the def to the selection in the chart but I'm not sure if the CSS fill rule would apply to the fill attribute or just the style. (Probably the latter if I were to guess.)

[TammyPowlas · Accepted solution]

From my testing this morning, Mike's suggestion sounds like it has a better chance of success

[Former Member · Accepted solution]

Thanks "a million" Mike & also Tammy by your valorous suggestions.

@Mike: Your tip seems to me a real possibility to solve this issue!

However I don't understand very well how to work or deal with SVG within this topic So, can I kindly ask you to provide an example of your SVG proposal and CSS integration?

PS. Again, this is to work in a Bar Chart and using IE browser.

Thanks in advance

Regards

A. Santos

[Former Member · Accepted solution]

Any suggestions are welcome!?

Please advice further options.

Thanks in advance.

A.Santos

[TammyPowlas · Accepted solution]

One suggestion - have you searched for Mike Howles' SVG suggestion?

[Former Member · Accepted solution]

Thanks Tammy.

I have 0 knowledge of SVG and how it can be integrated with CSS.

Any URL?

Any example of this integration between SVG and CSS?

Thanks in advance

Regards

A. Santos

[TammyPowlas · Accepted solution]

Try this: http://lmgtfy.com/?q=%22Design+Studio%22+%22SVG%22+%22CSS%22+site%3A+scn.sap.com

Which should lead you to several links, one of which is by David Change svg color via css | SCN

[Former Member · Accepted solution]

Thanks again Tammy

I've look at:

     Change svg color via css | SCN

But I don't see how can I replace the fill within:

.CHART_WEIGHT g.v-bar g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill:#E0E0E0; stroke: #858585;}

by something coming through SVG?!

This is my point, how can I integrate SVG with CSS (g.v-bar g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint) ???

Thanks is advance.

Regards

A. Santos

[Former Member · Accepted solution]

Good morning Mike

I've followed Tammy's suggestion and look at

     Change svg color via css | SCN

But I don't see how can I replace the fill within:

.CHART_WEIGHT g.v-bar g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill:#E0E0E0; stroke: #858585;}

by something coming through SVG?!

So I kindly ask your assistance/help in this topic.

How can we integrate SVG with CSS (g.v-bar g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill) ???

Thanks is advance.

Regards

A. Santos

[mike_howles4 · Accepted solution]

Here it is, spelled out in an example.  I hope this helps.  Click image to enlarge.

[Former Member · Accepted solution]

Thanks a million Mike.

This is one really helps.

[MustafaBensan · Accepted solution]

Hi Armando,

Once again, Mike has demonstrated very well that technically, almost any kind of effect can be achieved with the appropriate coding and determination.  I would be interested to know the business reason for using gradients in your chart as such effects are not recommended in practice, as documented by this article by Stephen Few for example:  Practical Rules for Using Color in Charts.  Of particular relevance is Rule #9 which suggests to "avoid using visual effects in graphs".

Regards,

Mustafa.

[Former Member · Accepted solution]

Hi Mike

Sorry to bother you

But I'm trying to implement the logic based on screenshot that you have added and I cannot get it to work.

How do I put the SVG logic inside my CSS file?

I've tried on the CSS file to add:

.CHART_WEIGHT g.v-bar g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill: url(#Gradient1); stroke: #858585;}

.Gradient1 {stop-color: red; offset: 0; stop-color: black; stop-opacity:0 offset: 50;}

but it doesn't work.

What I am missing here?

What I must add to CSS file in order to the Gradient to work in a DS chart?

Can I kindly ask to please help me on this one?

Thanks in advance.

Regards

Armando Santos

[Former Member · Accepted solution]

Hi Mustafa,

I agree with you that colors scheme shall be carefully chosen as described by Stephen Few. That is what I am trying to achieve by using a Bar chart in DS 1.4.

However, by default DS assigns a different color to each bar and I have dynamic number of bars therefore cannot fix bar color manually using DataSeries under additional properties.

AS IS

Would you know how to assign single color to a dynamic number of bars in a bar chart?

TO BE

Thanks!

Hashir

[mike_howles4 · Accepted solution]

Could you not just swap axes so that you only have one series?

[Former Member · Accepted solution]

Thanks Mike! You saved the day.

[MustafaBensan · Accepted solution]

Hi Hashir,

I would go with Mike's suggesting of swapping the chart axes.

Regards,

Mustafa.

[Former Member · Accepted solution]

Thanks Mustafa!

I have another question for you even though not related to this thread.

I have been following your very impressive blogs regarding Geo mapping features of DS 1.5. But we are on DS 1.4 (just upgraded) therefore cannot perform another quick upgrade to 1.5. Is it possible that I can work with DS 1.5 client with server version of 1.4 to get my hands around Geo mapping features in local mode?

Thanks!

Hashir

[Former Member · Accepted solution]

Hello Armando,

Did you reach to change your CSS file to put a column or bar filled with gradient?

Thanks in advance for your information.

Best regards.

[Former Member · Accepted solution]

No Ignacio I didn't reach to implement the logic recommended by MikeHowles  – unfortunately.

I couldn’t integrate SVG with CSS, I didn’t understand how can we put together SVG and CSS on the same file.

[Former Member · Accepted solution]

Thanks Armando for your quick answer.

I have the same requirement but i think that is not possible. One thing that you can use is the property fill-opacity (inside the css) that decrease the intensity of the colors in the chart. I know that is not gradient but maybe helps to your requirement.

If I found a solution I will let you know.

Best regards.

Ignacio

[Former Member · Accepted solution]

Thanks Ignacio by your tip & kindness.

I will also let you if I find a solution for this one.

Best regards

Armando Santos

[xjhacking · Accepted solution]

Hi Armando,

Did you get this running?

/Xavier

[TammyPowlas]

Armando - thank you for searching; that helped me find this:

http://stackoverflow.com/questions/11693580/linear-gradient-in-chrome-and-safari-browsers

I tried this:

background-color: #9e9e9e;
  background-image: linear-gradient(to bottom, #9e9e9e, #454545);

It is working as a gradient in my crosstab using Chrome.  See below:

Could you try this syntax with your chart?

[Former Member]

Thanks Tammy by your answer!

Unfortunately, your suggestion doesn't work on IE browser and I need this CSS class to be applied into a Bar chart (not a table).

.CHART_WEIGHT g.v-bar g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill:#E0E0E0; stroke: #858585;

background-color: #9e9e9e;

background-image: linear-gradient(to bottom, #9e9e9e, #454545);

}

DOESN'T WORK.

Please suggest.

Thanks in advance.

A. Santos

[Former Member]

Just to add that I've also tried:

.CHART_WEIGHT g.v-bar g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B7B7B7', endColorstr='#EBEBEB');

}

WITHOUT SUCCESS!!!

What I'm missing here?

Please suggest.

Regards

A. Santos