Analytical Card
Usage:
- Use this card type if you want to visualize analytics data.
- Analytical Card contains a chart visualization configuration. Supported chart types are Line, StackedBar, StackedColumn, Donut.
- The card itself will always load the header content, but the chart will only be loaded if the used distribution has the sap.viz library.
Properties
The Analytical Card contains a chart visualization configuration
Configuration properties
Property | Type | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
chartType | string | Yes | Can be one of "Line", "StackedBar", "StackedColumn" or "Donut." | 1.14.0 | 1.62 |
minHeight | string | No | Defines the minimum height of the chart in sap.ui.core.CSSSize units. | 1.16.0 | 1.85 |
legend | object | No | Represents chart legend attributes. | 1.14.0 | 1.62 |
plotArea | object | No | Describes the plotArea properties. | 1.14.0 | 1.62 |
title | object | No | Represents the title attributes. | 1.14.0 | 1.62 |
measureAxis | string | No | Represents the value set for the measure axis. | 1.14.0 | 1.62 |
dimensionAxis | string | No | Represents the value set for the dimension axis. | 1.14.0 | 1.62 |
measures | array | Yes | List of definitions of all measures in the dataset. | 1.14.0 | 1.62 |
dimensions | array | Yes | List of definitions of all dimensions in this dataset. | 1.14.0 | 1.62 |
Measures and dimensions properties
Property | Type | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
label | string | Yes | Name of the field as displayed in the chart. | 1.14.0 | 1.62 |
value | string | Yes | Value for the field. | 1.14.0 | 1.62 |
Example
Define the type and data for the card:
{ "sap.card": { "type": "Analytical", "header": {}, "content": {} } }
Define the header of the card:
{ "header": { "type": "Numeric", "data": { "json": { "n": "56", "u": "%", "trend": "Up", "valueColor": "Good" } }, "title": "Project Cloud Transformation", "subTitle": "Forecasted goal achievement depending on business logic and other important information", "unitOfMeasurement": "EUR", "mainIndicator": { "number": "{n}", "unit": "{u}", "trend": "{trend}", "state": "{valueColor}" }, "details": "Project Cloud Transformation details and additional information", "sideIndicators": [ { "title": "Long title", "number": "3252.234", "unit": "K" }, { "title": "Long Deviation Long Deviation", "number": "22.43", "unit": "%" } ] } }
Define the content of the card:
"content": { "chartType": "StackedColumn", "legend": { "visible": false }, "plotArea": { "dataLabel": { "visible": false, "showTotal": true } }, "title": { "text": "Stacked column chart", "visible": true, "alignment": "Bottom" }, "measureAxis": "valueAxis", "dimensionAxis": "categoryAxis", "data": { "request": { "url": "./cardcontent/revenue.json" }, "path": "/list" }, "dimensions": [ { "label": "Weeks", "value": "{Week}" } ], "measures": [ { "label": "Revenue", "value": "{Revenue}" }, { "label": "Cost", "value": "{Cost}" } ] }
The content of the revenue.json which we are requesting:
"list": [ { "Week": "CW14", "Revenue": 431000.22, "Cost": 230000.00, "Cost1": 24800.63, "Cost2": 205199.37, "Cost3": 199999.37, "Target": 500000.00, "Budget": 210000.00 }, { "Week": "CW15", "Revenue": 494000.30, "Cost": 238000.00, "Cost1": 99200.39, "Cost2": 138799.61, "Cost3": 200199.37, "Target": 500000.00, "Budget": 224000.00 }, { "Week": "CW16", "Revenue": 491000.17, "Cost": 221000.00, "Cost1": 70200.54, "Cost2": 150799.46, "Cost3": 80799.46, "Target": 500000.00, "Budget": 238000.00 }, { "Week": "CW17", "Revenue": 536000.34, "Cost": 280000.00, "Cost1": 158800.73, "Cost2": 121199.27, "Cost3": 108800.46, "Target": 500000.00, "Budget": 252000.00 }, { "Week": "CW18", "Revenue": 675000.00, "Cost": 230000.00, "Cost1": 140000.91, "Cost2": 89999.09, "Cost3": 100099.09, "Target": 600000.00, "Budget": 266000.00 }, { "Week": "CW19", "Revenue": 680000.00, "Cost": 250000.00, "Cost1": 172800.15, "Cost2": 77199.85, "Cost3": 57199.85, "Target": 600000.00, "Budget": 280000.00 }, { "Week": "CW20", "Revenue": 659000.14, "Cost": 325000.00, "Cost1": 237200.74, "Cost2": 87799.26, "Cost3": 187799.26, "Target": 600000.00, "Budget": 294000.00 } ]
Create the view to display the card:
<mvc:View xmlns:w="sap.ui.integration.widgets"> <w:Card manifest="./manifest.json" width="400px" height="auto"/> </mvc:View>Try it Out