Skip to Content

VizFrame stacked bar chart in sap.ui.table column


I am trying to find a solution to include a chart in a table.

Im trying to use VizFrame stacked_bar with sap.ui.table.

The table data is bound to a JSON model: items="{tableData>/table1}"

The JSON model is called tableData and the dataset sits in /table1.

The rows with data are shown for all columns except the VizFrame column.

Ive used UI5 Diagnostics and can see that the dataset is bound correctly. I think there is something else I'm missing.

Table Column XML:

<table:Column type="Active">
    <Label text="{i18n>column1}" /> 
<viz:VizFrame id="graph" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='stacked_bar'>
        < data="{tableData>/}"> 
                < name="value" value="{tableData>Name}" />
                < name="avbl" value="{tableData>qtyA}" /> 
                < name="blk" value="{tableData>qtyB}" /> 
                < name="max" value="{tableData>qtyC}" /> 
        <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="avbl" /> 
        <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="blk" /> 
        <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="max" /> 
        <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="value" /> 

This is the chart that gets drawn in each row but no stacked_bar. As I said the binding is there. I can see in UI5 Diagnostics that for this graph the left "value" has a value in the diagnostics tool but it says No value here.

From the above is there anything that I have configured incorrectly?

I have also tried to use the StackedBarMicroChart but this I cant find any config to implement a reference line.

This is ultimately what I would like to do inside the table:

Green = avbl

Orange = blk

Light Grey = max

2 x reference lines.

Is this possible with either VizFrames or StackedBarMicroChart?

Thanks in advance!

capture.png (6.0 kB)
graph.jpg (2.0 kB)
Add comment
10|10000 characters needed characters exceeded

  • Can you share your complete table code, it seems there is some issue with the binding.

  • As you said "The JSON model is called tableData and the dataset sits in /table1", would that means below is the real path for dimensions and measures?

    Dimension: tableData/table1/name
    avbl: tableData/table1/qtyA
    blk: tableData/table1/qtyB
    max: tableData/table1/qtyC

    Also, adding path like


    on each DimensionDefinition and MeasureDefinition in FlattenedDataset would not be necessary as you have already defined the data path

    < data="{tableData>/}">

    on top.

    I suspect the issue is about the data path so please check it from your end.

  • Follow
  • Get RSS Feed

0 Answers