cancel
Showing results for 
Search instead for 
Did you mean: 

How to resize the height of Bars in Stacked Bar Chart

former_member229176
Participant
0 Kudos

Hello, I have developed a stacked bar chart in UI5.

It is working fine in `PC` and in `Ipad's Portrait` orientation. But when it comes to `Ipad's landscape` orientation, the chart is becoming small and it shows a scrollbar to access bars which are at the bottom of the chart. I'm not sure why stacked bar chart is not dynamically adjusting the heights of bars.(As shown in figure)

My view :

    <f:SimpleForm editable="true" layout="ResponsiveGridLayout"
    id="OEEform" labelSpanL="6"
    labelSpanM="6" adjustLabelSpan="false" emptySpanL="0"
    emptySpanM="0" columnsL="2" columnsM="2">
    <f:content>

    <Label id="idPerformance" visible="true" text="Performance">
    <layoutData>
    <l:GridData span="L5 M5 S5" />
    </layoutData>
    </Label>
    <ProgressIndicator id="idPerformancePI"
    percentValue="0" showValue="true" state="None"
    displayValue="0%" width="100%" />

    <Label id="idAvailability" visible="true" text="Availability">
    <layoutData>
    <l:GridData span="L5 M5 S5" />
    </layoutData>
    </Label>
    <ProgressIndicator id="idAvailabilityPI"
    class="sapUiSmallMarginBottom" percentValue="0"
    displayValue="0%" showValue="true" state="None" width="100%" />

    <core:Title />

    <Label id="idQuality" visible="true" text="Quality">
    <layoutData>
    <l:GridData span="L5 M5 S5" />
    </layoutData>
    </Label>
    <ProgressIndicator id="idQualityPI"
    percentValue="0" displayValue="0%" showValue="true"
    state="None" width="100%" />
    <Label id="idOEE" visible="true" text="OEE">
    <layoutData>
    <l:GridData span="L5 M5 S5" />
    </layoutData>
    </Label>
    <ProgressIndicator id="idOEEPI"
    percentValue="0" displayValue="0%" showValue="true"
    state="None" width="100%" />
    </f:content>
    </f:SimpleForm>
    <viz:Popover id="idPopOver"></viz:Popover>
    <viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
     width='100%' vizType='stacked_bar'>
    <viz:dataset>
    <viz.data:FlattenedDataset
    data="{/Rowsets/Rowset/0/Row}">
    <viz.data:dimensions>
    <viz.data:DimensionDefinition
    name="Title" value="{Title}" />
    <!-- <viz.data:DimensionDefinition name="Staco" value="{Staco}" 
    /> -->
    <viz.data:DimensionDefinition
    name="Status" value="{Status}" />
    <!-- <viz.data:DimensionDefinition name="Fat Percentage" 
    value="{Fat Percentage}" /> -->
    </viz.data:dimensions>
    <viz.data:measures>
    <viz.data:MeasureDefinition
    name="Hours" value="{Hours}" />
    </viz.data:measures>
    </viz.data:FlattenedDataset>
    </viz:dataset>
    <viz:feeds>
    <viz.feeds:FeedItem uid="valueAxis"
    type="Measure" values="Hours" />
    <viz.feeds:FeedItem uid="categoryAxis"
    type="Dimension" values="Title" />
    <viz.feeds:FeedItem uid="color" type="Dimension"
    values="Status" />
    <!-- <viz.feeds:FeedItem uid="color" type="Dimension" values="Fat 
    Percentage" /> 
    <viz.feeds:FeedItem uid="waterfallType"
    type="Dimension" values="Type" /> -->
    </viz:feeds>
    </viz:VizFrame>

Now there is only one way where I need to explicitly reduce the heights of the bar when the orientation is landscape. I added below code(see the comment) in the controller where I'm assigning properties to the chart but somehow it is not setting up the height.

       oVizFrame.setVizProperties({

        valueAxis : {
        title : {
        visible : true
        }
        },

        categoryAxis : {
        title : {
        visible : false
        },
        label:{
        visible:false
        }
        },

        legend: {
         title: {
             visible: false
         },
         label: {
             text: {
                   positiveValue: "Hours"
             }
         }
        },
        plotArea:{
         dataLabel:{
        renderer: function(oParam){

         //alert(oParam.dataPointWidth + " -- " + oParam.ctx["Status"]);

        if(oParam.dataPointWidth > 300)
        {
        oParam.text = oParam.ctx["Status"] + " (" + oParam.val + ")";
        }
    // Below code is not setting the height of the bar
        if (sap.ui.Device.orientation.landscape === true){
        oParam.dataPointHeight = 10;
        }
         },
         visible : true
         },
        dataPointStyle:{  //Allows to set color,legend and data label based on rules defined.
        'rules':[ 

What am I doing wrong? Is there any other way to resize the height of the bar in a bar chart?

Accepted Solutions (0)

Answers (0)