Analytical Card

Usage:

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