Different bar color depending on values in SAPUI5 VizFrame

Question

I have a SAPUI5 VizFrame with a one DimensionDefinition, Currency, and two MeasureDefinition, Turnover and Cost. Cost should always have the same color (I used sapUiChartPaletteSequentialHue1). Turnover should have color sapUiChartPaletteSemanticBad if Cost is higher then Turnover, and color sapUiChartPaletteSemanticGood if Turnover is higher or equal to Cost.

This is the code in the view:

                    <viz:VizFrame xmlns="sap.viz" id="idDetailVizFrame" vizType='column' width="100%" height="100%" uiConfig="{applicationSet:'fiori'}">
                    <viz:dataset>
                        <vizData:FlattenedDataset data="{/DataSet}">
                            <vizData:dimensions>
                                <vizData:DimensionDefinition name="Currency" value="{Currency}"/>
                            </vizData:dimensions>
                            <vizData:measures>
                                <vizData:MeasureDefinition identity="idCost" name="{i18n>labelCost}" value="{Cost}" unit="{Currency}" />
                                <vizData:MeasureDefinition identity="idTurnover" name="{i18n>labelAccountBalance}" value="{Turnover}" unit="{Currency}" />
                            </vizData:measures>                             
                        </vizData:FlattenedDataset>
                    </viz:dataset>
                    <viz:feeds>
                        <vizFeeds:FeedItem id='valueCost' uid="valueAxis" type="Measure" values='idCost'/>
                        <vizFeeds:FeedItem id='valueTurnover' uid="valueAxis" type="Measure" values='idTurnover'/>
                        <vizFeeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Currency"/>
                    </viz:feeds>
                </viz:VizFrame>

This is the relevant part of the code in the controller:

                plotArea: {
                dataLabel: {
                    visible: false
                },
                dataPointStyle: {
                            "rules":
                            [
                                {
                                    "dataContext": {"idTurnover": {"min": 0}},
                                    "properties": {
                                        "color":"sapUiChartPaletteSemanticBad"
                                    },
                                    "displayName":"Loss"
                                },
                                {
                                    "dataContext": {"idTurnover": {"max": 0}},
                                    "properties": {
                                        "color":"sapUiChartPaletteSemanticGood"
                                    },
                                    "displayName":"Profit"
                                }                                       
                            ],
                            "others":
                            {
                                "properties": {
                                     "color": "sapUiChartPaletteSequentialHue1"
                                },
                                    "displayName":"Cost"                                    
                            }
                        }                    
            },

With this code, the Cost bar is always the same color, the turnover bar is red when turnover is less then 0 and green when more then 0. But in stead of comparing the value with 0, I want to compare it to the Cost bar. If Turnover >= Cost, color is sapUiChartPaletteSemanticGood, if Turnover < Cost, color is sapUiChartPaletteSemanticBad. How can these 2 values be compared?

PKV PKV · Accepted Answer · 2020-08-31T18:01:35

Instead of dataContext you need to use callback to perform comparison between two properties. Sample Code is as follows :-

dataPointStyle: {
                        rules: [{
                            callback: function (oContext, extData) {
                                /* I can access my Turnover value by using :- */
                                //oContext.Turnover
                                /* I can access my Cost value by using :- */
                                //extData.Cost
                                
                                //Return either true or false, based on your logic,
                                 return oContext.Turnover < extData.Cost;
                            },
                            properties: {
                                color: "sapUiChartPaletteSemanticBad"
                            },
                            displayName: "Loss"
                        },
                        {
                            callback: function (oContext, extData) {
                                  return oContext.Turnover >= extData.Cost;
                            },
                            properties: {
                                color: "sapUiChartPaletteSemanticGood"
                            },
                            displayName: "Profit"
                        }],
                        others: {
                            properties: {
                                color: "sapUiChartPaletteSequentialHue1",
                            },
                            displayName: "Cost"
                        }
                    }

vizframe used to replicate the issue:-

<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='column'>
                <viz:dataset>
                    <viz.data:FlattenedDataset data="{/milk}">
                        <viz.data:dimensions>
                            <viz.data:DimensionDefinition name="Week" value="{Week}"/>
                        </viz.data:dimensions>
                        <viz.data:measures>
                            <viz.data:MeasureDefinition name="Turnover" value="{Turnover}"/>
                            <viz.data:MeasureDefinition name="Cost" value="{Cost}"/>
                        </viz.data:measures>
                    </viz.data:FlattenedDataset>
                </viz:dataset>
                <viz:feeds>
                    <viz.feeds:FeedItem id='valueAxisFeed1' uid="valueAxis" type="Measure" values="Turnover"/>
                    <viz.feeds:FeedItem id='valueAxisFeed2' uid="valueAxis" type="Measure" values="Cost"/>
                    <viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Week"/>
                </viz:feeds>
            </viz:VizFrame>

Different bar color depending on values in SAPUI5 VizFrame

1 Answers