Donut Chart example using VizFrame in UI5.

Pie charts are extensively used in presentations and offices, Pie Charts help show proportions between categories, by dividing a circle into proportional segments. Each arc length represents a proportion of each category, while the full circle represents the total sum of all the data, equal to 100%.

A donut chart is essentially a Pie Chart with an area of the center cut out.

Data.Json:

JSON is a very lightweight format for storing data and can be directly used as a data source for SAPUI5 applications. Now create a JSON file within the model folder of the application.

Specify the data in the JSON file as below:

{
	"items": [{
		"Department": "R & D",
		"EmployeeCount": "20"
	}, {
		"Department": "Syngenta",
		"EmployeeCount": "30"
	}, {
		"Department": "Volvo",
		"EmployeeCount": "35"
	}, {
		"Department": "NIKE",
		"EmployeeCount": "60"
	}, {
		"Department": "ADIDAS",
		"EmployeeCount": "70"
	}]
}

To access the above JSON file throughout the application, specify the JSON file URI in the model under sap.ui5 section in the manifest.json file. we specify the type as JSON and URI which is the path to the JSON data to instantiate the JSON Model as shown below.

"sap.ui5": {
…………………………….
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "Donut_Chart.i18n.i18n"
				}
			},
			"Data": {
				"Data": {
				"type": "sap.ui.model.json.JSONModel",
				"uri": "model/Data.json"
				}
			}
			
		},
		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		}
	}

View:

In the view define a Vizframe chart of type donut by using the below namespaces

xmlns:viz=”sap.viz.ui5.controls”

xmlns:vizFeeds=”sap.viz.ui5.controls.common.feeds”

xmlns:vizData=”sap.viz.ui5.data”.

In our example I have taken Department as the Dimension,

Employee Count as measures.

<viz:VizFrame xmlns="sap.viz" id="idDonutChart" vizType="donut" width="100%" height="100%"
						vizProperties="{plotArea: { drawingEffect: 'glossy' },title:{ text:'Donut Chart Example'}}">
						<viz:dataset>
							<vizData:FlattenedDataset data="{/items}">
								<vizData:dimensions>
									<vizData:DimensionDefinition name="Department" value="{Department}"/>
								</vizData:dimensions>
								<vizData:measures>
									<vizData:MeasureDefinition name="Employee Count" value="{EmployeeCount}"/>
								</vizData:measures>
							</vizData:FlattenedDataset>
						</viz:dataset>
						<viz:feeds>
							<vizFeeds:FeedItem uid="size" type="Measure" values='Employee Count'/>
							<vizFeeds:FeedItem uid="color" type="Dimension" values="Department"/>
						</viz:feeds>
					</viz:VizFrame>

Controller:

In the init() function of the Controller fetch the model and make it available for the view to access.

onInit: function() {
			var sampleDatajson = new sap.ui.model.json.JSONModel("model/Data.json");
			this.getView().setModel(sampleDatajson);

		}

OUTPUT:

The Output Displays the Employee Count in each Department of the Organization.

Clicking the particular Slice of Donut, the data will be displayed as below.