Issue in displaying simple chart using flexible programming model in sapui5

[GowthamRaja]

Hi Experts,

I am exploring flexible programming model. My requirement is to display a simple chart in my custom page with x-axis(dimension) and y-axis(measures).

I am not using any sum aggregation or grouping the y-axis. Just to display as it(x-axis is type string, y-axis is type decimal(15,2)).

i tried the annotation as below

Annotation.cds:

using STODashboardService as service from '../../srv/dashboardservices';

annotate service.ZIJS_CDS_TOTAL_TI_COUNT with @Aggregation.ApplySupported: {

$Type : 'Aggregation.ApplySupportedType',

SupportedAggregationMethods: [

'min',

'max'

]

};

annotate service.ZIJS_CDS_TOTAL_TI_COUNT with @ui.Chart #PlantVsInitiatives: {

$Type : 'UI.ChartDefinitionType',

Title : 'Initiatives Overview by Plant',

Description : 'Displays min and max initiatives per plant',

ChartType : #Column,

Dimensions : ['PLANT'],

DimensionAttributes: [{

$Type : 'UI.ChartDimensionAttributeType',

Dimension: 'PLANT',

Role : #Category

}],

DynamicMeasures : [

'MinInitiatives',

'MaxInitiatives'

],

MeasureAttributes : [

{

$Type : 'UI.ChartMeasureAttributeType',

DynamicMeasure: 'MinInitiatives',

Role : #Axis1,

Label : 'Minimum Initiatives'

},

{

$Type : 'UI.ChartMeasureAttributeType',

DynamicMeasure: 'MaxInitiatives',

Role : #Axis1,

Label : 'Maximum Initiatives'

}

]

};

view.xml:

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:macros="sap.fe.macros"

xmlns:html="http://www.w3.org/1999/xhtml" controllerName="dashboard.ext.main.Main">

<Page id="Main" title="{i18n>MainTitle}">

<content>

<macros:Chart

metaPath="@com.sap.vocabularies.UI.v1.Chart#PlantVsInitiatives"

entitySet="{path: '/ZIJS_CDS_TOTAL_TI_COUNT'}"

chartTitle="Initiatives Overview by Plant"

chartType="Column">

</macros:Chart>

</content>

</Page>

</mvc:View>

the output of the chart: [50017] - Invalid data binding

I dont know where i am missing. Please need help

[dominik_jacobs · Accepted solution]

Hi,

try the following code.

using STODashboardService as service from '../../srv/dashboardservices';

annotate service.ZIJS_CDS_TOTAL_TI_COUNT with @Aggregation.ApplySupported: {
    $Type : 'Aggregation.ApplySupportedType',
    SupportedAggregationMethods: [
        'min',
        'max'
    ]
};

annotate service.ZIJS_CDS_TOTAL_TI_COUNT with @ui.presentationVariant: [{
    $Type: 'UI.PresentationVariantType',
    Visualizations: ['@UI.Chart#PlantVsInitiatives']
}];

annotate service.ZIJS_CDS_TOTAL_TI_COUNT with @ui.selectionVariant: {
    $Type: 'UI.SelectionVariantType',
    Parameters: []
};

annotate service.ZIJS_CDS_TOTAL_TI_COUNT with @ui.Chart #PlantVsInitiatives: {
    $Type : 'UI.ChartDefinitionType',
    Title : 'Initiatives Overview by Plant',
    Description : 'Displays min and max initiatives per plant',
    ChartType : #Column,
    Dimensions : ['PLANT'],
    DimensionAttributes: [{
        $Type : 'UI.ChartDimensionAttributeType',
        Dimension: 'PLANT',
        Role : #Category
    }],
    Measures : [
        'MinInitiatives',
        'MaxInitiatives'
    ],
    MeasureAttributes : [
        {
            $Type : 'UI.ChartMeasureAttributeType',
            Measure: 'MinInitiatives',
            Role : #Axis1,
            Label : 'Minimum Initiatives'
        },
        {
            $Type : 'UI.ChartMeasureAttributeType',
            Measure: 'MaxInitiatives',
            Role : #Axis1,
            Label : 'Maximum Initiatives'
        }
    ]
};

Explanation:

1. @ui.presentationVariant: This annotation is added to ensure that the chart visualization is linked with the CDS view in a way that SAP Fiori understands and displays it.
2. @ui.selectionVariant: Although no parameters are defined, this helps in making the CDS compatible with selection variants in Fiori.
3. Measures vs DynamicMeasures: I replaced DynamicMeasures with Measures to reflect that these are fixed measures in the CDS view, aligning with how Fiori interprets the data.

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:macros="sap.fe.macros"
    xmlns:html="http://www.w3.org/1999/xhtml" controllerName="dashboard.ext.main.Main">
    <Page id="Main" title="{i18n>MainTitle}">
        <content>
            <macros:Chart
                metaPath="@com.sap.vocabularies.UI.v1.Chart#PlantVsInitiatives"
                entitySet="{path: '/ZIJS_CDS_TOTAL_TI_COUNT'}"
                chartTitle="Initiatives Overview by Plant"
                chartType="Column">
            </macros:Chart>
        </content>
    </Page>
</mvc:View>

