Skip to Content
avatar image
Former Member

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

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

11 Answers

  • Nov 14, 2016 at 05:40 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 14, 2016 at 06:07 PM

    hi Tammy,

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

    Thanks,

    Varun

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 14, 2016 at 07:47 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 15, 2016 at 06:05 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

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

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 16, 2016 at 05:40 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 16, 2016 at 05:52 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • 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

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

    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.

    Add comment
    10|10000 characters needed characters exceeded

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

    hi ,

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

    Thanks,

    Varun.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 16, 2016 at 06:26 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • 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