Analytical Card

Analytical Card displays business data visualized in different charts.

The charts are rendered with the sap.viz library, which is part of SAPUI5 distribution and is not available in OpenUI5.

In the card manifest charts are defined by the chartType, measures, dimensions and feeds properties. These properties and their values are derived from and follow the sap.viz charting library definitions. With the optional chartProperties property charts can be customized with all the options from the VizDocs. Samples of the sap.viz library can be found here.

Usage

• Use this card type if you want to visualize analytics data.
• 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

Deprecated Properties

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": "stacked_column",
	"chartProperties": {
		"legend": {
			"visible": false
		},
		"plotArea": {
			"dataLabel": {
				"visible": false,
				"showTotal": true
			}
		},
		"title": {
			"text": "Stacked column chart",
			"alignment": "bottom"
		}
	},
	"data": {
		"request": {
			"url": "./cardcontent/revenue.json"
		},
		"path": "/list"
	},
	"dimensions": [
		{
			"name": "Weeks",
			"value": "{Week}"
		}
	],
	"measures": [
		{
			"name": "Revenue",
			"value": "{Revenue}"
		},
		{
			"name": "Cost",
			"value": "{Cost}"
		}
	],
	"feeds": [
		{
			"type": "Dimension",
			"uid": "categoryAxis",
			"values": [
				"Weeks"
			]
		},
		{
			"type": "Measure",
			"uid": "valueAxis",
			"values": [
				"Revenue",
				"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