Chart positioning in a tabstrip

[Former Member]

Hi,

I use a tabstrip with 5 tabs for my dashboard and every tab has different kind of charts.

I try to set up the margins, width and height for all charts that I can position them on the same place.

I created a css file defining 3 different kinds of charts and entered these CSS classes to the properties of each chart on the dashboard.

But the charts which use the same CSS class behave not the same.

I use this script for the type Chart1. The same applies for other CSS classes like .Chart2, .Chart3.

.Chart1 {margin-left: 5px; !important; }

.Chart1 {margin-bottom: 20px; !important; }

.Chart1 {width: 1322px; !important; }

.Chart1 {height: 636px; !important; }

Something wrong about the script or am I making another mistake?

Thanks in advance for any hint.

Regards,

Deniz

[MustafaBensan · Accepted solution]

Hi Deniz,

In my experience, there is generally no need to apply CSS to position a chart as this can be achieved with the layout and margin properties.  A grid layout is only needed if you have a requirement to place the chart together with other content with relative or responsive spacing.

Can you be a little more specific about how you need the charts positioned in each tab?  Is there any other content in the tabs?  Does the chart need to take up the entire size of the tab space or just a fixed area?

To take a very simple example, which does not require the layout grid, I have placed 5 different charts in a tabstrip such that they fill the entire space, as shown below:

Perhaps if you could post a mockup of the desired result, we could provide more guidance.

Regards,

Mustafa.

[Former Member · Accepted solution]

Hi Mustafa,

Thanks for your reply. Your suggestion works pretty well at my side as well.

But I don't need to fill the entire space.

In my dashboard there are 5 tabs and in each tab there are filter components on top.

And in each tab there are 2 charts which I show using a button. They are placed on top of each other. So I need to show any kind of chart at the same place on the dashboard no matter which one is used.

Here is a screenshot of one of the tabs:

Regards,

Deniz

[MustafaBensan · Accepted solution]

Hi Deniz,

Thanks for the clarification.  So if I understand correctly, you need a fixed area at the top for the filters and then the charts should take the remainder of the available space, with the visibility of each chart in the same tab toggled based on the selection.

So, what I suggest is that for both charts, you set the layout properties as follows:

Top Margin: 100 (Or whatever height is needed to provide enough space for the filters)

Left Margin: 5

Bottom Margin: 20

Right Margin: 5

Width: Auto

Height: Auto

The filters should then be placed in the top as per your screenshot.  With these settings, the chart will expand to fill the tab but always leave a fixed space at the top for your filters.  Does that make sense?

Regards,

Mustafa.

[MustafaBensan · Accepted solution]

Hi Deniz,

Based on your screenshot, I have prepared the following example:

With these settings, the filters will always appear in the same fixed position at the top but the chart will take up the remainder of the available space based on the browser size.  If you made the chart a fixed size then you will end up with scroll bars if the browser window is too small and extra white space if the browser window is too large.  So in this situation it is best to implement a responsive design where the chart resizes accordingly.

Regards,

Mustafa.

[Former Member · Accepted solution]

Hi Mustafa,

I thought it will be easier with CSS class but anyway your solution works very well.

And I thank you for the detailed clarification.

Kind regards and cok tesekkürler 🙂

[MustafaBensan · Accepted solution]

You're welcome.  I try to avoid CSS where possible because I think that is getting too low-level, even if Design Studio is intended as developer tool.  You may have no choice but to apply CSS for fine tuning the appearance of a chart, such as certain colour selections or label styles etc but for positioning, the layout properties should always enable you to implement the desired result.

İyi çalışmalar

[MustafaBensan]

Hi Deniz,

As a further follow-up to my comments, the property settings based on your initial CSS and the corresponding chart would like this:

Since the chart is of a fixed size however, the display will only be effective if the user ensures the size of the browser content area is at least 1322 x 636.  Is it your intention to display a fixed size chart rather than a responsive chart?

Regards,

Mustafa.

[Former Member]

Hi Mustafa,

Yes, I want to display a fixed size chart.

Regards,

Deniz

[MustafaBensan]

Hi Deniz,

Based on your explanation above, I would suggest you simply implement a fixed space for the filters and then let the chart take up the remainder of the space, as per the property settings I have mentioned above.  Does that meet your requirements?

Regards,

Mustafa.

[Former Member]

Now I test placing the chart into a grid.

I used the SAP tutorial about applying a grid layout.

https://www.youtube.com/watch?v=KpsHyp6RaL8&feature=youtu.be

This works well for an image but not for a chart !

This is the unsatisfying result I get. The chart is not placed into the grid properly although I made the same steps in the tutorial. See the properties.

Any idea/s why?

[TammyPowlas]

Can you check the padding of the charts:

Perhaps also make your layout settings/properties the same?

[Former Member]

The padding is the same with 24px for all.

I want to define the layout properties (margins) for 8 charts in different tabs with CSS class using this script:

.Chart1 {margin-left: 5px; !important; }

.Chart1 {margin-bottom: 20px; !important; }

.Chart1 {width: 1322px; !important; }

.Chart1 {height: 636px; !important; }

Is something wrong with the script?

[former_member194504]

Hi Denis,

Please try like this, your script syntax is wrong. It seems working.

.chart{
width: 1322px !important;
height: 636px !important;
border:1px solid black;
margin-left: 5px !important;
margin-bottom: 20px !important;
}

Thanks,
Nithyanandam

[Former Member]

Hi Nithyanandam,

Thanks for your reply but I think something is wrong with the code.

I use Notepad++ and the first margin definition is in blue and the others are in black.

!important should actually overwrite the margin properties in Design Studio.

But it does not 😞

Regards,

Deniz

[former_member194504]

Hi deniz,

Yes you making mistake in code.

It should be like

Margin-left:5px !important;

It should be not like

Margin-left:5px; !important;

Thanks,
Nithyanandam

[TammyPowlas]

Hi Deniz - I am curious; what are your property settings for auto for the tab strips and the charts?  Perhaps use the camera icon to upload the property settings so we can see?

[Former Member]

Hi Tammy,

In original name of the CSS class is "BrainChartDual" in the chart properties:

Tabstrip: