Smart Micro Chart Facet

You can add a SmartMicroChart control to a facet within the header area in the object page.

A smart micro chart facet contains a title, subtitle, SmartMicroChart control, and a footer. Currently, the SmartMicroChart control supports both the smart area micro chart and the smart bullet micro chart (shown below) within the object page header.

To add a smart micro chart facet, in the local annotations file, use a UI.HeaderFacets term and the complex type UI.ReferenceFacet and reference the UI.Chart as shown in the sample code below.

Figure 1: Object Page Header: Smart Bullet Micro Chart

Note

Currently, the SmartMicroChart control does not support qualifiers. This means that you cannot include two micro charts that retrieve data from the same entity in an object page.

Code Samples

UI.HeaderFacets and UI.ReferenceFacet

<Annotations Target="STTA_PROD_MAN.STTA_C_MP_ProductType">
    <Annotation Term="UI.HeaderFacets">
        <Collection>
            <Record Type="UI.ReferenceFacet">
                <PropertyValue Property="Target" AnnotationPath="to_ProductSalesPrice/@UI.Chart"/>
            </Record>
        </Collection>
    </Annotation>
</Annotations>

UI.Chart Annotations

The UI.Chart Title property is used for the title.

The UI.Chart Description property is used for the subtitle.

Smart Area Micro Chart

<Annotation Term="UI.Chart">
    <Record Type="UI.ChartDefinitionType">
        <PropertyValue Property="Title" String="Sales Price" />
        <PropertyValue Property="Description" String="Area Micro Chart" />
        <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Area" />
        <PropertyValue Property="Dimensions">
            <Collection>
                <PropertyPath>PriceDay</PropertyPath>
            </Collection>
        </PropertyValue>
        <PropertyValue Property="Measures">
            <Collection>
                <PropertyPath>AreaChartPrice</PropertyPath>
            </Collection>
        </PropertyValue>
        <PropertyValue Property="MeasureAttributes">
            <Collection>
                <Record Type="UI.ChartMeasureAttributeType">
                    <PropertyValue Property="Measure" PropertyPath="AreaChartPrice" />
                    <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
                    <PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#AreaChartPrice" />
                </Record>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>

Smart Bullet Micro Chart

<Annotation Term="UI.Chart">
    <Record Type="UI.ChartDefinitionType">
        <PropertyValue Property="Title" String="Sales Revenue" />
        <PropertyValue Property="Description" String="Bullet Micro Chart" />
        <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Bullet" />
        <PropertyValue Property="Measures">
            <Collection>
                <PropertyPath>BulletChartRevenue</PropertyPath>
            </Collection>
        </PropertyValue>
        <PropertyValue Property="MeasureAttributes">
            <Collection>
                <Record Type="UI.ChartMeasureAttributeType">
                    <PropertyValue Property="Measure" PropertyPath="BulletChartRevenue" />
                    <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
                    <PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#BulletChartRevenue" />
                </Record>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>

UI.DataPoint Annotation

The DataPoint property of the MeasureAttributes of the Chart annotation should point to the UI.DataPoint annotation.

The smart micro chart supports both the Criticality and CriticalityCalculation properties of a UI.DataPoint. For an example of how to use the CriticalityCalculation see the smart area micro chart annotation example; for an example of how to use the Criticality property, see the smart bullet micro chart annotation example.

Note Although the Title for the UI.DataPoint is mandatory, it is not used by the smart micro chart.

Smart Area Micro Chart

<Annotation Term="UI.DataPoint" Qualifier="AreaChartPrice">
    <Record>
        <PropertyValue Property="Title" String="Sales Price" />
        <PropertyValue Property="Value" Path="AreaChartPrice" />
        <PropertyValue Property="TargetValue" Path="TargetPrice" />
        <PropertyValue Property="CriticalityCalculation">
            <Record>
                <PropertyValue Property="ImprovementDirection" EnumMember="UI.ImprovementDirectionType/Target" />
                <PropertyValue Property="DeviationRangeHighValue" Path="DeviationUpperBoundPrice" />
                <PropertyValue Property="DeviationRangeLowValue" Path="DeviationLowerBoundPrice" />
                <PropertyValue Property="ToleranceRangeHighValue" Path="ToleranceUpperBoundPrice" />
                <PropertyValue Property="ToleranceRangeLowValue" Path="ToleranceLowerBoundPrice" />
            </Record>
        </PropertyValue>
    </Record>
</Annotation>

Smart Bullet Micro Chart

<Annotation Term="UI.DataPoint" Qualifier="BulletChartRevenue">
    <Record>
        <PropertyValue Property="Title" String="Sales Revenue" />
        <PropertyValue Property="Value" Path="BulletChartRevenue" />
        <PropertyValue Property="TargetValue" Path="TargetRevenue" />
        <PropertyValue Property="ForecastValue" Path="ForecastRevenue" />
        <PropertyValue Property="MinimumValue" Decimal="100" />
        <PropertyValue Property="MaximumValue" Decimal="300" />
        <PropertyValue Property="Criticality" Path="Criticality" />
    </Record>
</Annotation>

Note

The following must all point to the same property in the entityType:

Measures property of the Chart annotation
Measure property of the MeasureAttributes property of the Chart annotation
Value property of the DataPoint annotation

Unit of Measure Annotations

The Unit of Measure is used for the footer of the smart micro chart. An annotation for the Unit of Measure is included in the example below. We use the Measures.ISOCurrency term in the example and it is applied to the entity type property that will be used as the value property of the UI.DataPoint.

<Annotations xmlns="http://docs.oasis-open.org/odata/ns/edm" Target="STTA_PROD_MAN.STTA_C_MP_ProductSalesPriceType/AreaChartPrice" >
    <Annotation Term="Measures.ISOCurrency" Path="Currency"/>
</Annotations>

Note

Currently, the Measures vocabulary is not supported in CDS views. Therefore, the annotation for the Unit of Measure must be added to the application’s local annotations file.

CDS Annotations

CDS Annotation Definition for UI.Chart

chart : array of
{
    qualifier : String(120);
    @LanguageDependency.maxLength : 40 
    title : String(60);
    @LanguageDependency.maxLength : 80 
    description : String(120);
    chartType : String enum
    {
       COLUMN;
       COLUMN_STACKED;
       COLUMN_STACKED_100;
       COLUMN_DUAL;
       COLUMN_STACKED_DUAL;
       COLUMN_STACKED_DUAL_100;
       BAR;
       BAR_STACKED;
       BAR_STACKED_100;
       BAR_DUAL;
       BAR_STACKED_DUAL;
       BAR_STACKED_DUAL_100;
       AREA;
       AREA_STACKED;
       AREA_STACKED_100;
       HORIZONTAL_AREA;
       HORIZONTAL_AREA_STACKED;
       HORIZONTAL_AREA_STACKED_100;
       LINE;
       LINE_DUAL;
       COMBINATION;
       COMBINATION_STACKED;
       COMBINATION_STACKED_DUAL;
       HORIZONTAL_COMBINATION_STACKED;
       HORIZONTAL_COMBINATION_STACKED_DUAL;
       PIE;
       DONUT;
       SCATTER;
       BUBBLE;
       RADAR;
       HEAT_MAP;
       TREE_MAP;
       WATERFALL;
       BULLET;
       VERTICAL_BULLET;
    };
    dimensions : array of elementRef;
    measures : array of elementRef;
    dimensionAttributes : array of
    {
       dimension : elementRef;
       role : String(10) enum
       {
           CATEGORY;
           SERIES;
       };
    };
    measureAttributes : array of
    {
       measure : elementRef;
       role : String(10) enum
       {
           AXIS_1;
           AXIS_2;
           AXIS_3;
       };
       asDataPoint : Boolean default true;
    };
}

CDS Annotation for UI.Chart: Smart Area Micro Chart

