on 08-11-2015 7:45 AM
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.
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
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.)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
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
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
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.
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
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
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
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
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?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
User | Count |
---|---|
87 | |
10 | |
10 | |
10 | |
7 | |
6 | |
6 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.