on 11-14-2016 5:09 PM
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
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)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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:(
hi ,
I totally agree with you. Ratio n the sense how Im just confused could you please explain more
Thanks,
Varun.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
Yes, see my answer here
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
hi Tammy,
Thanks for reply for.now is there any workaround without using sdk?
Thanks,
Varun
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
90 | |
10 | |
10 | |
9 | |
7 | |
6 | |
6 | |
5 | |
4 | |
3 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.