Skip to Content
0

designing of multiple charts in one grid layout (design studio 1.6)

Nov 14, 2016 at 05:09 PM

878

avatar image
Former Member

HI Experts,

Searched Blogs before Posting

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

https://blogs.sap.com/2015/04/22/list-of-css-for-sap-design-studio/

https://wiki.scn.sap.com/wiki/display/Img/Responsive+Design+with+SAP+Screen+Personas

I Have a Requirement of overlap of 2 charts in a single grid layout. actually. for more info please see below screenshot

in above screenshot from JAN to DEC i need to go for stacked and PY CF and Plan should be another chart(column chart) . how to show 2 charts as a single chart. initially i tried with 2 approaches

1. first i created JAN to DEC Stack chart and then started creating column chart with three data series .so basically i fixed the height and width and kept in panel . so it was coming fine but screen is not responsive . when we are resizing screen not behaving as a responsive design

2. another approach i tried Keeping 2 charts in 2 different layout to make responsive but x-axis line is joining .and grid lines as well

in future we are planning for mobile enablement so it should be responsive

can any one suggest me what are the steps need to follow for responsive design while combining 2 charts

Looking forward to your replies

Thanks,

varun

trxjg.png (10.5 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

11 Answers

Tammy Powlas
Nov 14, 2016 at 05:40 PM
0

Adaptive isn't planned until Lumira 2.x

See below:

Source: SAP/Visual BI

I still think the best way is to look at extensions to do this in the mean time: https://analytics-extensions.enter.sap


20vbi.jpg (38.5 kB)
Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Nov 14, 2016 at 06:07 PM
0

hi Tammy,

Thanks for reply for.now is there any workaround without using sdk?

Thanks,

Varun

Share
10 |10000 characters needed characters left characters exceeded
Tammy Powlas
Nov 14, 2016 at 07:47 PM
0

If I were you, Varun, I would at least try the SDK; some are free, others offer a trial - perhaps they will give you some ideas

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Nov 15, 2016 at 06:05 AM
0

Why you want two charts as a single chart first of all. Why don't you tried crearting two cells in a grid and placed them adjacent to each other and what you mean by X-axis lines are not joining?

Thanks,

Nithyanandam

Show 4 Share
10 |10000 characters needed characters left characters exceeded
Former Member

I Venu,

Please find the screenshot below

i have placed 2 charts in 2 cells . but here clearly looks like 2 different charts . i want to show them in a single chart

is there any work around ?

i tried giving left margin but it was behaving different ways based on screen sizes/

0
Former Member

HI Venu,

Please find the screenshot below

i have placed 2 charts in 2 cells . but here clearly looks like 2 different charts . i want to show them in a single chart

is there any work around ?

i tried giving left margin but it was behaving different ways based on screen sizes/

0
Former Member

Please find the screenshot

sb8w2.png (1.4 kB)
0
Former Member
Former Member

Hi,

Did you tried what @poovarasan suggested?

0
avatar image
Former Member Nov 15, 2016 at 05:54 AM
0

Hi Varun,

If you want to create a visualization as in your screen shot,you need three charts as 2 column chart and a stacked column chart in a grid with 3 column of ratio 1:12:2.

column chart

Enable the Yaxis only in first chart

Fix all the 3 Charts with constant axis scaling

Maintain constant padding in charts to make charts look like a single chart.

I think it will be enough to create the visualization. Let me know if you face any problem in it.

Thanks,

Poovarasan

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Nov 16, 2016 at 05:40 AM
0

Hi Varun,

From your screenshot, I think you still haven't changed the value of padding in both charts.

In first chart make padding-right as zero and then in second chart make padding-left as zero. It will look like a single chart.

Then give two cells width ratio 4:1 in grid layout properties.

Thanks,

Poovarasan

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Nov 16, 2016 at 05:52 AM
0

HI ,

Thanks for your reply .but may i know why you are asking me to keep 4:1 ratio is there n=any reason?

because 5,7,8,9 is not fixed that is actually posting period so we can see data from 1 to 12 . due to lack of data it was showing only 5,6,7,8 and in second cell i have total 3 columns .

so shall i keep ratio 12:3?

Please correct me if i am wrong

Thanks,

Varun

Show 9 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi varun,

It is because 12 months of data, shows 12 bars and again 3 bars in your requirement for CY, PY, Plan.

So 12:3 bars in two charts which needs space in ratio 4:1

Thanks,

Poovarasan

0
Former Member
Former Member

HI Poovarasan,

I think i am almost there but i am missing there . will just walk through my work

so firstly if you see below chart .now requirement has changed i need to show jan to DEC in one chart and PY CF Plan bars in another chart

so now graph starts with jan PY CF PLAN will be after december

so i created grid layout and added 2 columns . in first cell i inserted stacked chart(Jan to Dec)

2nd cell i inserted column chart with 3 bars(PY CF,Plan) and as you suggested i had given padding.

I think i am missing something?

Could you please guide me

b0sqo.png (11.2 kB)
0
Former Member
Former Member

Hi Varun,

Can you show how your chat looks now?

So I can see what really needed in it.

Thanks,

Poovarasan

0
Former Member

If needed set 7:2 or 13:3 for width as you may need extra space for y axis in your first chart

0
Former Member
Former Member

HI,

where we need to Keep this space 4:1 exactly?

Thanks,

Varun

0
Former Member
Former Member

HI Boopalan,

I kept 2 charts in 2 cells(in a grid layout) to make responsive design .below are the pain points i am facing

1. x-axis line is not joining please see below screenshot gave padding right and left padding but no luck

2.second point is if you see below chart the bar size is big compare to first chart in 1st cell i have 12 months and second cell i had 3 columns . but i see lot of variation about size of bar .want to make it same as first cel

if you could help would b really helpful for us to achieve this thing

1, see gab bin x-axis

2. size of bars should be same for 2

Thanks,

varun

xftdb.png (14.5 kB)
0
Former Member
Former Member

Hi Varun,

Can you change position of legends?

On top left and align them horizontally.

Make the same change in second chart also or set padding for the height of legends in first chart.

It will make the charts join together.

Thanks,

Poovarasan

0
Former Member
Former Member

Hi,

Yeah but what about bar size it looks different compare to adjacent chart right in second chart we have only 3 bars I would like to show bars in equal size

Thanks,

Varun

0
Former Member
Former Member

Hi Varun,

If you remove the legend chart size will increase in width, so the width of bars also increases according to it.

For that purpose only you have to set the size of both cells in proper ratio according to number of bars in charts.

Thanks,

Poovarasan

0
avatar image
Former Member
Nov 16, 2016 at 02:12 PM
0

Varun, in CSS there are so called viewport units - vw and vh - to specify width and height relative to the actual viewing area size. So you can give a custom CSS a try with your first approach to make it responsive

,

Varun, in CSS there are so called viewport units - vw, vh- which are relative to the actual viewport width and height respectively. So you could give a custom CSS a try with your first approach.

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

Ok, this new community platform is really unusable, first no comment and then suddenly a double comment

0
Former Member
Former Member

Hi.

Could you please brief me what you are saying

Thanks,

Varun

0
Former Member

Hi,

Thanks for your reply

I didn't get you what u are trying to say I didn't find any such kind in f12 want to show all bars similar shape?

Thanks,

Varun

0
Former Member
Former Member

I'm trying to say that instead of grid you can use panels and "CSS Style" property.

Put your chart inside a panel and try setting CSS Style to something like this

height:50vh; width:50vw;

Observe it becomes responsive to the browser size. For a second panel you could go like

height:50vh; width:10vw; margin-left:50vw

The rest depends on your imagination

0
Former Member
Former Member

HI Andrey.

Thanks for your reply

Its working fine as per your suggestion but mine is dynamic . if user selected September it will show jan to september .and may it will show jan to may . so agian i can see bar size variation

hope you understand

is there any workaround?

thanks,

varun

0
Former Member
Former Member

Yes, see my answer here

0
avatar image
Former Member Nov 16, 2016 at 04:47 PM
0

hi ,

I totally agree with you. Ratio n the sense how Im just confused could you please explain more

Thanks,

Varun.

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Nov 16, 2016 at 06:26 PM
0

Hi Varun,

I have created a sample for your requirement with two charts as you can see below.

I have given column widths in ratio 7:4 for reasons,

1. 3 bars in first chart and 2 bars in second chart so 3:2 ratio needed initially

2. Then I will have y axis in first chart for which i need some space so i increased the ratio to 7:4

3*2+ 1 (space for y-axis) : 2*2

i multiplied by 2 in initial ratio because while considering bar size we need to look for "bars + space between bars" size.

Thanks,

Poovarasan


Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

HI

Thanks for detailed explanation .

for me i have 12 bars in first chart and 3 bars in second chart

but these 12 bars is dynamic if user selected in prompt may so till may only i can see bars remaining it will be empty

so even though we are keeping similar ratio as you suggested its not working unfortunatetly

in below i have selected may in prompt so now i can see data till may from june to dec it will be empty .

hope you got it . so if we fix ratio for 12 bars it was not working as it is dynamic is there any workaround:(

f7fe4.png (10.3 kB)
0
Former Member

HI,

for 12 bars in first chart and 3 bars in second chart i have given 12:3 ratio

is that wrong?

what ratio i need to give to look similar?

Thanks.

Varun

0