Skip to Content

VizFrame stacked bar chart in sap.ui.table column

Hello,

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}" /> 
<table:template> 
<viz:VizFrame id="graph" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='stacked_bar'>
    <viz:dataset>
        <viz.data:FlattenedDataset data="{tableData>/}"> 
            <viz.data:dimensions> 
                <viz.data:DimensionDefinition name="value" value="{tableData>Name}" />
            </viz.data:dimensions>
            <viz.data:measures> 
                <viz.data:MeasureDefinition name="avbl" value="{tableData>qtyA}" /> 
                <viz.data:MeasureDefinition name="blk" value="{tableData>qtyB}" /> 
                <viz.data:MeasureDefinition name="max" value="{tableData>qtyC}" /> 
            </viz.data:measures> 
        </viz.data:FlattenedDataset> 
    </viz:dataset> 
    <viz:feeds> 
        <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" /> 
    </viz:feeds> 
</viz:VizFrame></table:template></table:Column>

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
    Measures:
    avbl: tableData/table1/qtyA
    blk: tableData/table1/qtyB
    max: tableData/table1/qtyC

    Also, adding path like

    {tableData>name}

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

    <viz.data:FlattenedDataset data="{tableData>/}">

    on top.

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

  • Get RSS Feed

0 Answers