Explanation:

1. metaPath: The metaPath points to the @ui.Chart#PlantVsInitiatives annotation defined in the CDS, which ensures that the correct chart is displayed.
2. entitySet: This should correctly map to the CDS entity exposed by the OData service. Ensure that /ZIJS_CDS_TOTAL_TI_COUNT is the correct path to your entity set.

You should also check the following:

Service Binding: Ensure that your OData service is correctly bound and exposed in your SAP Gateway.

Metadata Check: Verify the metadata in the browser to ensure that all annotations are correctly exposed.

Console Logs: Check the browser's console logs for any errors related to data binding or annotation misconfiguration

Greetings

Dom

[GowthamRaja · Accepted solution]

Now it says "No Chart annotation found"

[GowthamRaja · Accepted solution]

i have altered the code as below 

View.xml:

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:macros="sap.fe.macros" xmlns:html="http://www.w3.org/1999/xhtml" controllerName="dashboard.ext.main.Main">
<Page id="Main" title="{i18n&gt;MainTitle}">
<content>
<macros:Chart metaPath="@com.sap.vocabularies.UI.v1.Chart#PlantVsInitiatives" entitySet="{path: '/ZIJS_CDS_TOTAL_TI_COUNT'}" chartTitle="Initiatives Overview by Plant" chartType="Column">
</macros:Chart>

</content>
</Page>
</mvc:View>

annotation.cds:

using STODashboardService as service from '../../srv/dashboardservices';

annotate service.ZIJS_CDS_TOTAL_TI_COUNT with @(

Aggregation: {ApplySupported: {

$Type : 'Aggregation.ApplySupportedType',

Transformations : ['aggregate'],

Rollup : #None,

AggregatableProperties: [{

$Type : 'Aggregation.AggregatablePropertyType',

Property: INITIATIVES,

}, ]

}, },

Analytics : {

// AggregatedProperty #min: {

// Name : 'Initiatives',

// AggregationMethod : 'min',

// AggregatableProperty: 'INITIATIVES',

// ![@Common.Label] : 'Initiatives'

// },

AggregatedProperty #max: {

Name : 'Initiatives',

AggregationMethod : 'max',

AggregatableProperty: 'INITIATIVES',

![@Common.Label] : 'Initiatives'

},

// AggregatedProperty #sum: {

// Name : 'Initiatives',

// AggregationMethod : 'sum',

// AggregatableProperty: 'INITIATIVES',

// ![@Common.Label] : 'Initiatives'

// },

},

);

annotate service.ZIJS_CDS_TOTAL_TI_COUNT with @ui.Chart: {

$Type : 'UI.ChartDefinitionType',

Title : 'Chart Title',

Description : 'Chart Description',

ChartType : #Column,

DynamicMeasures : ['@Analytics.AggregatedProperty#max'],

Dimensions : [PLANT],

MeasureAttributes : [{

$Type : 'UI.ChartMeasureAttributeType',

DynamicMeasure: '@Analytics.AggregatedProperty#max',

Role : #Axis1

}],

DimensionAttributes: [{

$Type : 'UI.ChartDimensionAttributeType',

Dimension: PLANT,

Role : #Category

}]

};

Output: now the chart renders data without error as below

Current Output

but the expected output is:

expected output

how to achieve the expected output.

[GowthamRaja · Accepted solution]

Final output is achieved using below code in annotations.cds

using STODashboardService as service from '../../srv/dashboardservices';

annotate service.ZIJS_CDS_TOTAL_TI_COUNT with @(

Aggregation: {ApplySupported: {

$Type : 'Aggregation.ApplySupportedType',

Transformations : [

'aggregate',

'groupby'

],

Rollup : #None,

GroupableProperties : [PLANT],

AggregatableProperties: [{

$Type : 'Aggregation.AggregatablePropertyType',

Property: INITIATIVES,

}, ]

}, },

Analytics : {

// AggregatedProperty #min: {

// Name : 'Initiatives',

// AggregationMethod : 'min',

// AggregatableProperty: 'INITIATIVES',

// ![@Common.Label] : 'Initiatives'

// },

AggregatedProperty #max: {

Name : 'Initiatives',

AggregationMethod : 'max',

AggregatableProperty: 'INITIATIVES',

![@Common.Label] : 'Initiatives'

},

// AggregatedProperty #sum: {

// Name : 'Initiatives',

// AggregationMethod : 'sum',

// AggregatableProperty: 'INITIATIVES',

// ![@Common.Label] : 'Initiatives'

// },

},

);

annotate service.ZIJS_CDS_TOTAL_TI_COUNT with @ui.Chart: {

$Type : 'UI.ChartDefinitionType',

Title : 'Chart Title',

Description : 'Chart Description',

ChartType : #Column,

DynamicMeasures : ['@Analytics.AggregatedProperty#max'],

Dimensions : [PLANT],

MeasureAttributes : [{

$Type : 'UI.ChartMeasureAttributeType',

DynamicMeasure: '@Analytics.AggregatedProperty#max',

Role : #Axis1

}],

DimensionAttributes: [{

$Type : 'UI.ChartDimensionAttributeType',

Dimension: PLANT,

Role : #Category

}]

};