Search code examples
odatasapui5sap-fiori

Scaleproblem: VizFrame Dual Barchart Rendering of Values


I made a dual barchart with vizframe, but I ran into a problem.

The values of the two datasets don't render on the same scale.

This makes the comparison of the datasets near impossible.

Example: show problem

Example: plnkr.co/edit/0O4gATp0P5ZvYoof

Solution: https://plnkr.co/edit/9ziljXNgOPR7jiA3?preview

Problem in example

Is it possible in VizFrame to force the two datasets to render on the one with the highest value or should I use another type of chart?

View:

<layout:FixFlex id='fixchart' minFlexSize="1000">
                        <layout:flexContent>
                            <viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='dual_bar'>
                                <viz:dataset>
                                    <viz.data:FlattenedDataset data="{ path : '/ZSD_INVOICE_DIF' , sorter : { path: 'sales_org_text'}}">
                                        <viz.data:dimensions>
                                            <viz.data:DimensionDefinition name="Verkaufsorganisationen" value="{sales_org_text}" />
                                        </viz.data:dimensions>
                                        <viz.data:measures>
                                            <viz.data:MeasureDefinition group="1" name="letztes Jahr" value="{amount_last_year}" />
                                            <viz.data:MeasureDefinition group="2" name="aktuelles Jahr" value="{amount_this_year}" />
                                        </viz.data:measures>
                                    </viz.data:FlattenedDataset>
                                </viz:dataset>
                                <viz:feeds>
                                    <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Verkaufsorganisationen" />
                                    <viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="letztes Jahr" />
                                    <viz.feeds:FeedItem id='valueAxisFeed2' uid="valueAxis2" type="Measure" values="aktuelles Jahr" />
                                </viz:feeds>
                            </viz:VizFrame>
                        </layout:flexContent>
                    </layout:FixFlex>

Solution

  • It seems to be a bug in Viz.

    It will render wrong depending on the size of the window and the values of the dataset. I checked it with different browsers and different PCs. A workaround would be to set the max values of the axis.

    A solution was found! I will at the code solution to the question.

    It needs to be reduced to one value axis and the barchart needs to be normal bar chart!