Skip to Content
0

Infochart in Design studio 1.6

Jun 26, 2017 at 08:17 AM

247

avatar image

Hello All,

I am using design studio 1.6

I have a requirement to show Previous year data in Grey color and Curent year data in Blue color. I am using a column chart, hence one bar should be grey and another should be in Blue.

From the posts in SCN i learnt that we can do it with either CSS or Conditional formatting. But with CHARTS!!!!.. However Chart component is not available in 1.6 version. so we can use only infochart. With Infocharts we cant use CSS or conditional formatting.

https://archive.sap.com/discussions/thread/3856824

Is there any solution or workaround for my requirement?

Thank you..

Swapna

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Tammy Powlas
Jun 26, 2017 at 09:25 AM
0

The CHART component is still available in 1.6 but in m mode, but you are right you should look at using InfoCharts.

The best way to meet your requirement (my opinion only) is to look at an add-on from Graphomate; you should be able to find them at the SAP app center https://www.sapappcenter.com/home

The Graphomate add-on meets the IBCS requirements, which it sounds like what you are asking. They also offer a trial.

Share
10 |10000 characters needed characters left characters exceeded
Mustafa Bensan Jun 26, 2017 at 09:45 AM
0

Hi Swapna,

If your requirement is to selectively change the column colours of the SAME measure based on the category dimension year, you can adapt the CSS approach I have described in this answer: https://answers.sap.com/questions/227839/generation-of-css-for-column-format-in-infochart.html?childToView=227495#answer-227495

Also, it would clarify your requirement if you posted a screenshot of your chart with appropriate annotations.

Regards,

Mustafa.

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

HI Mustafa,

Thanks for your response.

Previous Year and current Year are two measures coming form the same query.

-Swapna

0

In that case, why don't you simply set separate colours for each measure in the Color Palette properties of the InfoChart?

0

HI Mustafa,

Please see the screenshot below-

The chart has only two key figures PY and CY.changing the colors in color palette is working only if i add a dimension else NO.

But the requirement does not include the dimension. hence i am not able to do it by color palette.

0

Hi Swapna,

I don't see the screenshot. Can you re-post it?

0
capture.png

Mustafa,

I have added the attachment.

thanks

capture.png (2.8 kB)
0

Thanks Swapna,

If the chart doesn't have a dimension in the category axis and you only have two key figures PY and CY, then how is it that you have two PY columns in the chart screenshot?

0
Lakshmikanth Adharapurapu Jun 27, 2017 at 02:36 PM
0

Hi Swapna,

If they are two different key figures then please go to column chart, click on conditional formatting, then select measure PY (previous year) and assign the color to grey, then select cy measure and select colour as blue assign one dummy value >-500000000000000 and save the chart.

It will be some thing shown in the screen shot, and i am sure you can achieve your requirement.

Please refer the screen shots, let me know if you need further help on this

BR,

Lakshmikanth Adharapurapu

keyfigures-conditional.png

ouput-columnchart.png


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

Hi Lakshmikanth,

Swapna is specifically asking about the InfoChart. The Conditional Formatting function you have described only applies to the standard Chart component in the old SAPUI5 mode. This feature is not available with InfoCharts.

Regards,

Mustafa.

0

Thanks Mustafa, good spot.

/Swapna, Please refer older thread from mustafa 'https://archive.sap.com/discussions/thread/3965481', based on this css i have tried modifying the script shown below and i have achieved the out put what you want (I only used two keyfigures in measures section, no dimensions placed in the rows)

Css script for infochart:

.color g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect { fill: #808080; } .color g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(3) rect { fill:#1E90FF; }

Output:

currentyear-ly-screenshot.png

1

HI Lakshmikanth,

Thanks for your answer. I applied the css to my chart it works well as long as all the columns of the chart are shown.

for ex: i have a infochart with 2 columns, each column referring to seperate kefigures , keyfig1 and keyfig 2 respectively.

When i apply some filters on the dashboard , if the first keyfigure in the chart has no data for it, and the second one has data. the color assigned to first child gets assigned to the second child.

in my case i am showing Current year data as Blue and Previous Year data as grey. when i apply filter if there is no data for Current year, Previous year takes the Blue color. which is not the expected behavior.

Any Ideas on this.

Many Thanks

0

Hi Swapna,

Below logic should give you the solution

Step no 1:

create three css scripts with color1 and color2 color3 as shown below

.color1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect { fill: #808080; }

.color1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(3) rect { fill:#1E90FF; }

.color2 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect { fill: #808080; }

.color2 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(3) rect { fill:#808080; }

.color3 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect { fill: #1E90FF; }

.color3 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(3) rect { fill:#1E90FF; }

Step no2:

write below script in your start up:

var Lasyear = DS_1.getData(“keyfigure1”, {“Dimension”: “value”}).value

var Curryear = DS_1.getData(“keyfigure2”, {“Dimension”: “value”}).value

if (lastyear !=0 && curryear !=0)

{ Infochart_1.setcssclass("color1"); }

else if (lastyear ==0 && curryear !=0)

{ Infochart_1.setcssclass("color3"); }

else if (lastyear !=0 && curryear ==0)

{ Infochart_1.setcssclass("color2"); }

Step no 3:

You need to write or call step no 2 script every where you aplly filters or on select scripts (Like dropdowns, filterpanels on select script editor etc)

Feel free to let me know if you have any issues in understanding or for any further clarfications.

BR,

Lakshmikanth Adharapurapu V

0

Also please remeber incase if lastyear or current year values does not exist in the data source instead of zero then you need replace "== 0" with "==undefined" in step no 2 script.

0