@UI.chart:[{
  title: 'Sales Price',
  description: 'Area Micro Chart',
  chartType: #AREA,
  dimensions:['PriceDay'],
  measures:['AreaChartPrice'],
  measureAttributes: [
    { measure: 'AreaChartPrice', role: #AXIS_1, asDataPoint: true }
  ]
}]

CDS Annotation for UI.Chart: Smart Bullet Micro Chart

@UI.chart:[{
  title:'Sales Revenue',
  description: 'Bullet Micro Chart',
  chartType: #BULLET,
  measures:['BulletChartRevenue'],
  measureAttributes: [
    { measure: 'BulletChartRevenue', role: #AXIS_1, asDataPoint: true }
  ]
}]

CDS Annotation Definition for UI.DataPoint

dataPoint
{
    @LanguageDependency.maxLength : 40 
    title : String(60);
    @LanguageDependency.maxLength : 80 
    description : String(120);
    @LanguageDependency.maxLength : 190 
    longDescription : String(250);
    targetValue : DecimalFloat;
    targetValueElement : elementRef;
    forecastValue : elementRef;
    minimumValue : DecimalFloat;
    maximumValue : DecimalFloat;
    visualization : String enum
    {
        NUMBER;
        BULLET_CHART;
        DONUT;
        PROGRESS;
        RATING;
    };
    valueFormat
    {
        scaleFactor : DecimalFloat;
        numberOfFractionalDigits : Integer;
    };
    referencePeriod
    {
        @LanguageDependency.maxLength : 80 
        description : String(120);
        start : elementRef;
        end : elementRef;
    };
    criticality : elementRef;
    criticalityCalculation
    {
        improvementDirection : String enum { MINIMIZE; TARGET; MAXIMIZE; };
        toleranceRangeLowValue : DecimalFloat;
        toleranceRangeLowValueElement : elementRef;
        toleranceRangeHighValue : DecimalFloat;
        toleranceRangeHighValueElement : elementRef;
        deviationRangeLowValue : DecimalFloat;
        deviationRangeLowValueElement : elementRef;
        deviationRangeHighValue : DecimalFloat;
        deviationRangeHighValueElement : elementRef;
    };
    trend : elementRef;
    trendCalculation
    {
        referenceValue : elementRef;
        isRelativeDifference : Boolean default false;
        upDifference : DecimalFloat;
        upDifferenceElement : elementRef;
        strongUpDifference : DecimalFloat;
        strongUpDifferenceElement : elementRef;
        downDifference : DecimalFloat;
        downDifferenceElement : elementRef;
        strongDownDifference : DecimalFloat;
        strongDownDifferenceElement : elementRef;
    };
    responsible : elementRef;
    responsibleName : String(120);
};

CDS Annotation for UI.DataPoint: Smart Area Micro Chart

@UI.dataPoint: {
   title: 'Sales Price',
   targetValueElement: 'TargetPrice',
   criticalityCalculation: {
      improvementDirection: #TARGET,
      toleranceRangeLowValueElement: 'ToleranceLowerBoundPrice',
      toleranceRangeHighValueElement: 'ToleranceUpperBoundPrice',
     deviationRangeLowValueElement: 'DeviationLowerBoundPrice',
     deviationRangeHighValueElement: 'DeviationUpperBoundPrice'
   }
}
ProductSalesPrice.Price as AreaChartPrice

CDS Annotation for UI.DataPoint: Smart Bullet Micro Chart

@UI.dataPoint: {
   title:'Sales Revenue',
   targetValueElement: 'TargetRevenue',
   forecastValue: 'ForecastRevenue',
   minimumValue: 100,
   maximumValue: 300,
   criticality: 'Criticality'    
}
ProductSalesRevenue.Revenue as BulletChartRevenue

Currently, the UI.DataPoint in the CDS views does not support elementRef for minimumValue and maximumValue. The values for these properties are hard-coded as in the example above.

More Information

Smart Micro Chart