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