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

[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

[former_member220897]

To make it dynamic you would have to script it. You cannot unfortunately script the ratio of columns in the grid layout, but in the approach with CSS I wrote about before you could define a custom CSS like :

.c1 {width:10vw !important; height:50vh !important;}
.c2 {width:20vw !important; height:50vh !important;}
/* and so on */

and then use setCSSClass method like

PANEL_1.setCSSClass("c"+ numberOfMonths)

[Former Member]

HI Andrey,

Thanks for your reply.

so you mean capture months and based on months we need to apply css on panel?

is that your trying to say?

PANEL_1.setCSSClass("c"+ numberOfMonths)
--> Number of months?

could you please elaborate  about  this?



Thanks,

Varun

[former_member220897]

Yes, depending on the structure of your data source, you would need to calculate the actual number of months in the chart (propably using getMemberList() or getVariableValue() or maybe you know it directly from a custom global variable)

[former_member265529]

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

[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:(

[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

[Former Member]

hi ,

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

Thanks,

Varun.

[former_member220897]

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.

[former_member220897]

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

[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

[Former Member]

Hi.

Could you please brief me what you are saying

Thanks,

Varun

[former_member220897]

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

[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

[former_member220897]

Yes, see my answer here

[Former Member]

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

[former_member265529]

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

[former_member265529]

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

[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

[Former Member]

HI,

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

Thanks,

Varun

[former_member265529]

Hi Varun,

Can you show how your chat looks now?

So I can see what really needed in it.

Thanks,

Poovarasan

[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

[former_member265529]

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

[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

[former_member265529]

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

[former_member265529]

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

[former_member194504]

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

[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/

[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/

[Former Member]

Please find the screenshot

[former_member194504]

Hi,

Did you tried what @poovarasan suggested?

[former_member265529]

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

[TammyPowlas]

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

[Former Member]

hi Tammy,

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

Thanks,

Varun

[TammyPowlas]

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