How to get the main window actual height in pixels to manually size charts

Support
#1

I have a built a user configurable dashboard screen which shows some charts. I want to expand the size of the Chart if it is the only chart on the screen configured. If I set the chart height to 100% the chart is not shown. Is this a limitation of charts ?
So if I need to set the size of the chart in Pixels, how do I get the size of the space available ?
How can I get the actual height in pixels of the mainWindow to calculate it ?

#3

Hello!

Charts like other components work with relative sizes. Probably, the issue occurs due to parent layouts where chart placed. Could you please share XML descriptor code or share a small demo project where problem is reproduced?

#4

I have 3 layers.

  1. Screen which has the dashboard. It will inject one Dashboard Page Fragment.

  2. Dashboard page fragment is layout as such:

<fragment xmlns="http://schemas.haulmont.com/cuba/screen/fragment.xsd">
    <layout expand="chartBox2" spacing="true">
        <hbox id="chartBox1" width="100%" height="AUTO" spacing="false">
            <fragment id="chart11" screen="tcaplos_LosDashboardFragment"/>
            <fragment id="chart12" screen="tcaplos_LosDashboardFragment"/>
            <fragment id="chart13" screen="tcaplos_LosDashboardFragment"/>
            <fragment id="chart14" screen="tcaplos_LosDashboardFragment"/>
        </hbox>
        <hbox id="chartBox2" width="100%" height="AUTO" spacing="false">
            <fragment id="chart21" screen="tcaplos_LosDashboardFragment" height="100%"/>
            <fragment id="chart22" screen="tcaplos_LosDashboardFragment" height="100%"/>
            <fragment id="chart23" screen="tcaplos_LosDashboardFragment" height="100%"/>
            <fragment id="chart24" screen="tcaplos_LosDashboardFragment" height="100%"/>
        </hbox>
    </layout>
</fragment>
  1. For each chart fragment:
<layout>
        <groupBox id="chartGrpBox" width="100%">
            <chart:serialChart id="chart" theme="LIGHT"
                               width="100%"
                               height="190px"
                               usePrefixes="true"
                               categoryField="cat">
                <chart:valueAxes>
                    <chart:axis id="axis1" position="LEFT"/>
                    <!-- chart:axis id="axis2" position="RIGHT"/ -->
                </chart:valueAxes>
                <chart:categoryAxis labelRotation="45" minHorizontalGap="0"/>
            </chart:serialChart>
            <chart:pieChart id="pie" theme="LIGHT" visible="false"
                            width="100%"
                            height="190px"
                            labelRadius="2"
                            innerRadius="65%"
                            minRadius="50"
                            startDuration="0"
                            titleField="cat"
                            valueField="amt">
                <chart:allLabels>
                    <chart:label id="centerLabel" align="CENTER"/>
                </chart:allLabels>
            </chart:pieChart>
        </groupBox>
    </layout>

If I set the Chart height to 100%, the chart doesn’t show. So I had to set the height to 190px.

#5

The Dashboard page fragment expands chartBox2 and automatically set its height = 100%.

The chartBox1 has height = AUTO, it means that this Hbox will occupy space by its content height value, but this content has a relative height size equal to 100%.
And this is a problem: parent has height by its content and child should have height 100% of unknown parent height.

I think you can manage “expanding” programmatically if chartBox1 contains the only chart or chartBox2.

getWindow().expand(chartBox1);

If they both contain charts - reset expanding in order to set equal space for charts:

@Subscribe
public void onInit(InitEvent event) {
    getWindow().resetExpanded();
}

The other way is to rework the whole layout.

#7

OK Thanks.
Got it to work, by manipulating the component heights and using expand() / resetExpanded() accordingly.